/* ==========================================================================
   Home page — src/index.njk
   Source: design/reference/01-home-desktop-1440.html (≥ 900px) and
   02-home-mobile-390.html (< 900px). Builds on site.css (grid, .section-head,
   .row, .kv, .facts, .data-table, .cards, .note, .box, .pull); only the
   page-specific layout lives here.
   ========================================================================== */

/* Running text on this page is never below 17px (site rule: audience 40+). */
.q-card p,
.abroad-cols .card p { font-size: var(--fs-body); line-height: 1.7; }

/* Paper sections that follow each other get a hairline between them. */
.nowrap { white-space: nowrap; }
.section:not(.section--alt) + .section:not(.section--alt) { border-top: 1px solid var(--rule); }

/* ---------- Hero ---------- */
/* The studio portrait is cut at the chest; it stands on the hero's bottom rule
   (desktop: cols 9–12; mobile: full width under the buttons). */
.hero { padding-top: clamp(40px, 1.25rem + 4.8vw, 96px); border-bottom: 1px solid var(--rule); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--col-gap); }
.hero__title {
  margin-top: clamp(18px, 0.8rem + 0.7vw, 26px);
  font-size: clamp(2.3125rem, 1.75rem + 1.75vw, 3.25rem);   /* 37 → 52, as in the artboards */
  line-height: 1.1;
  max-width: 14em;
  text-wrap: balance;
}
.hero__lead { margin-top: clamp(22px, 1rem + 0.6vw, 30px); max-width: 38rem; }
.hero__ctas { margin-top: clamp(28px, 1.3rem + 0.8vw, 38px); }
.hero__note { margin-top: 20px; max-width: 38rem; color: var(--muted); line-height: 1.6; }
.hero__portrait { margin-top: 36px; }

@media (max-width: 899px) {
  .hero__portrait img { aspect-ratio: 1 / 1; object-position: 50% 0; }
}
@media (max-width: 599px) {
  /* bleeds to both edges, as in the mobile artboard */
  .hero__portrait { margin-inline: calc(-1 * var(--gutter)); }
  .hero__ctas > .btn-line { min-height: 56px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero__portrait { width: min(100%, 440px); }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .hero__text { grid-column: 1 / span 7; align-self: start; padding-bottom: var(--section-y); }
  .hero__portrait { grid-column: 9 / span 4; margin-top: 0; }
}

/* ---------- 01 — Ce fac ---------- */
/* Mobile: number and title share a baseline, the list runs underneath. */
@media (max-width: 899px) {
  .area { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; align-items: baseline; }
  .area > .row__num, .area > .row__title { margin: 0; }
  .area > .row__body { grid-column: 1 / -1; margin-top: 18px; }
}
/* Desktop: the artboard's measure — title cols 2–4, list cols 6–12 */
@media (min-width: 900px) {
  .area > .row__title { grid-column: 2 / span 3; }
  .area > .row__body { grid-column: 6 / span 7; }
}
/* Drept penal: the confirmed line (police, prosecutor) is its own list, the gated details follow it */
.area .kv + .kv, .area .kv + .gate { margin-top: 16px; }

/* ---------- 02 — Întrebări ---------- */
.q-card { position: relative; }
.q-card__draft { margin-bottom: -4px; }
.q-card h3 { transition: color 0.15s ease; }
.q-card:hover h3 { color: var(--accent); }
/* the whole card is the tap target; the visible link text stays the accessible name */
.q-card .link-arrow::before { content: ""; position: absolute; inset: 0; }
.q-card .link-arrow { align-self: flex-start; padding-block: 12px; margin-block: -12px; }   /* the link itself is 44px tall too */
.q-cards > .card:last-child { border-bottom: 1px solid var(--rule-on-surface); }
@media (min-width: 900px) {
  .q-cards > .card:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule-on-surface); }
}

/* ---------- 03 — Onorarii / Costuri ---------- */
.section-head__body > .gate > * + * { margin-top: 18px; }   /* preview only: gated heading + intro */
/* Costuri: no fees are published (her decision, 29.09.2026); the legal-aid note is the whole section. */
.fees-foot { margin-top: clamp(32px, 1.5rem + 1vw, 44px); row-gap: 28px; }
.fees-foot__note > p + p, .fees-foot__note > .aid + p, .fees-foot__note > p + .aid { margin-top: 14px; }
.aid { margin-top: 16px; }
.aid__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
.aid__row:last-child { border-bottom: 1px solid var(--rule); }
.aid dt { display: flex; flex-direction: column; gap: 2px; }
.aid__fig { font-family: var(--mono); font-size: 1.125rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.aid__pct { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.aid dd { color: var(--ink); line-height: 1.6; }
@media (min-width: 600px) {
  .aid__row { grid-template-columns: 14.5rem minmax(0, 1fr); gap: 24px; align-items: baseline; }   /* the 12px threshold label stays on one line */
}
.fees-foot__note > .aid__src { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); line-height: 1.65; }
.fees-foot__meta { margin-top: -8px; }
.fees-foot--solo { margin-top: 0; }
/* the legal-aid note is the whole section, so it drops the aside frame and reads as section text */
.fees-foot--solo .fees-foot__note { border: 0; padding: 0; }
@media (min-width: 900px) {
  .fees-foot__note { grid-column: 7 / span 6; }
  .fees-foot__meta { grid-column: 1 / -1; }
  .fees-foot--solo .fees-foot__note { grid-column: 4 / span 8; }
  .fees-foot--solo .fees-foot__note > * { max-width: 40rem; }
  .fees-foot--solo .fees-foot__meta { grid-column: 4 / span 8; }
}

/* ---------- 04 — Cum lucrez ---------- */
.how-rows > .row { padding-block: clamp(20px, 1rem + 0.5vw, 26px); }
.how-rows .row__title { font-size: var(--fs-h4); line-height: 1.25; }
.how-rows .row__body { color: var(--muted); line-height: 1.7; }
@media (max-width: 899px) { .how-rows .row__title { margin-bottom: 9px; } }
.how-pull-row { margin-top: clamp(36px, 1.5rem + 1.5vw, 48px); }
.how-pull > .eyebrow + .pull { margin-top: 14px; }
@media (min-width: 900px) { .how-pull-row .how-pull { grid-column: 2 / span 8; } }
/* contract alone (no rows): the pull quote lines up with the heading, cols 4–11 */
.how-head--solo + .how-pull-row { margin-top: 0; }
@media (min-width: 900px) { .how-head--solo + .how-pull-row .how-pull { grid-column: 4 / span 8; } }
/* preview only: a gated row keeps the row's columns (the marker spans the whole row) */
@media (min-width: 900px) {
  .how-rows > .row > .gate { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .how-rows > .row > .gate > .gate__label { grid-column: 1 / -1; }
}
/* promises hidden: label + pull quote, set like a section head */
.how-solo { row-gap: 14px; }
@media (min-width: 900px) {
  .how-solo__label { grid-column: 1 / span 3; padding-top: 12px; }
  .how-solo__body { grid-column: 4 / span 8; }
}

/* ---------- 05 — Despre ---------- */
/* Set like every other section head: label cols 1–3, heading, text and facts cols 4–11. */
.about__label { margin-bottom: 14px; }
.about__title { max-width: 16em; }
.about__prose { margin-top: 24px; }
.about__prose p { color: var(--muted); line-height: 1.8; max-width: 38rem; }
.about__prose > * + * { margin-top: 18px; }
.about__facts { margin-top: 36px; }
@media (min-width: 900px) {
  .about__label { grid-column: 1 / span 3; margin-bottom: 0; padding-top: 12px; }
  .about__text { grid-column: 4 / span 8; }
  .about__facts { grid-column: 4 / span 8; margin-top: clamp(32px, 1.5rem + 1vw, 44px); }
}

/* ---------- 06 — Din străinătate ---------- */
.abroad-cols .card { padding: 24px 0 28px; }
.abroad-except { margin-top: 8px; padding-block: 24px; border-top: 1px solid var(--rule-on-surface); border-bottom: 1px solid var(--rule-on-surface); row-gap: 10px; }
.abroad-except__text { color: var(--ink); line-height: 1.75; max-width: 46rem; }
.abroad-more { margin-top: clamp(12px, 0.5rem + 0.5vw, 20px); }
.abroad-more .link-arrow { padding-block: 13px; }   /* 44px tap target */
@media (min-width: 900px) {
  .abroad-except__label { grid-column: 1 / span 3; padding-top: 5px; }
  .abroad-except__text { grid-column: 4 / span 8; }
  .abroad-more__link { grid-column: 4 / span 8; }
}
/* 900–959px: three ~230px columns wrap the labels and stretch Varianta 2 to 17 lines, so the cards stack */
@media (min-width: 900px) and (max-width: 959px) {
  .abroad-cols { grid-template-columns: minmax(0, 1fr); }
  .abroad-cols .card p { max-width: var(--measure); }
}

/* ---------- 07 — Contact ---------- */
.contact__label { margin-bottom: 18px; }
.contact__intro { margin-top: 20px; color: var(--muted); line-height: 1.75; }
.contact__call { margin-top: 26px; width: 100%; align-items: center; }
.contact__facts { margin-top: 30px; }
.contact__phone { display: inline-block; padding-block: 4px; margin-block: -4px; font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.contact__phone:hover { color: var(--accent); }
.contact__link { display: inline-block; padding-block: 8px; margin-block: -8px; font-family: var(--mono); font-size: 1.125rem; color: var(--ink); text-decoration-color: var(--rule-strong); word-break: break-word; }
.contact__link:hover { color: var(--accent); text-decoration-color: currentColor; }
.contact__sub { color: var(--muted); }
.contact__map { margin-top: 4px; }
.contact__map a { display: inline-block; padding-block: 10px; margin-block: -10px; }   /* ≥ 44px tap target */
.contact__aside { margin-top: 40px; }
.contact__aside-title { font-size: var(--fs-h4); line-height: 1.2; }
.contact__aside p { color: var(--muted); line-height: 1.7; }
.contact__aside > .contact__privacy { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.contact__privacy a { display: inline-block; padding-block: 10px; margin-block: -6px -10px; }
@media (min-width: 900px) {
  .contact__label { grid-column: 1 / span 3; padding-top: 12px; margin-bottom: 0; }
  .contact__main { grid-column: 4 / span 4; }
  .contact__aside { grid-column: 9 / span 4; margin-top: 0; }
  .contact__call { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* four columns are too narrow for the heading and the box: stack them in cols 4–9 */
  .contact__main { grid-column: 4 / span 6; }
  .contact__aside { grid-column: 4 / span 6; margin-top: 44px; }
}

/* ---------- Line length < 900px ---------- */
/* Tablets and landscape phones: single-column text keeps the section intro's measure (≈ 75 characters).
   Last in the file so it wins over .abroad-except__text's 46rem. */
@media (max-width: 899px) {
  .q-card p, .abroad-cols .card p, .abroad-except__text, .fees-foot__note > p, .fees-foot__note > .aid { max-width: var(--measure); }
}