/* ============================================================
   pages.css — home + about layout
   ============================================================ */

/* --- Page stack ----------------------------------------------- */
/* Every page is a column of "cards" (hero, then one or more
   content panels) on the shared sunken page background, each
   8px apart — replaces the old hero-band-bleeds-behind-the-work-
   section layering trick with plain stacked boxes.               */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Hero card -------------------------------------------------- */
/* The coloured box itself. .hero (home) / .about__intro (about)
   handle the flex layout of what's inside it.                    */
.hero-card {
  border-radius: var(--radius-16);
  padding-block: 72px;
  overflow: clip;
}
.hero-card--home  { background: var(--brand-50); }
.hero-card--about {
  background: var(--hero-lavender);
  border-radius: var(--radius-24);
}

@media (max-width: 767px) {
  .hero-card--home { padding-block: 40px; }
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 526px;
}

.hero__lines { display: flex; flex-direction: column; gap: 12px; }

.hero__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1023px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero__media { align-self: center; padding-block: 24px; }
}

/* --- About -------------------------------------------------- */
.about {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.about__intro-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.about__intro-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 484px; }

.about__section { display: flex; flex-direction: column; gap: 16px; }
.about__section p { max-width: 75ch; }

@media (max-width: 1023px) {
  .about__intro { flex-direction: column; }
  .about__intro-text { max-width: none; }
  .about__portrait { align-self: center; }
}

/* --- CV list ------------------------------------------------- */
.cv { display: flex; flex-direction: column; gap: 16px; }

.cv__item {
  display: flex;
  gap: 24px;
  padding: 24px 32px 24px 24px;
  border-radius: var(--radius-8);
}
.cv__item--row1 { background: var(--cv-row-1); }
.cv__item--row2 { background: var(--cv-row-2); }
.cv__item--row3 { background: var(--cv-row-3); }

.cv__head { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }

.cv__role {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 38px;
  font-weight: 700;
  color: var(--gray-900);
}

.cv__label {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  background: var(--cv-label-bg);
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 8px;
  font-weight: 600;
  color: var(--card-meta);
  white-space: nowrap;
}

.cv__duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--card-meta);
}
.cv__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--card-meta); flex-shrink: 0; }

.cv__description { flex: 1 1 auto; min-width: 0; color: var(--gray-800); }

@media (max-width: 767px) {
  .cv__item { flex-direction: column; gap: 24px; }
  .cv__head { width: auto; }
  .cv__role { font-size: 20px; line-height: 32px; flex-wrap: wrap; }
}

/* --- Photo grid ---------------------------------------------- */
/* Figma treats each slot as a fixed-size frame with "clip
   content" on: the photo is cropped to fill its slot, the slot
   size never bends to fit the photo. Track sizes below are the
   exact Figma numbers per breakpoint; object-fit:cover on the
   img does the actual cropping.                                 */
.photo-grid {
  display: grid;
  gap: 16px;
  overflow: hidden;
}

.photo-grid__item { margin: 0; border-radius: var(--radius-12); overflow: hidden; }

.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-12);
}

/* Desktop: 3 columns × 2 rows. Trouwfoto spans both rows. */
.photo-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 312px);
  grid-template-areas: "a b c" "d b e";
  height: 640px;
}
.photo-grid__item:nth-child(1) { grid-area: a; } /* Miauwmiauws */
.photo-grid__item:nth-child(2) { grid-area: b; } /* Trouwfoto   */
.photo-grid__item:nth-child(3) { grid-area: c; } /* Moose       */
.photo-grid__item:nth-child(4) { grid-area: d; } /* Meme        */
.photo-grid__item:nth-child(5) { grid-area: e; } /* Bass        */

/* Tablet: 2 columns × 3 rows. Trouwfoto spans the top two rows. */
@media (max-width: 1023px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 312px);
    grid-template-areas: "a b" "c b" "d e";
    height: 968px;
  }
}

/* Mobile: single column, each photo keeps its own ratio —
   no clipping needed since there's no row to align against. */
@media (max-width: 767px) {
  .photo-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    height: auto;
    overflow: visible;
  }
  .photo-grid__item:nth-child(1) { grid-area: auto; aspect-ratio: 329 / 312; }
  .photo-grid__item:nth-child(2) { grid-area: auto; aspect-ratio: 329 / 640; }
  .photo-grid__item:nth-child(3) { grid-area: auto; aspect-ratio: 329 / 312; }
  .photo-grid__item:nth-child(4) { grid-area: auto; aspect-ratio: 329 / 312; }
  .photo-grid__item:nth-child(5) { grid-area: auto; aspect-ratio: 1 / 1; }
}

/* --- Closing block ------------------------------------------- */
.closing { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.closing h3 { font-style: italic; }
.closing p { max-width: 75ch; }