/**
 * Homepage — responsive layer.
 *
 * Layering contract, same as the About page:
 *   index.html <style>  ->  base, mobile-first component styling.
 *   this file           ->  every width breakpoint, and nothing else.
 *
 * The two separate `max-width: 1024px` blocks that used to live inline are
 * merged here; they overlapped on .cv-services and had to be read together to
 * know what a tablet actually got.
 *
 * Breakpoint order is load-bearing: 1024 then 768 then 769, because 1024 and
 * 768 both apply below 768px and the later one is meant to win.
 */

/* ── Tablet and below ── */
@media (max-width: 1024px) {

  .cv-services,
  .cv-impact {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 110px;
  }

  .cv-services {
    padding-top: 110px;
  }

  .cv-logo-grid {
    max-width: min(560px, 100%);
    margin-inline: auto;
  }

  .cv-intro .cv-container {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .cv-intro .cv-copy {
    text-align: center;
    margin-inline: auto;
  }

  .cv-intro-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cv-services-copy p,
  .cv-impact-copy p {
    width: 100%;
  }
  .cv-services {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 22px;
  }

  .cv-services>.cv-container {
    display: contents !important;
  }

  .cv-services-copy,
  .cv-service-card:nth-child(1),
  .cv-service-card:nth-child(2),
  .cv-service-card:nth-child(3),
  .cv-service-card:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }

  .cv-service-card:nth-child(5) {
    grid-column: 1;
    grid-row: 4;
  }

  .cv-service-card {
    min-height: auto;
  }
}

/* ── Phone ── */
@media (max-width: 768px) {
  .cv-section {
    padding-left: 4%;
    padding-right: 4%;
  }

  .cv-hero {
    min-height: 760px;
    padding-top: 180px;
    padding-bottom: 140px;
  }

  /* 96vw inside the 4% section padding overflows and eats the side inset.
     The hero container only holds the pill row. */
  .cv-hero .cv-container {
    width: 100%;
  }

  .cv-hero-stack {
    width: 100%;
  }

  .cv-pill-word {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    container-type: inline-size;
    padding: 14px 20px;
    gap: 14px;
  }

  .cv-pill-word > span:not(.cv-pill-arrow) {
    white-space: nowrap;
    min-width: 0;
    /* 100cqi is the pill content box. 68px = 54px photo + 14px gap.
       Divisor is the word's width per 1px of Unbounded 800, plus a little spare
       so the longest label stays one line inside the padding. */
    font-size: clamp(20px, calc((100cqi - 68px) / 7.85), 58px);
  }

  html[lang="ro"] .cv-pill-word > span:not(.cv-pill-arrow) {
    font-size: clamp(20px, calc((100cqi - 68px) / 8.95), 58px);
  }

  .cv-pill-word img,
  .cv-pill-word .cv-pill-arrow {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    max-width: none;
    font-size: 22px;
    padding-left: 1px;
  }

  .cv-intro {
    padding-top: 60px;
    padding-bottom: 120px;
  }

  .cv-intro-cards {
    grid-template-columns: 1fr;
  }

  .cv-intro-card {
    min-height: auto;
    padding: 22px 20px;
    border-radius: 24px;
  }

  .cv-intro-card-icon {
    width: 68px;
    height: 68px;
  }

  .cv-intro-card-icon img {
    width: 42px;
    height: 42px;
  }

  .cv-btn {
    width: 100%;
    justify-content: center;
    padding: 18px 30px;
  }

  /* Section padding is 4% + 4%, but .cv-container stays 96vw.
     The goal card then overflows and sits flush on the right. */
  .cv-goal .cv-container {
    width: 100%;
  }

  .cv-goal-card {
    border-radius: 32px;
    margin-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .cv-service-card {
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 22px 20px;
  }

  .cv-service-card-icon {
    width: 76px;
    height: 76px;
  }

  .cv-service-card-icon img {
    width: 48px;
    height: 48px;
  }

  .cv-impact {
    gap: 42px;
    padding-top: 30px;
    padding-bottom: 90px;
  }

  .cv-logo-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .cv-logo-cell {
    min-height: 120px;
    border-right: 0;
    border-bottom: 1px solid var(--cv-border);
  }

  .cv-logo-cell:last-child {
    border-bottom: 0;
  }

  .cv-logo-cell img {
    max-height: 72px;
  }

  .cv-logo-cell img.cv-logo-upb {
    max-height: 80px;
  }

  .cv-title {
    font-size: clamp(32px, 10vw, 56px);
  }

  .cv-portfolio {
    padding: 0 4% 48px;
  }

  .cv-articles-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Tablet and up ── */
@media (min-width: 769px) {
  .cv-intro-card--center {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - 18px) / 2);
  }
}

/* Goal CTA matches one person card in the grid directly under it.
   Track math mirrors .cv-team-grid (3×380/gap 32, then 2×360/gap 24, then max 420). */
@media (min-width: 961px) {
  .cv-goal-card .cv-btn {
    width: calc((min(100%, 1200px) - 64px) / 3);
    max-width: 100%;
    justify-content: center;
  }
}

@media (max-width: 960px) {
  .cv-goal-card .cv-btn {
    width: min(360px, calc((min(100%, 780px) - 24px) / 2));
    max-width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .cv-goal-card .cv-btn {
    width: min(100%, 420px);
    max-width: 100%;
    justify-content: center;
  }
}