/* vup_2018_child — css/pages/location-state.css
 * Styles the /locations/{state} taxonomy template with hero, highlights,
 * featured cities grid, and CTA panel.
 */

body.tax-location_state {
  --state-ink:var(--state-glass-ink, #121212);
  --state-muted:var(--state-glass-muted, #6d6d6d);
  --state-accent:#ffda1f;
  --state-card-bg:var(--state-glass-bg, rgba(255,255,255,.7));
  --state-card-shadow:var(--state-glass-shadow, 0 25px 50px rgba(0,0,0,.12));
  --state-surface:var(--state-glass-bg-strong, rgba(255,255,255,.85));
  --state-hero-surface:var(--grad-surface-1, linear-gradient(135deg, rgba(255,255,255,.92), rgba(252,250,255,.78)));
  --state-hero-ambient:var(--grad-hero-glow,
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(255,220,120,.45), transparent 45%),
    radial-gradient(circle at 30% 80%, rgba(180,210,255,.35), transparent 60%));
  --state-hero-overlay:var(--grad-overlay-ink, linear-gradient(135deg, rgba(8,12,20,.35), rgba(10,18,32,.25)));
  --state-cta-surface:var(--grad-cta-panel, var(--state-card-bg));
  --state-cta-button:var(--grad-cta, var(--state-accent));
  color:var(--state-ink);
}

.site-main.state-profile {
  position:relative;
  overflow-anchor:none; /* avoid anchor thrash from repeated adjustments */
  background:var(--surface-canvas, linear-gradient(180deg, #050d1d 0%, #112235 55%, #0f1824 100%));
}
.site-main.state-profile::before,
.site-main.state-profile::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:38px;
  pointer-events:none;
  z-index:0;
}
.site-main.state-profile::before {
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.08), transparent 55%),
    rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.site-main.state-profile::after {
  background-color:var(--state-texture-color, rgba(120,132,160,.32));
  -webkit-mask-image:var(--state-texture-mask, none);
  mask-image:var(--state-texture-mask, none);
  -webkit-mask-size:var(--state-texture-size, 220px 220px);
  mask-size:var(--state-texture-size, 220px 220px);
  -webkit-mask-repeat:repeat;
  mask-repeat:repeat;
  opacity:.65;
}

.state-profile__entry {
  position:relative;
  z-index:1;
  background:var(--state-card-bg);
  border-radius:24px;
  padding:clamp(20px,2vw,40px);
  box-shadow:var(--state-card-shadow);
  color:var(--state-ink);
  border:1px solid var(--state-glass-border, rgba(255,255,255,.8));
  -webkit-backdrop-filter:blur(var(--state-glass-blur, 18px));
  backdrop-filter:blur(var(--state-glass-blur, 18px));
}
.state-profile__entry::before {
  content:'';
  position:absolute;
  inset:10px;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background-color:var(--state-texture-color, rgba(120,132,160,.32));
  -webkit-mask-image:var(--state-texture-mask, none);
  mask-image:var(--state-texture-mask, none);
  -webkit-mask-size:var(--state-texture-size, 220px 220px);
  mask-size:var(--state-texture-size, 220px 220px);
  -webkit-mask-repeat:repeat;
  mask-repeat:repeat;
  opacity:.75;
}
.state-profile__entry > * {
  position:relative;
  z-index:1;
}

.state-hero {
  position:relative;
  border-radius:28px;
  padding:clamp(32px,4vw,60px);
  background-color:#f4f7ff;
  background-image:
    var(--state-hero-surface, linear-gradient(135deg, rgba(255,255,255,.92), rgba(252,250,255,.78))),
    var(--state-hero-image, #f4f7ff);
  background-size:cover;
  background-position:center;
  color:var(--state-ink);
  overflow:hidden;
  border:1px solid var(--state-glass-border, rgba(255,255,255,.8));
  box-shadow:var(--state-card-shadow);
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .9));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .9));
}
.state-hero::before,
.state-hero::after {
  z-index:0;
}
.state-hero > * {
  position:relative;
  z-index:1;
}
.state-hero::before,
.state-hero::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.state-hero::before {
  background:var(--state-hero-ambient);
  opacity:.4;
}
.state-hero::after {
  background:
    var(--state-hero-overlay, linear-gradient(135deg, rgba(8,12,20,.35), rgba(10,18,32,.25))),
    radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    radial-gradient(rgba(46,60,96,.08) 1px, transparent 1px);
  background-size:auto, 180px 180px, 420px 420px;
  mix-blend-mode:screen;
  opacity:.45;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.state-hero__kicker {
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  margin:0 0 .4rem;
  color:var(--state-muted);
  position:relative;
}
.state-hero__title {
  font-size:clamp(2.25rem,4vw,3.5rem);
  font-weight:700;
  margin:0 0 1rem;
  color:var(--state-ink);
}
.state-hero__intro,
.state-hero__option {
  font-size:1.05rem;
  line-height:1.65;
  color:var(--state-muted);
}
.state-hero__option {
  margin-top:1.5rem;
}
.state-hero__cta {
  margin-top:2rem;
}
.state-hero__cta .btn {
  background:var(--state-cta-button, var(--state-accent));
  color:#111;
  border:none;
  font-weight:600;
  box-shadow:0 12px 28px rgba(255,218,31,.35);
}

.state-highlights {
  margin:clamp(24px,3vw,40px) 0;
}
.state-highlights__grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(12px,2vw,24px);
}
.state-highlights__item {
  background:var(--state-surface);
  border-radius:18px;
  padding:clamp(12px,2vw,20px);
  text-align:left;
  border:1px solid var(--state-glass-border, rgba(255,255,255,.7));
  box-shadow:0 15px 35px rgba(22,40,66,.08);
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .75));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .75));
}
.state-highlights__label {
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--state-muted);
  margin:0;
}
.state-highlights__value {
  font-size:1.8rem;
  font-weight:700;
  margin:.2rem 0;
  color:var(--state-ink);
}
.state-highlights__detail {
  margin:0;
  color:var(--state-muted);
  font-size:5rem;
}

.state-overview {
  display:grid;
  gap:clamp(18px,3vw,32px);
  margin:clamp(24px,3vw,36px) 0;
  grid-template-columns:minmax(0, 1fr);
}
.state-overview--split {
  align-items:start;
}
.state-overview__primary,
.state-overview__secondary {
  line-height:1.65;
  background:var(--state-card-bg);
  border-radius:18px;
  padding:clamp(18px,3vw,28px);
  border:1px solid var(--state-glass-border, rgba(255,255,255,.75));
  box-shadow:0 15px 40px rgba(22,40,66,.08);
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .75));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .75));
}
.state-overview__secondary {
  background:var(--state-surface);
}

.state-featured {
  margin:clamp(30px,4vw,50px) 0;
}
.state-featured__header {
  margin-bottom:1.5rem;
}
.state-featured__header h2 {
  margin:0 0 .3rem;
}
.state-featured__cards {
  display:grid;
  gap:clamp(16px,3vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.state-featured__card {
  padding:clamp(16px,2vw,24px);
  border-radius:20px;
  background:var(--state-card-bg);
  border:1px solid var(--state-glass-border, rgba(255,255,255,.78));
  box-shadow:0 25px 45px rgba(22,40,66,.12);
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .65));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .65));
}
.state-featured__card h3 {
  margin:0 0 .6rem;
  font-size:1.25rem;
  color:var(--state-ink);
}
.state-featured__card p {
  margin:0 0 .75rem;
  color:var(--state-muted);
}
.state-featured__link {
  font-weight:600;
  color:var(--state-ink);
  text-decoration:none;
}
.state-featured__link::after {
  content:'>';
  margin-left:.4em;
}
.state-featured__link:is(:hover,:focus-visible) {
  color:var(--state-accent);
}


.state-cities {
  margin:clamp(30px,4vw,48px) 0;
}
.state-cities__buttons {
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin:1.25rem 0 0;
  padding:clamp(16px,3vw,28px);
  border-radius:22px;
  background:var(--state-card-bg);
  border:1px solid var(--state-glass-border, rgba(255,255,255,.78));
  box-shadow:0 25px 50px rgba(22,40,66,.12);
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .7));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .7));
}
.state-cities__button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.55rem;
  border-radius:999px;
  border:1px solid var(--state-glass-border, rgba(255,255,255,.75));
  background:var(--state-surface);
  color:var(--state-ink);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  box-shadow:0 12px 25px rgba(20,34,62,.08);
  transition:color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .45));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .45));
}
.state-cities__button:hover,
.state-cities__button:focus-visible {
  background:var(--state-accent);
  color:#111;
  border-color:var(--state-accent);
  box-shadow:0 18px 32px rgba(255,218,31,.35);
  transform:translateY(-2px);
  outline:none;
}

.state-quote {
  margin:clamp(24px,3vw,40px) 0;
  padding:clamp(18px,3vw,28px);
  background:var(--state-surface);
  border-radius:20px;
  border:1px solid var(--state-glass-border, rgba(255,255,255,.78));
  box-shadow:0 25px 45px rgba(22,40,66,.12);
  -webkit-backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .65));
  backdrop-filter:blur(calc(var(--state-glass-blur, 18px) * .65));
}
.state-quote blockquote {
  margin:0;
}
.state-quote p {
  font-size:1.2rem;
  line-height:1.6;
  margin:0 0 .75rem;
}
.state-quote cite {
  font-style:normal;
  font-weight:600;
  color:var(--state-muted);
}

.state-cta {
  margin:clamp(32px,4vw,56px) 0 0;
}
.state-cta__inner {
  background:var(--state-cta-surface, var(--state-card-bg));
  color:var(--state-ink);
  border-radius:22px;
  padding:clamp(20px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:1rem;
  border:1px solid var(--state-glass-border, rgba(255,255,255,.8));
  box-shadow:0 30px 55px rgba(22,40,66,.15);
  -webkit-backdrop-filter:blur(var(--state-glass-blur, 18px));
  backdrop-filter:blur(var(--state-glass-blur, 18px));
}
.state-cta__inner h2 {
  margin:0 0 .25rem;
}
.state-cta__inner .btn {
  align-self:flex-start;
  background:var(--state-cta-button, var(--state-accent));
  color:#111;
  border:none;
  font-weight:600;
  padding:.95rem 1.8rem;
  border-radius:999px;
  box-shadow:0 18px 36px rgba(255,218,31,.3);
}

@media (min-width: 800px) {
  .state-overview--split {
    grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr);
  }
  .state-cta__inner {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}