/* ==========================================================================
   lander.css - the ad landing pages (/dogs/, /the-dmv/, /gifts/ ...)
   Loaded after styles.css, which supplies every token, the chrome, the card
   and the bands. This file only holds what is specific to a lander.
   ========================================================================== */

/* ---------- hero ---------- */

.ld-hero { padding-block: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 72px); }
.ld-hero-inner {
  display: grid; gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(340px, 46%) minmax(0, 1fr);
  align-items: center;
}
.ld-say h1 { margin-bottom: 16px; }
.ld-say .lede { max-width: 40ch; }
.ld-price {
  margin: 20px 0 0; font-family: var(--mono); font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}

/* The plate is the offer, so it is the biggest thing on the screen and it is a
   link to its own page. Borderless on the paper: the scan's ground and the page
   ground are within 2/255 of each other. */
.ld-hero-art { margin: 0; justify-self: end; width: min(100%, 460px); }
.ld-hero-art a { display: block; border-radius: var(--r-sm); }
.ld-hero-art a:focus-visible { outline: 2px solid var(--brick); outline-offset: 4px; }
.ld-hero-art img { width: 100%; height: auto; display: block; }
.ld-hero-art figcaption {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- the grid on a lander ---------- */

/* A lander's cards are static HTML (no app.js here), so the whole figure is a
   link rather than a button the script wires up. */
.plate-open-link {
  position: absolute; inset: 0; z-index: 2;
}
.plate-name a { color: inherit; text-decoration: none; }
.plate-name a:hover { color: var(--brick-deep); }

.ld-more { margin: clamp(30px, 4vw, 48px) 0 0; text-align: center; }

/* ---------- how this works ---------- */

.ld-trust { text-align: left; }
/* 99 characters per line at 768 was the worst measure on the site: this was a
   single column at full band width. Two columns above 900, capped measure. */
.ld-steps {
  list-style: none; margin: 26px 0 30px; padding: 0;
  display: grid; gap: 18px 34px; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
}
.ld-steps li {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 8px;
  align-items: baseline;
  font-size: 16px; line-height: 1.55; color: var(--on-navy);
  border-top: 1px solid var(--rule-on-navy); padding-top: 14px;
}
.ld-steps li span {
  font-family: var(--mono); font-size: 13px; color: var(--on-navy-mark);
}

@media (max-width: 899px) {
  .ld-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .ld-hero-art { justify-self: start; width: min(100%, 420px); }
  .ld-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ld-steps li { max-width: 62ch; }
}

@media (max-width: 620px) {
  /* Same floor the rest of the site keeps: nothing informational under 12px,
     and nothing interactive under 14. */
  /* .ld-price is serif now, so the 12px mono floor no longer applies to it. */
  .ld-hero-art figcaption { font-size: 12px; letter-spacing: .1em; }
  .ld-steps li { font-size: 15.5px; }
}

/* The price line was mono at 13px carrying nine words. */
.ld-price { font-family: var(--serif); font-size: 15px; letter-spacing: normal; text-transform: none; }

/* A 7- or 10-card group left one card alone in the last row with ~640px of
   dead space beside it. auto-fit lets the row close up instead. */
#plates .grid { grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); }
@media (max-width: 620px) { #plates .grid { grid-template-columns: minmax(0, 1fr); } }