/* Home page only (loaded on the front page). */

/* ── Hero ── */
.home .intro__lead { color: var(--color-text); }

/* ── Qualifications (short list): centred heading, items in one row when there is room ──
   Two columns (2 x 2 with four items) on phones, one single row from 48rem (long names wrap onto several
   lines inside their column). With more than five items the row becomes three columns. Every item
   spans two shared rows (name, institution), so names and institutions line up across the row. */
.page .section.quals--compact { padding-block: calc(var(--space-6) / 2); }
.quals--compact .section-heading { margin-bottom: var(--space-5); text-align: center; }
.quals--compact .section-heading__sub { max-width: var(--container-text); margin-inline: auto; }
.quals--compact .quals__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0 var(--space-5); max-width: none; font-size: var(--text-sm); }
.quals--compact .quals__list li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; justify-items: center; margin: 0; padding-bottom: var(--space-4); text-align: center; }
.quals--compact .quals__title,
.quals--compact .quals__meta { display: block; overflow-wrap: break-word; hyphens: auto; }
.quals--compact .quals__logo-wrap { grid-row: 1; align-self: end; margin-bottom: var(--space-3); }
.quals--compact .quals__title { grid-row: 2; margin-bottom: var(--space-1); text-wrap: balance; }
.quals--compact .quals__meta { grid-row: 3; }
.quals--compact .quals__more { margin: var(--space-2) 0 0; text-align: center; }
@media (min-width: 36rem) {
  .quals--compact .quals__list { gap: 0 var(--space-6); font-size: var(--text-md); }
}
@media (min-width: 48rem) {
  .page .section.quals--compact { padding-block: calc(var(--space-7) / 2); }
  .quals--compact .quals__list { grid-template-columns: none; grid-template-rows: auto auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .quals--compact .quals__list:has(li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
}
@media (min-width: 64rem) {
  .quals--compact .quals__list { column-gap: var(--space-7); }
}

/* ── Goals: up to six cards (one column on phones, two from 36rem, three from 64rem, so six fill two even rows).
   Grid items stretch, so every card in a row has the same height. ── */
.home-problem__list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.home-problem__item { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.home-problem__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.home-problem__text { margin: 0; color: var(--color-text-muted); }
/* A card with a link: the title link covers the whole card, so the card is one click target with one accessible name. */
.home-problem__item--link { position: relative; }
.home-problem__link { color: inherit; text-decoration: none; }
.home-problem__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.home-problem__item--link:hover .home-problem__link { color: var(--color-primary); }
.home-problem__item--link:has(.home-problem__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.home-problem__link:focus-visible { outline: none; }
@media (min-width: 36rem) {
  .home-problem__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .home-problem__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Exactly four: one row of four instead of three and one left over. */
  .home-problem__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Approach: what she does. Photo left, text right (photo on top on phones); the building blocks are names only,
   each with a small gold ring as marker. ── */
.home-approach { display: grid; gap: var(--space-6); align-items: center; }
.home-approach__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-lg); --media-radius: var(--radius-lg); }
.home-approach__media .media,
.home-approach__media img { width: 100%; height: 100%; object-fit: cover; }
.home-approach__label { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.home-approach .section-heading { margin-bottom: var(--space-3); }
.home-approach__text { max-width: 40rem; margin: 0 0 var(--space-5); font-size: var(--text-lg); }
.home-approach__list { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.home-approach__list li { display: flex; align-items: baseline; gap: var(--space-3); }
.home-approach__list li::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border: 2px solid var(--color-gold); border-radius: 50%; }
.home-approach__more { margin: 0; }
@media (min-width: 48rem) {
  .home-approach { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .home-approach--text { grid-template-columns: minmax(0, 1fr); }
}

/* ── Process: three to five numbered panels. A round numeral sits on each panel, like a stepping stone;
   stacked on phones, one even row from 48rem. ── */
.home-process__more { margin: var(--space-5) 0 0; }

/* ── About me: round photo left, text and button right ── */
.home-about { display: grid; gap: var(--space-5); align-items: center; }
/* The portrait is a circle inside a thin gold ring; the padding leaves a small ground-coloured gap between ring and photo. */
.home-about__media { box-sizing: border-box; width: min(16rem, 70%); aspect-ratio: 1; padding: var(--space-2); border: 2px solid var(--color-gold); border-radius: 50%; }
.home-about__media .media { width: 100%; height: 100%; }
.home-about__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.home-about .section-heading { margin-bottom: var(--space-3); }
.home-about__text { max-width: 40rem; margin: 0 0 var(--space-5); font-size: var(--text-lg); }
.home-about__action { margin: 0; }
@media (min-width: 48rem) {
  .home-about { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-7); }
  .home-about__media { width: min(100%, 16rem); }
}

/* ── Blog: three newest posts ── */
.home-blog .card-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .home-blog .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .home-blog .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* one or two posts keep a column's width, they never stretch */
.home-blog__more { margin: var(--space-5) 0 0; }


/* ── Motion for the Home panels: they lift on hover, and when their band comes into view they rise one after
   the other. Movement only: the panels are never hidden (the band reveal in layout.css and reveal.js sets
   data-reveal; with reduced motion nothing is set and base.css shortens every transition). `translate` carries
   the rise, `transform` the hover, so the two never fight. ── */
.home-problem__item,
.home-blog .card { transition: translate var(--transition-slow) calc(var(--i, 0) * 90ms), transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.home-problem__item:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-menu); }
.band[data-reveal="pending"] :is(.home-problem__item, .home-blog .card) { translate: 0 1.25rem; }
.home-problem__list > :nth-child(2), .home-blog .card-grid > :nth-child(2) { --i: 1; }
.home-problem__list > :nth-child(3), .home-blog .card-grid > :nth-child(3) { --i: 2; }
.home-problem__list > :nth-child(4) { --i: 3; }
.home-problem__list > :nth-child(5) { --i: 4; }
.home-problem__list > :nth-child(6) { --i: 5; }

/* ── Call strip: one slim line between the process and the quote band ── */
.callstrip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); }
.callstrip__text { margin: 0; }
.callstrip__phone { color: var(--color-text); font-size: var(--text-lg); font-weight: 500; text-decoration: none; }
.callstrip__phone:hover { color: var(--color-primary); }
@media (max-width: 35.99rem) {
  .callstrip__inner { flex-direction: column; gap: var(--space-2); padding-block: var(--space-5); }
  .callstrip .button { align-self: stretch; }
}

/* About me without a photo: text only, one column, no empty space where the photo would be. */
.home-about--text { grid-template-columns: minmax(0, 1fr); }