/* ============================================================
   County finder (/what-county-am-i-in/). Loads after home.css,
   features.css and location.css, which supply the hero, the tool's
   button, note and card, the app pitch, the text sections and the FAQ,
   and the computer layout (sides switch going down, the shorter side
   centered). This file is only the answer inside the card.
   ============================================================ */

/* the answer: the county big, the state under it, then how close a line is */
.cty-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:center; padding:18px 0 14px; }
.cty-read { min-height:96px; display:flex; flex-direction:column; justify-content:center; }
.cty-name { font-size:28px; font-weight:800; line-height:1.15; letter-spacing:-.018em; color:var(--fg); text-wrap:balance; }
.cty-state { margin-top:4px; font-size:17px; font-weight:600; line-height:1.35; color:var(--t-75); }
.cty-line { margin-top:10px; font-size:15px; line-height:1.4; color:var(--accent); text-wrap:pretty; }
.cty-line[hidden] { display:none; }
.loc-card:not(.is-ready) .cty-line { display:none; }

/* before the first answer on computers: soft bars in place of the words
   that pulse while it looks (loc-wait lives in location.css) */
@media (min-width:900px) {
  .loc-card:not(.is-ready) .cty-name, .loc-card:not(.is-ready) .cty-state { border-radius:6px; background:rgba(255,255,255,.08); color:transparent; }
  .loc-card:not(.is-ready) .cty-name { width:70%; height:18px; margin-bottom:10px; }
  .loc-card:not(.is-ready) .cty-state { width:40%; height:12px; }
  .loc-card.is-finding:not(.is-ready) .cty-name, .loc-card.is-finding:not(.is-ready) .cty-state { animation:loc-wait .9s var(--ease) infinite alternate; }
  .cty-name { font-size:34px; }
}
@media (prefers-reduced-motion:reduce) { .loc-card .cty-name, .loc-card .cty-state { animation:none !important; } }

/* ---------- the hero: every county line, tilted away like a map on a table ----------
   White lines on black, blended so only the lines show, faded at every edge
   and lit by the site's soft mint glow. Phones: behind the headline.
   Computers: under the answer card on the right, which floats above it.
   Decoration only (hidden from screen readers). */
.cty-hero { position:relative; overflow:hidden; }
.cty-map { position:absolute; left:50%; top:54%; width:max(900px, 210vw); aspect-ratio:1600 / 1000; z-index:-1; pointer-events:none;
  transform:translate(-50%, -50%) perspective(1400px) rotateX(34deg) rotateZ(-9deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 20%, transparent 100%); mask-image:radial-gradient(closest-side, #000 20%, transparent 100%); }
.cty-map img { display:block; width:100%; height:auto; mix-blend-mode:screen; opacity:.22; }
/* the map fades out before the hero ends and under the header, never a hard edge */
.cty-hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, #000 0, rgba(0,0,0,.6) calc(var(--header) + 20px), transparent 38%, transparent 72%, #000 100%); }
.cty-hero::before { content:""; position:absolute; left:50%; top:50%; width:min(760px, 170vw); aspect-ratio:1; transform:translate(-50%, -50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(97,224,175,.14), rgba(97,224,175,.04) 55%, transparent 75%); }

/* the card floats above the map: solid enough that no line runs through the answer */
.cty .loc-card { position:relative; background:rgba(12,13,14,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 24px 60px -20px rgba(0,0,0,.9); }
.cty .loc-actions { margin-top:14px; }

/* the county's own outline, in its own spot beside the answer */
.cty-panel { grid-template-columns:minmax(0,1fr) 84px; }
.cty-shape { width:84px; height:84px; align-self:center; overflow:visible; }
.cty-shape path { fill:rgba(97,224,175,.10); stroke:var(--accent); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(97,224,175,.35)); }
.loc-card:not(.is-ready) .cty-shape { visibility:hidden; }

@media (min-width:900px) {
  .cty-map { left:74%; top:60%; width:1250px; transform:translate(-50%, -50%) perspective(1500px) rotateX(38deg) rotateZ(-11deg); }
  .cty-map img { opacity:.4; }
  .cty-hero::after { background:linear-gradient(180deg, #000 0, rgba(0,0,0,.5) var(--header), transparent 30%, transparent 70%, #000 100%); }
  .cty-hero::before { left:auto; right:0; top:55%; transform:translateY(-50%); width:820px; }
  .cty-panel { grid-template-columns:minmax(0,1fr) 110px; }
  .cty-shape { width:110px; height:110px; }
}

/* ---------- counties, parishes and boroughs: soft tiles on computers ----------
   (the Features page's tiles; location.css puts the headline left) */
@media (min-width:1000px) {
  .cty #kinds .fx-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  .cty #kinds .fx-row { grid-template-columns:1fr; align-content:start; row-gap:14px; padding:24px 24px 22px; border-radius:20px;
    background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
  .cty #kinds .fx-row + .fx-row { box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
  .cty #kinds .fx-row .ic { width:26px; height:26px; margin:0; }
  .cty #kinds .fx-row h3 { font-size:18px; }
  .cty #kinds .fx-row p { margin-top:6px; }
  .cty #kinds .fx-note { margin-top:20px; }
}
/* every tile reads exactly two lines (owner: side by side, never mixed line
   counts). Each description is 38-54 characters and wraps at 28ch, so it is
   always two lines; checked from 1000 to 3840 wide. */
@media (min-width:1000px) {
  .cty #kinds .fx-row p { max-width:28ch; text-wrap:balance; }
  .cty #kinds .fx-row h3 { white-space:nowrap; }
}