/* Location hub template (state hubs + /locations/): "State map with city cards". Shared styles, prefix plh-.
   Markup is copied per state hub; each page draws its own inline SVG outline. Behaviour lives in p-loc-hub.js (data attributes only). */
.plh-hero, .plh-land, .plh-cities, .plh-rules, .plh-why, .plh-how, .plh-zones, .plh-visit {
  --plh-ink: #082238; --plh-body: #334155; --plh-muted: #475569; --plh-line: #E2E8F0; --plh-blue: #0A6FA8; --plh-link: #0A5C8C; --plh-amber: #FFB81C; --plh-paper: #F3F7F9;
}
.plh-map a:focus-visible, .plh-map button:focus-visible, .plh-card a:focus-visible, .plh-state a:focus-visible, .plh-visit a:focus-visible { outline: 3px solid #FFB81C; outline-offset: 2px; }

/* ---------- 1. Hero ---------- */
.plh-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.plh-hero .pg-h1 { max-width: 18ch; font-size: clamp(34px, 1.1rem + 2.4vw, 54px); }
.plh-hero__sub { margin: 18px 0 0; font: 600 clamp(17px, 1rem + .3vw, 20px)/1.5 var(--f-display); color: var(--plh-ink); max-width: 46ch; }
.plh-hero .pg-lead { font-size: 17px; }

/* map card */
.plh-map { position: relative; margin: 0; padding: 18px 18px 16px; border-radius: 28px; background: #fff; border: 1px solid var(--plh-line); box-shadow: 0 50px 90px -50px rgba(8,34,56,.5); }
.plh-map__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 4px 8px; }
.plh-map__top b { font: 700 15px/1.2 var(--f-display); color: var(--plh-ink); }
.plh-map__top em { font: 700 11px/1 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; background: #FFF4D6; color: #7A4F00; }
.plh-map__box { position: relative; width: min(100%, var(--plh-w, 420px)); margin: 0 auto; }
.plh-map__svg { display: block; width: 100%; height: auto; }
.plh-map__land { fill: #E6F3FA; stroke: #0A3A63; stroke-width: 2; stroke-linejoin: round; }
.plh-map__grid circle { fill: #B9D7EA; }
.plh-map__state { fill: #CBE6F3; stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: fill .35s; }
.plh-map__state.is-on { fill: #8ECFEA; }
.plh-map__note { font: 700 11px var(--f-body, Inter, sans-serif); fill: #1E3A5F; letter-spacing: .04em; }
.plh-map__arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.plh-map__arcs path { fill: none; stroke: #0A6FA8; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1), opacity .3s, stroke .3s; }
.plh-map.is-in .plh-map__arcs path { stroke-dashoffset: 0; }
.plh-map__arcs path.is-on { stroke: #E89A00; opacity: 1; stroke-width: 2.4; }

.plh-map__pins { list-style: none; margin: 0; padding: 0; }
.plh-map__pins > li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 1; }
.plh-map__pins > li:hover, .plh-map__pins > li:focus-within, .plh-map__pins > li.is-on { z-index: 3; }
.plh-pin { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; text-decoration: none; }
.plh-pin i { position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #0A3A63; border: 3px solid #fff; box-shadow: 0 4px 10px -3px rgba(8,34,56,.6); transition: transform .3s, background-color .3s; }
.plh-pin > span { position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 99px; background: #082238; color: #fff; font: 700 12px/1 var(--f-body); pointer-events: none; transition: opacity .25s; }
.plh-map--quiet .plh-pin > span { opacity: 0; }
.plh-map--quiet .plh-pin:hover > span, .plh-map--quiet .plh-pin:focus-visible > span, .plh-map--quiet .is-on > .plh-pin > span { opacity: 1; }
.plh-pin--below > span { bottom: auto; top: calc(100% - 2px); }
.plh-pin--grey { cursor: help; }
.plh-pin--grey i { left: 11px; top: 11px; width: 10px; height: 10px; border-width: 2px; background: #64748B; box-shadow: none; }
.plh-pin--grey > span { background: #fff; color: #334155; border: 1px solid #CBD5E1; }
.plh-pin--home i { left: 6px; top: 6px; width: 20px; height: 20px; background: #FFB81C; border-color: #082238; border-width: 3px; }
.plh-pin--home > span { background: #FFB81C; color: #082238; }
.plh-map--quiet .plh-pin--home > span { opacity: 1; }
.is-on > .plh-pin:not(.plh-pin--home) i { background: #FFB81C; transform: scale(1.25); animation: plhPing 2s infinite; }
.is-on > .plh-pin--grey i { background: #475569; animation: none; }
@keyframes plhPing { 0% { box-shadow: 0 0 0 0 rgba(255,184,28,.7); } 70% { box-shadow: 0 0 0 14px rgba(255,184,28,0); } 100% { box-shadow: 0 0 0 0 rgba(255,184,28,0); } }

.plh-map__card { margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: var(--plh-paper); border: 1px solid var(--plh-line); min-height: 118px; }
.plh-map__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; }
.plh-map__name b { font: 800 19px/1.2 var(--f-display); color: var(--plh-ink); }
.plh-map__name span { font: 700 12.5px/1.3 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--plh-link); }
.plh-map__text { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--plh-body); }
.plh-map__go { display: inline-flex; align-items: center; min-height: 28px; font: 700 14px/1.3 var(--f-body); color: var(--plh-link); }
.plh-map__go[hidden] { display: none; }
.plh-map__cap { margin: 10px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--plh-muted); }
.plh-map__cap b { color: var(--plh-ink); }
.plh-map.is-anim .plh-map__card { animation: plhCard .45s cubic-bezier(.2,.8,.2,1); }
@keyframes plhCard { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 2. Landscape: regional articles ---------- */
.plh-land__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.plh-region { position: relative; padding: 22px 22px 20px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--plh-line); overflow: hidden; }
.plh-region::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c, #0A6FA8); }
.plh-region h3 { margin: 0 0 4px; font: 700 19px/1.3 var(--f-display); color: var(--plh-ink); }
.plh-region__tag { margin: 0 0 10px; font: 700 12px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--plh-muted); }
.plh-region p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--plh-body); }

/* ---------- 3. City cards ---------- */
.plh-cards { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.plh-card { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--plh-line); box-shadow: 0 20px 34px -30px rgba(8,34,56,.6); transition: transform .3s, border-color .3s, box-shadow .3s; }
.plh-card:hover, .plh-card:focus-within { transform: translateY(-3px); border-color: #9FD8EE; box-shadow: 0 26px 40px -28px rgba(0,163,217,.55); }
.plh-card h3 { margin: 0; font: 800 24px/1.2 var(--f-display); color: var(--plh-ink); letter-spacing: -.01em; }
.plh-card__tz { margin: 6px 0 14px; font: 600 13.5px/1.4 var(--f-body); color: var(--plh-muted); }
.plh-card__tz b { color: var(--plh-link); }
.plh-card ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plh-card ul li { padding: 6px 11px; border-radius: 99px; background: #E8F5FC; color: #0B4D75; font: 600 13px/1.3 var(--f-body); }
.plh-card a { margin-top: auto; display: inline-flex; align-items: center; min-height: 32px; font: 700 15.5px/1.3 var(--f-body); color: var(--plh-link); text-decoration: none; }
.plh-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.plh-card a:hover { text-decoration: underline; }
.plh-cities__more { margin: 18px 0 0; padding: 14px 18px; border-radius: 16px; border: 1px dashed #CBD5E1; font-size: 15px; line-height: 1.55; color: var(--plh-body); max-width: 78ch; }

/* /locations/: state groups */
.plh-states { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.plh-state { display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--plh-line); border-top: 5px solid var(--c, #0A6FA8); }
.plh-state--wide { grid-column: span 2; }
.plh-state h3 { margin: 0; font: 800 22px/1.2 var(--f-display); color: var(--plh-ink); }
.plh-state__tz { margin: 4px 0 12px; font: 600 13.5px/1.4 var(--f-body); color: var(--plh-muted); }
.plh-state__tz b { color: var(--plh-link); }
.plh-state ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.plh-state--wide ul { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.plh-state ul a { display: block; padding: 11px 13px; border-radius: 14px; background: var(--plh-paper); border: 1px solid var(--plh-line); text-decoration: none; transition: border-color .25s, background-color .25s; }
.plh-state ul a:hover { border-color: #9FD8EE; background: #E8F5FC; }
.plh-state ul a b { display: block; font: 700 15.5px/1.3 var(--f-body); color: var(--plh-link); }
.plh-state ul a span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--plh-muted); }
.plh-state__hub { margin-top: auto; display: inline-flex; align-items: center; min-height: 32px; font: 700 14.5px/1.3 var(--f-body); color: var(--plh-ink); }

/* ---------- 4/5. Rules (mk-deal) and why (mk-road) tweaks ---------- */
.plh-rules .mk-deal { margin-top: 30px; }
.plh-rules .pg-note, .plh-zones .pg-note { margin-top: 18px; max-width: 78ch; }
.plh-why .mk-road, .plh-choose .mk-road { margin-top: 34px; }

/* ---------- 6. How we work + clocks ---------- */
.plh-how__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.plh-how__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.plh-how__list li { position: relative; padding: 2px 0 2px 30px; font-size: 16px; line-height: 1.55; color: var(--plh-body); }
.plh-how__list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #00A3D9, #3FB97A); }
.plh-clock { padding: 22px; border-radius: 24px; background: linear-gradient(135deg, #061A2E, #0A3A63 55%, #07605E); color: #fff; box-shadow: 0 40px 70px -46px rgba(8,34,56,.8); }
.plh-clock__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plh-clock__row > div { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.plh-clock__row small { display: block; font: 700 12px/1.3 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #BFD8EA; }
.plh-clock__row b { display: block; margin-top: 6px; font: 800 24px/1.15 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; }
.plh-clock__gap { margin: 14px 2px 0; font-size: 15px; line-height: 1.55; color: #E2EEF6; }
.plh-clock .pg-link { margin-top: 12px; color: #FFD27A !important; }

/* /locations/: visit card */
.plh-visit__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.plh-visit__card { padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--plh-line); }
.plh-visit__card p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--plh-body); }
.plh-visit__card p b { display: block; font: 800 18px/1.3 var(--f-display); color: var(--plh-ink); }
.plh-visit__card a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; color: var(--plh-link); }
.plh-visit__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.plh-visit__links .pg-link { margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .plh-hero__grid, .plh-how__grid, .plh-visit__grid { grid-template-columns: minmax(0, 1fr); }
  .plh-map { max-width: 560px; }
}
@media (max-width: 760px) {
  .plh-land__grid { grid-template-columns: minmax(0, 1fr); }
  .plh-state--wide { grid-column: auto; }
}
@media (max-width: 480px) {
  .plh-map { padding: 14px 10px 12px; border-radius: 22px; }
  .plh-pin > span { font-size: 11px; padding: 4px 7px; }
  .plh-clock__row b { font-size: 20px; }
  .plh-card h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .plh-map__arcs path { transition: none; stroke-dashoffset: 0; }
  .is-on > .plh-pin i { animation: none !important; }
  .plh-map.is-anim .plh-map__card { animation: none; }
  .plh-card { transition: none; }
}
.plh-card__tz b:not(:empty)::before, .plh-state__tz b:not(:empty)::before { content: " · now "; color: var(--plh-muted); font-weight: 600; }
.plh-clock .pg-link, .plh-visit__links .pg-link { display: inline-flex; align-items: center; min-height: 28px; }

/* clickable state shapes and linked state headings on /locations/ */
.plh-map [data-plh-state][data-href] { cursor: pointer; pointer-events: auto; }
.plh-map [data-plh-state][data-href]:hover { fill-opacity: .9; }
.plh-state__link { color: inherit; text-decoration: none; }
.plh-state__link:hover, .plh-state__link:focus-visible { color: #0A6FA8; text-decoration: underline; text-underline-offset: 4px; }