/* ==========================================================================
   Home page (index.html)
   Page-specific styles only. Use .home-* class names; shared components
   live in css/style.css and must not be redefined here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Illustration palette
   Inline SVG illustrations (audience cards, pillars) paint with these
   classes so every colour comes from the design tokens.
   -------------------------------------------------------------------------- */

.home-c-plum { fill: var(--plum-900); }
.home-c-violet { fill: var(--violet); }
.home-c-lav { fill: var(--lavender); }
.home-c-lime { fill: var(--lime); }
.home-c-pink { fill: var(--pink); }
.home-c-white { fill: var(--white); }
.home-c-line { fill: var(--line); }

/* Stroke-only shapes */
.home-s-plum,
.home-s-violet,
.home-s-white,
.home-s-lav {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-s-plum { stroke: var(--plum-900); }
.home-s-violet { stroke: var(--violet); }
.home-s-white { stroke: var(--white); }
.home-s-lav { stroke: var(--lavender); }

/* Outline added to a filled shape (also rounds polygon corners) */
.home-o-plum,
.home-o-violet,
.home-o-white,
.home-o-lime,
.home-o-lav {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-o-plum { stroke: var(--plum-900); }
.home-o-violet { stroke: var(--violet); }
.home-o-white { stroke: var(--white); }
.home-o-lime { stroke: var(--lime); }
.home-o-lav { stroke: var(--lavender); }

.home-op-20 { opacity: 0.2; }
.home-op-30 { opacity: 0.3; }
.home-op-60 { opacity: 0.6; }


/* --------------------------------------------------------------------------
   01. Hero
   -------------------------------------------------------------------------- */

/* Spanish headline is longer: size it so "La monetización" holds one line
   instead of stranding "La" (i18n.js sets <html lang>). */
html[lang='es'] .home-hero-title {
  font-size: clamp(44px, 5.4vw, 78px);
}

@media (max-width: 374px) {
  html[lang='es'] .home-hero-title { font-size: 11vw; }
}

/* Photo (img/v2/hero-home.jpg): the phone sits right of centre and the sleeve
   leaves bottom-right, so the chips live in the clean lavender on the left:
   one top-left, two stacked bottom-left. */
.home-hero-visual {
  background: var(--lavender);
}

.home-hero-visual .float-chip.home-chip-confirm {
  bottom: calc(8% + 64px);
  left: 5%;
  animation-delay: -3s;
}

@media (max-width: 600px) {
  .home-hero-visual .float-chip.home-chip-confirm {
    bottom: calc(8% + 50px);
  }
}


/* --------------------------------------------------------------------------
   02. Trusted by
   -------------------------------------------------------------------------- */

.home-trusted-inner {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}

.home-trusted-title {
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Portrait / stacked marks (Kolbi, Etisalat) read a size smaller than the
   wordmarks beside them at the same height. Draw them taller, and pull the
   extra height back with negative margins so the strip's row height stays
   the same (the track's 8px block padding absorbs the overflow). */
.home-trusted-marquee .logo-item--tall {
  height: 44px;
  margin-block: -4px;
}

@media (max-width: 640px) {
  .home-trusted-marquee .logo-item--tall {
    height: 34px;
    margin-block: -3px;
  }
}

@media (max-width: 900px) {
  .home-trusted-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
  }

  /* Title + pause control share the first row; the strip runs below */
  .home-trusted-marquee {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Let the strip run edge to edge on small screens */
  .home-trusted-marquee {
    margin-inline: calc(var(--gutter) * -1);
  }
}


/* --------------------------------------------------------------------------
   03. Who we work with
   -------------------------------------------------------------------------- */

.home-aud-card .card-media svg {
  display: block;
}

/* Spanish titles are longer ("Proveedores de Contenido" wraps). In the 4-up
   row, reserve two lines so all descriptions start level; one-line titles
   sit on the lower line. English titles fit on one line, so this rule does
   not apply to them. */
@media (min-width: 1025px) {
  html[lang='es'] .home-aud-card .card-title {
    display: flex;
    align-items: flex-end;
    min-height: 2.5em;
  }
}

/* Heading: "One monetization engine." takes its own line, except on phones
   (where it would strand "engine.") and in Spanish (whose longer line does
   not fit the split column). */
.home-aud-title-2 {
  display: block;
}

@media (max-width: 480px) {
  .home-aud-title-2 {
    display: inline;
  }
}

html[lang='es'] .home-aud-title-2 {
  display: inline;
}

/* Smallest phones: "monetization engine." (no-break) needs ~333px at 34px */
@media (max-width: 364px) {
  #audiences h2 { font-size: 29px; }
}

/* In the 2 × 2 layout, swap the bottom row so the two accent cards
   (lime, plum) sit diagonally instead of stacked. */
@media (min-width: 641px) and (max-width: 1024px) {
  .home-aud-grid > :nth-child(3) {
    order: 1;
  }
}


/* --------------------------------------------------------------------------
   04. What we do — bento: one tall plum card + two white cards
   -------------------------------------------------------------------------- */

.home-wwd {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--grid-gap);
}

.home-pillar--main {
  grid-row: span 2;
}

.home-pillar-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

/* 02/03 photos: large enough to read, still smaller than the 01 hero card */
.home-pillar-art {
  width: min(100%, 280px);
  aspect-ratio: 4 / 3;
}

.home-pillar-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-media);
}

.home-pillar--main .home-pillar-top {
  flex: 1 1 auto;
  align-items: center;
  margin-bottom: 32px;
}

.home-pillar--main .home-pillar-art {
  width: min(100%, 520px);
}

.home-pillar--main .home-pillar-num {
  align-self: flex-start;
}

.home-pillar--main .card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h-sm);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.home-pillar-num {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home-pillar .card-text {
  max-width: 46ch;
}

.home-pillar-foot {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  margin-top: auto;
  padding-top: 28px;
}

/* Keyword line sits on a hairline, like a stat */
.home-pillar-foot::before {
  content: '';
  align-self: stretch;
  height: 1px;
  margin-bottom: 18px;
  background: var(--hairline);
}

.home-pillar-key {
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(30px, 2.8vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}

.home-pillar--main .home-pillar-key {
  color: var(--hl);
  font-size: clamp(56px, 6.4vw, 92px);
  letter-spacing: -0.035em;
}

.home-pillar-caption {
  color: var(--fg-muted);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1.4;
}

.home-pillar--main .home-pillar-caption {
  color: var(--fg);
  font-size: 16px;
  font-weight: 600;
}

/* Tablet: plum card spans the row, its art beside the copy */
@media (max-width: 1024px) {
  .home-wwd {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-pillar--main {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
  }

  /* Stretch the art column so the 01 badge sits in the card's top-right
     corner like 02/03; the art itself stays vertically centred. */
  .home-pillar--main .home-pillar-top {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin-bottom: 0;
  }

  .home-pillar--main .card-title,
  .home-pillar--main .card-text,
  .home-pillar--main .home-pillar-foot {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .home-wwd {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-pillar--main {
    display: flex;
  }

  /* Stretch (not centre) so the photo's % width resolves before it loads */
  .home-pillar--main .home-pillar-top {
    align-self: stretch;
    margin-bottom: 28px;
  }

  .home-pillar-art {
    width: min(100%, 260px);
  }
}


/* --------------------------------------------------------------------------
   05. Numbers that matter
   -------------------------------------------------------------------------- */

.home-stats {
  padding: clamp(28px, 5vw, 64px);
}

.home-stats-head {
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}

@media (max-width: 900px) {
  .home-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 20px;
  }
}

@media (max-width: 480px) {
  .home-stats-grid {
    gap: 28px 16px;
  }

  .home-stats .stat-num {
    font-size: 40px;
  }
}


/* --------------------------------------------------------------------------
   06. Why Opratel
   -------------------------------------------------------------------------- */

.home-why-card {
  padding: clamp(28px, 4vw, 48px);
}

.home-why-label {
  margin-bottom: 32px;
}

/* "Opratel." — the wordmark's dot, in lime */
.home-why-label--brand::after {
  content: '.';
  color: var(--lime);
}

.home-why-list {
  gap: 20px;
}

.home-why-list li {
  font-size: 18px;
  line-height: 1.45;
}

.home-why-card:first-child .home-why-label {
  color: var(--muted-2);
}

/* Badge rides the plum card's inner edge: centred in the gap between the
   two cards side by side, and on the top edge once they stack. */
.home-why-vs {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 6px solid var(--bone);
  border-radius: 50%;
  background: var(--lime);
  color: var(--plum-900);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transform: translate(-50%, -50%);
}

.home-why-punch {
  margin-top: clamp(56px, 7vw, 96px);
}

/* Highlight always takes its own line, shrink-wrapped to the words */
.home-why-punch .hl-marker {
  display: table;
  margin-top: 0.04em;
}

@media (max-width: 768px) {
  .home-why-vs {
    top: 0;
    left: 50%;
  }
}

@media (max-width: 480px) {
  .home-why-list li {
    font-size: 17px;
  }

  .home-why-vs {
    width: 60px;
    height: 60px;
    font-size: 17px;
  }
}


/* --------------------------------------------------------------------------
   07. Our products
   -------------------------------------------------------------------------- */

/* Phones: crop the square renders to 4:3 so three cards don't run on */
@media (max-width: 640px) {
  .home-products-grid .card-media.ar-1 {
    aspect-ratio: 4 / 3;
  }
}

/* Tablet (one column): image beside the copy instead of a full-width
   square, so three cards don't run to ~2,700px. */
@media (min-width: 641px) and (max-width: 900px) {
  .home-products-grid > .card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 28px;
    align-content: start;
  }

  .home-products-grid .card-media {
    grid-row: 1 / -1;
    margin-bottom: 0;
    align-self: start;
  }

  /* In grid, align-self only aligns vertically; keep the pill shrink-wrapped */
  .home-products-grid .card-tag {
    justify-self: start;
  }
}


/* --------------------------------------------------------------------------
   08. CTA band
   -------------------------------------------------------------------------- */

.home-cta h2 {
  max-width: 20ch;
}

.home-cta h2 .hl {
  display: block;
}