/*! Site custom styles (loads AFTER assets/css/main.css) */

/* =========================
   Global base & helpers
   ========================= */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* Fluid media everywhere (prevents tiny or cropped images) */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Comfortable side padding for common wrappers */
:root { --page-gap: clamp(12px, 3.5vw, 24px); }
.wrapper, .kh-container, .content-wrapper, .inner, .container {
  padding-inline: var(--page-gap);
}

/* =========================
   Fluid typography (feels similar on different monitors)
   ========================= */
body {
  font-size: clamp(16px, 1.05vw + 0.25rem, 20px);
  line-height: 1.65;
}
h1 { font-size: clamp(28px, 2.2vw + 0.5rem, 44px); line-height: 1.2; margin: 0 0 0.6em; }
h2 { font-size: clamp(22px, 1.6vw + 0.45rem, 34px); line-height: 1.25; margin: 1em 0 0.5em; }
h3 { font-size: clamp(18px, 1.1vw + 0.35rem, 26px); line-height: 1.3; margin: 0.8em 0 0.5em; }

/* =========================
   Layout containers
   ========================= */
.kh-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 28px);
}

.content-wrapper {
  width: 100%;
  max-width: clamp(960px, 88vw, 1200px);
  margin: 0 auto;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  align-items: flex-start;
}

/* Default column balance; photo slightly larger on desktop */
.story-text       { flex: 1;   }
.story-image-side { flex: 1.25; }

/* Story images: fill column, avoid cropping */
.story-image-side img,
.story-hero,
.story-img {
  width: 100%;
  height: auto;
  object-fit: contain; /* use contain to avoid cut-off on mobile */
  border-radius: 18px;
}

/* Helpful spacing utility */
.story-space { margin-top: 1.75rem; }

/* =========================
   Mobile first stacking & safeguards
   ========================= */
@media (max-width: 768px) {
  /* Stack any multi-column layouts */
  .content-wrapper,
  .two-col,
  .columns,
  .row,
  .grid { display: block !important; }

  .content-wrapper > *,
  .two-col > *,
  .columns > *,
  .row > *,
  .grid > * { width: 100% !important; }

  /* Clear floats from the theme so text doesn't hug images */
  .image.left, .image.right {
    float: none !important;
    margin: 0 0 var(--page-gap) 0 !important;
  }
}

/* =========================
   Strong image rules inside common sections
   (stops fixed heights/max-heights from main.css)
   ========================= */
.blog-story img,
.kh-container img,
.content-wrapper img,
.blog-section img,
.card img,
.banner img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto var(--page-gap, 1.5rem);
  border-radius: 12px;
}

/* =========================
   Buttons
   ========================= */
.pill-btn {
  display: inline-block;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #222;
  background: #fff;
  transition: box-shadow 120ms ease;
  white-space: nowrap;
}
.pill-btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.07); }

/* Ensure pill button wins inside blog cards */
.blog-section .text a.pill-btn {
  border: 1px solid #d1d5db !important;
  border-radius: 9999px !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  background: #fff !important;
  color: #222 !important;
}

/* =========================
   Minimal utility classes you already used
   (kept for compatibility with your HTML)
   ========================= */
.relative { position: relative; }
.flex     { display: flex; }
.grid     { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-start  { justify-content: flex-start; }
.flex-col       { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-full         { width: 100%; }
.w-1\/2         { width: 50%; }
.h-auto         { height: auto; }
.h-full         { height: 100%; }
.overflow-hidden{ overflow: hidden; }
.rounded-full   { border-radius: 9999px; }
.border { border: 1px solid currentColor; }
.border-2 { border: 2px solid currentColor; }
.bg-cover { background-size: cover; }
.bg-center{ background-position: center; }
.object-cover { object-fit: cover; }
.text-center { text-align: center; }
.italic { font-style: italic; }
.underline { text-decoration-line: underline; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* === Blog index: prevent image cropping / tiny images === */
.blog-section img,
.blog-section .image img,
.blog-section .card img,
.image.main img,
.blog-hero img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;   /* show the whole photo on mobile */
  display: block;
  border-radius: 12px;
}
/* === Fix blog index images (no cropping) + consistent rounded corners === */

/* The blog cards' image wrappers sometimes impose heights/overflow */
.blog-section .image,
.blog-section .card .image,
.blog-section .image.main {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Make the actual images fluid, not cropped, and rounded everywhere */
.blog-section .image img,
.blog-section .card img,
.blog-section .image.main img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;   /* show the whole photo on mobile/desktop */
  border-radius: 16px !important;   /* same corners across devices */
  display: block;
}

/* Ensure story pages keep the same rounded corners on all screens */
.story-image-side img,
.story-hero,
.story-img {
  border-radius: 16px !important;
}
/* Story pages: keep desktop images cropped to a comfortable height */
@media (min-width: 992px) {
  .story-image-side img,
  .story-hero,
  .story-img {
    width: 100%;
    max-height: 520px !important;   /* tweak 480–560px to taste */
    object-fit: cover !important;    /* restores the previous “filled” look */
    border-radius: 16px;
  }
}