/*
  THE PUBLIC CONTENT SURFACE, www.zorgspace.com.

  It layers on /legal/_legal.css rather than restating it, so the public site
  and the legal pages stay one design system. Everything here is either a
  landing-page shape the legal pages have no use for, or the advertising slot.

  ── WHY THE AD RULES LIVE IN CSS ────────────────────────────────────────
  An AdSense unit is an <ins> that Google replaces with an iframe of a size
  it chooses at fill time. Left alone that is a layout shift on every page
  load, and on a phone it is a large one. `min-height` on the frame reserves
  the space before the fill arrives, so the page settles once instead of
  twice — the same reason the app reserves --ad-banner-h for its own banner.
*/

.hero {
  padding: 32px 0 8px;
}
.hero h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.hero .lede {
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  max-width: 62ch;
}

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: 18px 0 26px;
}
.grid .card { margin: 0; }
.grid .card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}
.grid .card p { margin: 0; }
/* A card that is a link into the library: the whole card is the target. */
.grid a.card { display: block; color: var(--text); text-decoration: none; }
.grid a.card h3 { color: var(--teal); }
.grid a.card:hover, .grid a.card:focus-visible { border-color: var(--teal); }

.count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cta {
  display: inline-block;
  margin: 6px 8px 6px 0;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}
.cta-primary { background: #1b6ef3; color: #fff; }
.cta-secondary { border: 1px solid currentColor; }
.cta:focus-visible { outline: 3px solid #1b6ef3; outline-offset: 3px; }

/* ── THE ADVERTISING SLOT ─────────────────────────────────────────────
   Labelled, never floated over anything, never sticky, and never the first
   thing in the document — it sits between sections of real content, which
   is both the honest placement and what Google's own placement policy
   asks for. */
.ad {
  margin: 30px 0;
  padding: 0;
  border-top: 1px solid rgba(128, 128, 128, 0.22);
  border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}
.ad > .ad-label {
  display: block;
  margin: 6px 0 4px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.ad > .ad-frame {
  display: block;
  min-height: 280px; /* reserved before fill — see the note at the top */
  margin-bottom: 8px;
}
.ad ins.adsbygoogle { display: block; }

@media (min-width: 720px) {
  .ad > .ad-frame { min-height: 180px; }
}

/* There is deliberately NO transition on .ad-frame's min-height. Animating
   it would move every element below the slot for a fifth of a second on
   each fill — which is precisely the layout shift the reserved height is
   here to prevent. The space is held from first paint and simply stays
   held when nothing fills it. */

footer.site {
  margin: 40px 0 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(128, 128, 128, 0.22);
  font-size: 0.92rem;
}
footer.site nav a { margin-inline-end: 14px; display: inline-block; }