/*
 * Home — "Nuestra filosofía" section. Tokens from Figma node 1:327.
 * Desktop: split layout — 2×2 photo grid (left) + eyebrow/headline/subcopy
 * (right). Mobile: copy stacks above the photo grid.
 */
:root {
  --weilo-fl-bg:           #FAF6EE;     /* brand/cream */
  --weilo-fl-text:         #1A1714;     /* neutro/negro */
  --weilo-fl-text-grey:    #736E66;     /* neutro/gris */
  --weilo-fl-card-w:       380px;
  --weilo-fl-card-h:       338px;
}

.weilo-filosofia {
  background: var(--weilo-fl-bg);
  color: var(--weilo-fl-text);
  /* Full-bleed inside Astra/UAGB containers. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* Desktop only — small breathing room from the previous section. */
@media (min-width: 1200px) {
  .weilo-filosofia { margin-top: 40px !important; }
}
.weilo-filosofia, .weilo-filosofia * { box-sizing: border-box; }

.weilo-filosofia__inner {
  max-width: 1512px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, calc(2 * var(--weilo-fl-card-w))) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

/* ============================================================
   Photo grid (left column on desktop)
   ============================================================ */
.weilo-filosofia__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, var(--weilo-fl-card-h));
  gap: 0;
}
.weilo-filosofia__card {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.weilo-filosofia__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Copy (right column on desktop)
   ============================================================ */
.weilo-filosofia__copy {
  padding: 80px 64px 80px 80px;
  align-self: center;
  max-width: 600px;
}
.weilo-filosofia__eyebrow {
  margin: 0 0 24px;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.1em;     /* ≈ 10/16em from Figma */
  text-transform: uppercase;
  color: var(--weilo-fl-text-grey);
}
.weilo-filosofia .weilo-filosofia__title {
  margin: 0;                                      /* defeat .woocommerce-js h2 { margin-bottom: .7em } */
  font-family: "PP Nikkei Journal", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  /* Fluid font: scales with viewport so the longest unbreakable word
     ("COMPLICADO." → ≈ 6× font-size) fits inside the right copy column,
     which is roughly viewport − 760px (the photo grid) − padding. line-
     height kept as a ratio so it follows the font size.
       1249  → 50px   (just fits the narrow desktop column)
       1366  → 55px
       1512+ → 60px
       2050+ → clamped at 82px (Figma spec) */
  font-size: clamp(48px, 4vw, 82px);
  line-height: 0.85;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--weilo-fl-text);
  /* The display weight is so tight (lh < font-size) that word-breaks across
     multiple lines are expected. Don't let the browser hyphenate to "fix"
     it — keep every word intact like the Figma render. */
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
.weilo-filosofia__title span { display: block; }
.weilo-filosofia__subtitle {
  margin: 32px 0 0;
  max-width: 481px;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--weilo-fl-text-grey);
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) and (min-width: 769px) {
  .weilo-filosofia__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
  .weilo-filosofia__grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .weilo-filosofia__card { aspect-ratio: 380/338; }
  .weilo-filosofia__copy { padding: 56px 40px; }
  .weilo-filosofia__title    { font-size: 60px; line-height: 56px; }
  .weilo-filosofia__subtitle { font-size: 20px; line-height: 28px; }
}

/* ---------- Mobile — copy on top, grid below ---------- */
@media (max-width: 768px) {
  /* Defensive: clip any rare child overflow rather than producing a
     stray white sliver next to the section. */
  .weilo-filosofia { overflow-x: hidden; }
  .weilo-filosofia__inner {
    /* `minmax(0, 1fr)` forces the column min to 0, otherwise the card's
       aspect-ratio + IMG intrinsics propagate up and the single 1fr
       column resolves to ~562px on a 430px viewport. */
    grid-template-columns: minmax(0, 1fr);
  }
  .weilo-filosofia__copy {
    order: 1;
    padding: 56px 20px 32px;
    max-width: none;
    text-align: center;
  }
  .weilo-filosofia__eyebrow { margin-bottom: 16px; font-size: 14px; }
  .weilo-filosofia__title {
    font-size: clamp(40px, 11vw, 60px);
    line-height: 0.95;
  }
  .weilo-filosofia__subtitle {
    margin-top: 20px;
    font-size: 18px;
    line-height: 26px;
    max-width: none;
  }
  .weilo-filosofia__grid {
    order: 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    min-width: 0;
  }
  .weilo-filosofia__card {
    aspect-ratio: 380/338;
    /* Force the card to fit its 1fr column; without an explicit width
       the IMG's intrinsic 380×338 (from its HTML width/height attrs)
       leaks up through the aspect-ratio and inflates the grid track
       to ~562px, overflowing the viewport. */
    width: 100%;
    min-width: 0;
  }

  .weilo-filosofia .weilo-filosofia__title {
    font-size: 60px
  }
}