/* ============================================================
   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(0 -100vmax);
}
.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);
}

.about-intro__heading {
  font-size: clamp(3.75rem, 16vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  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 {
    padding-block: var(--space-8) var(--space-9);
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "heading copy"
      "portrait cta"
      "portrait banner";
    column-gap: var(--space-7);
    row-gap: var(--space-6);
    align-items: start;
  }
  .about-intro__heading { grid-area: heading; }
  .about-intro__copy { grid-area: copy; align-self: start; }
  .about-intro__cta { grid-area: cta; align-self: start; }
  .about-intro__media {
    grid-area: portrait;
    aspect-ratio: 335 / 512;
    margin: 0;
    max-height: none;
    align-self: start;
  }
  .about-intro__banner {
    grid-area: banner;
    margin: 0;
    aspect-ratio: 690 / 444;
    align-self: start;
  }
}

/* ---------- Team: O našem timu ---------- */
.about-team {
  padding: var(--space-7) var(--gutter);
  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.4;
  letter-spacing: -0.02em;
  max-width: 65ch;
}

.about-team__edu {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

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

@media (min-width: 1024px) {
  .about-team {
    padding-block: var(--space-8);
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }
  .about-team__heading { grid-column: 1 / -1; }
  .about-team__bio { grid-column: 1; }
  .about-team__edu { grid-column: 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);
  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);
}

.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.4;
  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 {
    padding: 0 var(--gutter) var(--space-9);
    max-width: var(--max-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--space-7);
    align-items: start;
  }
  .about-vision__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 453 / 558;
    margin: 0;
    max-width: 100%;
  }
  .about-vision__title {
    grid-column: 2;
    padding: 0;
    margin: 0 0 var(--space-5);
    font-size: var(--fs-md);
  }
  .about-vision__list {
    grid-column: 2;
    padding: 0;
    margin: 0;
  }
  .about-vision__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--space-6);
    align-items: start;
    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 { border-top: 1px solid var(--color-line); }
.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.4;
  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);
}

.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;
}

.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; }
  .about-collabs__row {
    padding-block: var(--space-5);
  }
}

/* ---------- 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) {
  .about-page .booking__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }
  .about-page .booking__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    /* keep shared margin-top (negative — protrudes above section per Sketch
       which has image y=4631 and bg rect y=4715, ~84px overlap) */
    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;
  }
}