/* ============================================================
   O nama — page-specific styles
   Mobile-first; desktop layout at min-width 768px / 1024px.
   Reuses tokens & utilities from styles.css.
   ============================================================ */

/* Header on this page sits over a light background (no hero image)
   so it should use the foreground colour, not invert. */
.about-header { color: var(--color-fg); }

/* Push the page content below the absolutely positioned site header. */
.about-page { padding-top: 4rem; }

/* ---------- Page background bands ----------
   Sketch: this page's base is WHITE (intro + Suradnje + page chrome); only the
   team → vizija → interijer → recenzije block sits on the cream band
   (Rectangle 5864, y 1338–3878). The body bg is cream globally, so override it
   here and paint the cream band on those sections. The max-width sections use the
   box-shadow halo + vertical-crop clip-path so the cream reaches the viewport
   edges; .about-interior is already full-bleed so a plain background suffices
   (its old margin-bottom became padding so the cream stays continuous to the
   recenzije section — no white seam). */
.page-about { background: #fff; }
.about-team,
.about-vision,
.about-reviews {
  background: var(--color-bg);
  box-shadow: 0 0 0 100vmax var(--color-bg);
  clip-path: inset(-2px -100vmax); /* -2px (not 0) so stacked sections' halos overlap — a 0 inset crops at the box edge and exposes a 1px white page-bg seam between them */
}
.about-interior { background: var(--color-bg); }

/* ---------- Intro: Priča i Vizija ---------- */
.about-intro {
  padding: var(--space-7) var(--gutter) var(--space-9);
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  gap: var(--space-6);
  position: relative; /* anchor the cream-band tail (::after) behind the banner */
}

.about-intro__heading {
  /* Sketch: 130px, line-height 110 (0.846), kerning -13 (-0.1em) — matches .display.
     (Was clamped to 120px / -0.05em, undersizing it vs the design + reviews heading.) */
  font-size: clamp(3.75rem, 16vw, 8.125rem);
  line-height: 0.846;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  font-weight: 400;
}

.about-intro__copy {
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: 60ch;
}

.about-intro__cta { width: max-content; }

.about-intro__media,
.about-intro__banner {
  margin: 0;
  overflow: hidden;
}

.about-intro__media {
  aspect-ratio: 348 / 532;
}

.about-intro__media img,
.about-intro__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro__banner {
  margin: 0;
  aspect-ratio: 345 / 220;
}

@media (min-width: 1024px) {
  /* Desktop intro: heading L / copy R / portrait L-bottom / wide image R-bottom.
     Sketch coords (1440 artboard):
       heading 8/174 647x220, copy 613/174 807x610,
       portrait 138/655 335x512, wide 612/987 690x444 */
  .about-intro {
    /* Content frame aligns with the nav + the .section blocks: --pad (20px), NOT
       --gutter (32px). The heading then sits at x20 with no bleed hack. */
    padding-inline: var(--pad);
    /* Sketch: heading/copy start at y174 (page pad 64 + this). Was 64 → content
       sat 46px too high vs the design. */
    padding-block: calc(var(--space-8) + 46px) 56px;
    /* Sketch: left content (heading/portrait) ~572, right (copy/banner) ~808,
       20px gap → right column starts at x≈612 (matches copy 613 / banner 612). */
    grid-template-columns: minmax(0, 572fr) minmax(0, 808fr);
    grid-template-areas:
      "heading copy"
      "portrait cta"
      "portrait banner";
    column-gap: 20px;
    row-gap: var(--space-6);
    align-items: start;
  }
  /* Sketch: the cream band (Rectangle 5864) starts at y1338 — i.e. ~149px before
     the team section, behind the intro banner's lower portion. Paint that tail of
     cream full-bleed behind the intro content so the banner sits on cream (and it
     joins the team's cream seamlessly). */
  .about-intro::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 149px;
    background: var(--color-bg);
    box-shadow: 0 0 0 100vmax var(--color-bg);
    clip-path: inset(-2px -100vmax); /* -2px (not 0) so stacked sections' halos overlap — a 0 inset crops at the box edge and exposes a 1px white page-bg seam between them */
    z-index: -1;
  }
  .about-intro__heading { grid-area: heading; margin-left: -10px; }
  .about-intro__copy {
    grid-area: copy;
    align-self: start;
    /* Sketch: the intro copy is a large 42px statement (kerning -1.68 ≈ -0.04em),
       not 14px body. */
    font-size: clamp(1.75rem, 3vw, 2.625rem);
    line-height: normal; /* Sketch: no explicit line-height → Inter normal (~1.2) */
    letter-spacing: -0.04em;
    max-width: none;
    /* Sketch: a full blank line between the two paragraphs (16px was too tight). */
    gap: 3rem;
  }
  .about-intro__cta { grid-area: cta; align-self: start; }
  .about-intro__media {
    grid-area: portrait;
    aspect-ratio: 335 / 512;
    /* Sketch: portrait is a narrow 335px image (not the full column); height
       follows via aspect-ratio (→512). 23.26vw = 335 at 1440, capped there. */
    width: clamp(200px, 23.26vw, 335px);
    justify-self: start;
    /* Sketch: portrait indented to x≈138 (≈118px past the 20px frame), top y≈655.
       It overlaps the copy column in the design; the negative top margin pulls it
       up out of the grid flow to that y (tuned for the seeded intro copy @1440 —
       if the intro text length
       changes a lot, re-check this offset). */
    margin: -160px 0 0 clamp(0px, 8.2vw, 118px);
    max-height: none;
    align-self: start;
  }
  .about-intro__banner {
    grid-area: banner;
    /* Sketch: banner top at y≈987 — the design leaves a big gap below the copy
       before the banner. Push it down so the intro reaches the design height and
       the sections below land on their design y (tuned for the seeded copy @1440). */
    margin: 114px 0 0 0;
    /* Sketch: banner 690 wide (not the full ~796 column), left-aligned at x≈612. */
    width: clamp(400px, 47.9vw, 690px);
    justify-self: start;
    aspect-ratio: 690 / 444;
    align-self: start;
  }
}

/* ---------- Team: O našem timu ---------- */
.about-team {
  padding: var(--space-7) var(--pad);
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  gap: var(--space-5);
}

.about-team__bio {
  display: grid;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.3; /* Sketch: 18.2 / 14 (was 1.4 → bio drifted down) */
  letter-spacing: -0.02em;
  max-width: 65ch;
}

.about-team__edu {
  display: grid;
  gap: var(--space-2); /* Sketch: ~34px item pitch (was 38px) */
  margin-top: var(--space-4);
}

.about-team__edu .link-arrow { width: max-content; }

@media (min-width: 1024px) {
  .about-team {
    /* +19px bottom so the vision section below lands on its design y (the cream
       band stays continuous because it's padding, not margin). */
    padding-block: var(--space-8) calc(var(--space-8) + 19px);
    /* Sketch (frame x20): heading+bio indented to x139 (bio 453 wide → ends 592),
       education list at x849. Spacer tracks = the 119px indent and the 257px gap. */
    grid-template-columns: minmax(0, 119fr) minmax(0, 453fr) minmax(0, 257fr) minmax(0, 571fr);
    column-gap: 0;
    row-gap: var(--space-5);
    align-items: start;
  }
  /* Sketch: "O našem timu" is 42px (matches Suradnje); .heading-md alone = 24px. */
  .about-team__heading { grid-column: 2; grid-row: 1; font-size: clamp(1.75rem, 5vw, 2.625rem); }
  .about-team__bio { grid-column: 2; grid-row: 2; }
  .about-team__edu { grid-column: 4; grid-row: 2; align-self: start; margin-top: 0; }
}

/* ---------- Vision: Naša vizija ---------- */
.about-vision {
  padding-bottom: var(--space-8);
}

.about-vision__media {
  margin: 0 0 var(--space-7);
  aspect-ratio: 375 / 460;
  overflow: hidden;
}

.about-vision__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-vision__title {
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto var(--space-5);
  font-size: var(--fs-sm);
  line-height: 1.1; /* Sketch: 15.4 / 14 */
  letter-spacing: -0.02em;
  font-weight: 400;
}

.about-vision__list {
  padding: 0 var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  gap: 0;
}

.about-vision__item {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.about-vision__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

/* Sketch: dividers sit BETWEEN items — no line above the first one. */
.about-vision__item:first-child {
  border-top: none;
}

.about-vision__item-title {
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin: 0;
}

.about-vision__item-text {
  font-size: var(--fs-sm);
  line-height: 1.3; /* Sketch: 18.2 / 14 */
  letter-spacing: -0.02em;
  color: var(--color-fg);
  max-width: 60ch;
}

@media (min-width: 1024px) {
  /* Desktop vision: 2col — image L (453x558), title + list R.
     Sketch coords: image 139/1898 453x558, title 849/1898, items 849/1939+ */
  .about-vision {
    /* +36px bottom: +14 to land the interior, +22 to offset the tightened
       label→items gap above (so the interior stays on its design y). */
    padding: 0 var(--pad) calc(var(--space-9) + 36px);
    max-width: var(--max-width);
    margin-inline: auto;
    display: grid;
    /* Sketch (frame x20): media at x139 (453 wide), right content at x849 (453 wide).
       Spacer tracks = the 119px indent and the 257px gap between them. */
    grid-template-columns: minmax(0,119fr) minmax(0,453fr) minmax(0,257fr) minmax(0,453fr) minmax(0,118fr);
    column-gap: 0;
    align-items: start;
  }
  .about-vision__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: 453 / 558;
    width: 100%;
    margin: 0;
  }
  .about-vision__title {
    grid-column: 4;
    padding: 0;
    /* Sketch: label→first item gap is small (~26px), not 24+24. */
    margin: 0 0 2px;
    /* Sketch: "Naša vizija" is a small 14px label (not 24px). */
    font-size: var(--fs-sm);
  }
  .about-vision__list {
    grid-column: 4;
    padding: 0;
    margin: 0;
  }
  /* Sketch: each item stacks 24px title above 14px text (NOT two columns). */
  .about-vision__item {
    grid-template-columns: none;
    padding-block: var(--space-5);
  }
  .about-vision__item-title { font-size: 1.5rem; }
}

/* ---------- Interior image ---------- */
/* Edge-to-edge — Sketch has 1440x632 (desktop) / 375x508 (mobile) starting at x=0.
   The gap to the recenzije section is padding (not margin) so the cream band
   background painted on this section stays continuous through it. */
.about-interior {
  margin: 0;
  padding-bottom: var(--space-9);
}

.about-interior__media {
  margin: 0;
  aspect-ratio: 375 / 508;
  overflow: hidden;
}

.about-interior__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .about-interior__media {
    aspect-ratio: 1440 / 632;
  }
}

/* ---------- Reviews (page-scoped variant of homepage section) ---------- */
.about-reviews { }
.about-reviews > .display { margin-bottom: var(--space-7); }

.about-reviews__cta {
  margin-top: var(--space-6);
  width: max-content;
}

.about-reviews__featured {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.about-reviews__title {
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.about-reviews__stars {
  display: flex;
  gap: 0.25rem;
  font-size: 1rem;
  margin-bottom: var(--space-4);
}

.about-reviews__quote {
  color: var(--color-fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.3; /* Sketch: 18.2 / 14 */
  max-width: 60ch;
}

.about-reviews__list li {
  border-top: 1px solid var(--color-line);
}

.about-reviews__list li:last-child { border-bottom: 1px solid var(--color-line); }
/* Accordion summary/body styles live in styles.css (.reviews-accordion__*). */

/* ---------- Collaborations (Suradnje) ---------- */
.about-collabs {
  padding-top: var(--space-7);
  padding-bottom: 182px;
}

.about-collabs__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

/* "Suradnje" + "(16)" — Sketch: 42px Inter, -1.68 kerning (≈ -0.04em). */
.about-collabs__title,
.about-collabs__count {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-weight: 400;
}

.about-collabs__table-head {
  display: none;
}

.about-collabs__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.about-collabs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
  letter-spacing: -0.02em;
}

.about-collabs__name {
  min-width: 0;
}

a.about-collabs__name {
  color: inherit;
  text-decoration: none;
}

a.about-collabs__name:hover,
a.about-collabs__name:focus-visible {
  text-decoration: underline;
}

.about-collabs__year {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .about-collabs__table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
  }
  .about-collabs__table-head span:first-child {
    font-size: var(--fs-sm);
    letter-spacing: -0.02em;
  }
  .about-collabs__table-head span:last-child {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--color-fg-muted);
  }
  .about-collabs__list { border-top: 0; }
  /* Sketch: rows are a dense 54px pitch (was 67px → table ran 281px too tall,
     pushing the booking section down). */
  .about-collabs__row {
    padding-block: 17px;
  }
}

/* ---------- Reviews 2col on desktop ---------- */
/* Sketch: heading L (20/3348, 572×330 — 130px Inter, 110 line-height, -13 kerning),
   accordion R (848/3348, 572 wide — starts at the SAME y as the heading),
   CTA L-bottom (31/3698 — sits below the heading, left column).
   Columns ≈ 572 : 256 gap : 572 → 1fr / 16rem / 1fr. */
@media (min-width: 1024px) {
  .about-reviews {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 18vw, 16rem);
    align-items: start;
  }
  .about-reviews > .display {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(3.75rem, 10vw, 8.125rem);
    line-height: 0.846;
    letter-spacing: -0.1em;
    align-self: start;
  }
  .about-reviews__featured {
    grid-column: 2;
    grid-row: 1;
    border-top: 0;
    padding-top: 0;
  }
  /* Span both rows so the right column stays continuous while the CTA sits directly
     under the heading in col 1 (not pushed below this tall list). */
  .about-reviews__list {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }
  /* legacy static page: a standalone featured block precedes the list → stack them */
  .about-reviews__featured ~ .about-reviews__list { grid-row: 2; }
  .about-reviews__cta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: var(--space-5);
  }
}

/* ---------- Booking on this page is BLACK ---------- */
/* Sketch: Rectangle 5862 (desktop) / 5915 (mobile) fill #000000 — full-bleed.
   Other pages keep the shared --color-banner via styles.css. */
.about-page .booking {
  background: #000;
  color: #fff;
  /* Locomotive can leave a 1px sub-pixel seam between this black section and the
     dark footer during smooth scroll, exposing the white page bg. A black skirt
     below the section paints over any such gap. */
  box-shadow: 0 2px 0 0 #000;
}
.about-page .booking__heading { color: #fff; }
.about-page .booking__cta {
  background: #fff;
  border-color: #fff;
  color: #000;
}

/* Desktop booking on this page: image LEFT, text RIGHT (Sketch flips homepage layout).
   Sketch: image 138/4631 453x680, heading 730/4875, CTA 730/5001. */
@media (min-width: 1024px) {
  /* Pulling the image up (margin-top -180) shrinks the grid by ~24px because it
     spans both rows; add it back so the black section keeps its Sketch 713px
     height (image bottom then sits ~117px above the section bottom). */
  .about-page .booking { padding-bottom: calc(var(--space-9) + 24px); }
  .about-page .booking__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    /* Sketch: image 453 wide @x138, heading @x730 (138px gap after the image). */
    grid-template-columns: minmax(0, 453fr) minmax(0, 571fr);
    column-gap: 138px;
    /* Heading row sizes to content; the 1fr row absorbs the tall image's extra
       height so the button stays close to the heading (was 157px apart). */
    grid-template-rows: auto 1fr;
    row-gap: 2rem; /* Sketch: ~30px between heading and the button */
    align-items: start;
  }
  .about-page .booking__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    /* Sketch: image y=4631, black bg y=4715 → 84px overhang above the section.
       Section top padding is ~96px, so margin-top must be -(96+84)=-180px (the
       shared -160px only lifted it 65px above the black). */
    margin-top: -11.25rem; /* -180px */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    aspect-ratio: 453 / 680;
    order: 0;
  }
  .about-page .booking__heading { grid-column: 2; grid-row: 1; align-self: start; }
  .about-page .booking__cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }
}