/* Kysymyksiä nettisivuista / Questions about websites, on top of the shared public/ink.css (site/faq.mjs).
   The opening: the title huge bottom left, the list of questions bottom right. Then one row per question: the
   question big on the left, the answer on the right, a thin line between rows. No inline styles: the CSP forbids them. */

.fq main > section { box-sizing: border-box; padding-left: var(--gut); padding-right: var(--gut); }

.fq-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: end; align-items: end; min-height: 100svh; padding-top: 7rem; padding-bottom: 5rem; }
.fq-intro h1 { grid-column: 1 / 8; max-width: 12ch; margin: 0; font-size: clamp(3rem, 7vw, 9rem); line-height: .95; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.fq-intro > p { grid-column: 1 / 7; grid-row: 2; max-width: 34rem; margin: 1.8rem 0 0; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.35rem); line-height: 1.55; }
.fq-index { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; }
.fq-index ol { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.fq-index li { counter-increment: q; display: grid; grid-template-columns: 2.2rem 1fr; padding: .45rem 0; border-top: 1px solid var(--line); }
.fq-index li::before { content: counter(q, decimal-leading-zero); color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.fq-index a { color: var(--ink-2); text-decoration: none; }
.fq-index a:hover { color: var(--ink); }

.fq-q { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(3rem, 7vh, 5.5rem); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.fq-q h2 { grid-column: 1 / 7; margin: 0; font-size: clamp(1.8rem, 3vw, 3.6rem); line-height: 1.04; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.fq-a { grid-column: 7 / 13; max-width: 38rem; padding-top: .4rem; }
.fq-a p { margin: 0 0 1rem; color: var(--ink-2); font-size: clamp(1rem, 1.15vw, 1.25rem); line-height: 1.6; }
.fq-a p:last-child { margin-bottom: 0; }
.fq-a a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .25em; }
.fq-a a:hover { text-decoration-color: var(--pink); }
.fq-q:target h2 { color: var(--pink); }

.fq-end { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: end; min-height: 80svh; padding-bottom: 6rem; border-top: 1px solid var(--line); }
.fq-end > * { grid-column: 7 / 13; }
.fq-end h2 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; }
.fq-end p { margin: 1.2rem 0 2rem; color: var(--ink-2); }
.fq-end .ink-btn { justify-self: start; }

@media (max-width: 900px) {
  .fq-intro, .fq-q, .fq-end { display: block; }
  .fq-intro { min-height: 0; padding-top: 7rem; padding-bottom: 3rem; }
  .fq-index { margin-top: 2.5rem; }
  .fq-a { margin-top: 1.2rem; }
  .fq-end { min-height: 0; padding-top: 4rem; }
}