/* Page styles for the redesigned generated pages. Tokens, fonts, nav and footer come from shell.css + shell-nav.css; trail-page.css is the frozen sheet for old-markup pages. */
@import url(/seo/maplibre-gl.css);
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font-body);line-height:1.55}
a{color:var(--green-ink)}h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em}h2{font-size:1.5rem;margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.small{font-size:.85rem;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1.2rem;border-radius:12px;font-weight:600;text-decoration:none;white-space:nowrap;color:var(--on-accent);transition:transform 120ms,background 120ms}
.btn:hover{transform:translateY(-1px)}
.btn.outline{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
main{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 3rem}
.crumbs{font-size:.85rem;color:var(--ink-2);margin:1.2rem 0 .6rem}.crumbs a{color:inherit}
.hero{padding:.5rem 0 1.5rem;max-width:820px}.hero .kind{margin:0 0 .4rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);font-weight:600}
.lead{font-size:1.2rem;color:var(--ink-2);margin:.4rem 0 1rem}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;font-size:.95rem}.chips li a{text-decoration:none;color:inherit}
.region .hero .chips li{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.neighbours .chips li.ll-chip,.parks .chips li.ll-chip{font-family:var(--font-body);font-size:.95rem;letter-spacing:0;text-transform:none;padding:0}.neighbours .chips li.ll-chip a,.parks .chips li.ll-chip a{display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;box-sizing:border-box;border-radius:999px}.neighbours .chips li.ll-chip:hover,.parks .chips li.ll-chip:hover{background:var(--surface)}
.chips strong{font-family:var(--font-heading);font-size:1.15rem;margin-right:.25rem}
.map{position:relative;z-index:0;isolation:isolate;height:min(62vh,640px);min-height:360px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface);margin:0 0 1.8rem}
.map-region{height:min(48vh,480px)}
.cta{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;padding:1.6rem;margin:1.8rem 0;border-radius:18px;background:var(--panel) url(/seo/card-topo-slate.webp) center/cover no-repeat;color:var(--chalk)}
.cta h3{margin:0;font-size:1.4rem}.cta p{margin:0;color:var(--cloud)}
.cta .launch{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.cta .launch input{flex:1 1 220px;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--mist);background:var(--bedrock);color:var(--chalk);font:inherit;font-size:1rem}
.cta .launch input:focus{outline:none;border-color:var(--fell-green)}
.cta .launch button{min-height:48px;padding:0 1.4rem;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;font-size:1rem;cursor:pointer}
.cta .launch button:disabled,.cta .launch input:disabled{opacity:.6}
.cta .msg{flex-basis:100%;margin:0;min-height:1.2em;color:var(--fell-green);font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn.outline{justify-self:start;white-space:normal;text-align:center;padding-block:.5rem;border-color:var(--chalk);color:var(--chalk)}
.surface{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--line-2)}.surface .paved{background:var(--ink-2)}.surface .unpaved{background:var(--green)}.surface .unknown{background:var(--line)}
.about{max-width:760px;margin:2rem 0}.about p{font-size:1.05rem}
.photos .strip{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}.photo img{height:220px;width:auto;max-width:min(70vw,720px);object-fit:cover;border-radius:14px;scroll-snap-align:start;display:block}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.cards .ll-card-trail{display:block;padding:0;overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--line-2);box-shadow:none}
.cards .ll-card-trail:hover{box-shadow:var(--shadow)}
.ll-card-trail img,.card-art{width:100%;height:150px;object-fit:cover;display:block}.card-art{background:var(--panel) url(/seo/card-topo-slate.webp) center/cover no-repeat}
.card-body{padding:.9rem 1rem 1rem}.ll-card-trail .ll-chip{margin:0 0 .5rem}
.ll-card-trail h3{font-size:1.1rem;margin:0 0 .4rem;color:var(--ink)}.ll-card-trail .area{margin:0 0 .4rem;color:var(--ink-3);font-size:.85rem}.ll-card-trail .stats{margin:0;color:var(--ink-2);font-size:.9rem}
.kind-filter{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.kind-filter .chip{cursor:pointer;background:transparent;padding:0 .95rem;min-height:44px;display:inline-flex;align-items:center}
.kind-filter .chip:hover{background:var(--surface)}
.kind-filter .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.kind-filter .chip[aria-pressed="true"]:hover{filter:brightness(.94)}
.kind-filter .chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.list[hidden]{display:none}
.list ol{columns:2;column-gap:2.5rem;padding-left:1.2rem}.list li{break-inside:avoid;margin:.25rem 0}.list .stats{color:var(--ink-2);font-size:.9rem}
.list button.pick{all:unset;cursor:pointer;color:var(--green-ink);text-decoration:underline;text-decoration-color:var(--line-strong)}
.list button.pick:hover{color:var(--accent-ink)}
.list li.active button.pick{color:var(--accent-ink);font-weight:600;text-decoration:none}
.list li.active::marker{color:var(--accent-ink)}
.list a.page{margin-left:.4rem;font-size:.85rem;white-space:nowrap}
@media (max-width:840px){.list ol{columns:1}.map{height:52vh}}

/* ---- Trail page (everything below is scoped under .trail so the other generated pages are untouched) ---- */
.trail .pills{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.trail .pill{display:inline-flex;align-items:center;padding:.2rem .8rem;border-radius:999px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.trail .pill[data-kind=kind]{background:var(--green-soft);color:var(--green-ink)}
.trail .pill[data-kind=loop]{background:var(--surface-2);color:var(--ink-2)}
.trail .pill[data-kind=grade]{background:var(--accent-soft);color:var(--accent-ink);cursor:help}
.trail .hero{max-width:none;padding:.2rem 0 1.4rem}.trail .hero .lead{max-width:820px;margin-bottom:1rem}
.trail .specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:.6rem}
.trail .spec{display:flex;flex-direction:column;gap:.15rem;flex:1 1 auto;min-width:0;padding:.65rem .95rem;border-radius:14px;background:var(--surface-2);color:var(--ink)}
.trail .spec-v{font-family:var(--font-heading);font-size:1.25rem;line-height:1.1;white-space:nowrap}
.trail .spec-l{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.trail .body{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem 2rem;margin:0 0 1rem}
.trail .main{min-width:0}
@media (min-width:1024px){.trail .body{grid-template-columns:7fr 5fr;align-items:start}.trail .side{align-self:start}}
/* sticky only when the whole sidebar fits the viewport, else its bottom (Getting there) would be unreachable */
@media (min-width:1024px) and (min-height:900px){.trail .side{position:sticky;top:5rem}}
.trail .elevation{height:224px;margin:0 0 1.6rem;border-radius:12px;background:var(--surface)}.trail .elevation .chart{box-sizing:border-box}
.trail .elevation .chart{background:var(--surface);border-color:var(--line)}
.trail .elevation .grid{border-top-color:var(--line)}.trail .elevation .grid span,.trail .elevation .readout{color:var(--ink-3)}
.trail .about{max-width:none;margin:0 0 1.5rem}.trail .about p{font-size:1.05rem}.trail .about p.small{font-size:.9rem}
.trail .glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem 1.2rem;margin:1.5rem 0 1rem}
.trail .glance dt{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}.trail .glance dd{margin:0;font-family:var(--font-heading);font-size:1.2rem}
.trail .box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.25rem;margin:0 0 1.2rem}
.trail .box h2{font-size:1.25rem;margin:0 0 .8rem}
.trail .box .cta{display:block;background:none;color:var(--ink);padding:0;margin:0 0 1rem;border-radius:0}
.trail .box .cta h3{font-size:1.05rem;margin:0 0 .3rem}.trail .box .cta p{color:var(--ink-2);margin:0 0 .8rem}
.trail .box .cta .launch input{background:var(--bg-2);color:var(--ink);border:1px solid var(--line-strong)}
.trail .box .cta .launch input:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--focus-ring)}
.trail .box .cta .msg{color:var(--green-ink)}
/* the badge is a dark charcoal pill in both themes (as on the landing page); the "soon" one is opaque here, it is not on a photo */
.trail .box .badge.soon{background:#15181a}
.trail .actions{display:flex;flex-wrap:wrap;gap:.6rem}.trail .actions .ll-btn{flex:1 1 150px}
.trail #getting-there dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0}
.trail #getting-there dt{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:.2rem}.trail #getting-there dd{margin:0}
.trail #getting-there .note{margin:.9rem 0 0;font-size:.85rem;color:var(--ink-2)}
.trail .photos{margin:1.5rem 0}
.trail .mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.6rem;height:clamp(240px,42vw,440px)}
.trail .mosaic .photo{display:block;min-width:0;min-height:0}.trail .mosaic .photo:first-child{grid-row:1 / 3}
.trail .mosaic .photo:nth-child(2):last-child{grid-row:1 / 3}.trail .mosaic .photo:only-child{grid-column:1 / 3}
.trail .photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:14px}
.trail .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin-top:.6rem}
.trail .photo-grid .photo img{height:auto;aspect-ratio:4/3}
.trail .nearby,.trail .places{margin:1.8rem 0}
@media (max-width:640px){
	.trail .mosaic{height:clamp(200px,60vw,300px)}
	.trail .box dd a{display:inline-flex;align-items:center;min-height:44px}
	/* one row of four at 390 px: the boxes shrink and a long value ("about 5 days") may wrap inside its box */
	.trail .specs{gap:.35rem}
	.trail .spec{padding:.5rem .45rem;gap:.1rem;border-radius:12px}
	.trail .spec-v{font-size:.95rem;white-space:normal;overflow-wrap:break-word}
	.trail .spec-l{font-size:.6rem;letter-spacing:.03em}
}
/* Camino de Santiago pages and hub (scripts/seo/templates/camino*.html). Only tokens the trail page already uses for text
   (ink, ink-2, green-ink, accent-ink on their soft backgrounds), so contrast holds in both themes. One column on a phone. */
.camino .hero{max-width:none;padding:.2rem 0 1.2rem}.camino h1 .name-en,.camino-hub h2 .name-en{display:block;font-size:.5em;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-top:.2em}
.camino .intro{max-width:760px;color:var(--ink-2);margin:0 0 1rem}
.camino .specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.camino .spec{display:flex;flex-direction:column;gap:.15rem;padding:.65rem .95rem;border-radius:14px;background:var(--surface-2);color:var(--ink)}
.camino .spec-v{font-family:var(--font-heading);font-size:1.25rem;line-height:1.1;white-space:nowrap}.camino .spec-l{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.camino .elevation{height:224px;margin:0 0 1.6rem;border-radius:12px;background:var(--surface)}.camino .elevation .chart{box-sizing:border-box;background:var(--surface);border-color:var(--line)}
.camino .elevation .grid{border-top-color:var(--line)}.camino .elevation .grid span,.camino .elevation .readout{color:var(--ink-3)}
.camino section{margin:0 0 2rem}.camino section h2{margin:0 0 .7rem}.camino section h3{font-size:1.05rem;margin:0 0 .4rem}
.camino .note{margin:0 0 1rem;padding:.55rem .9rem;border-radius:12px;background:var(--surface-2);color:var(--ink)}
.camino .warnings{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.camino .warnings li{padding:.6rem .9rem;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink)}
.camino .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.camino .town-table{width:100%;border-collapse:collapse;font-size:.95rem}
.camino .town-table th,.camino .town-table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.camino .town-table thead th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.camino .town-table tbody th{font-weight:600;color:var(--ink)}.camino .town-table tr:last-child>*{border-bottom:0}
.camino .town-table .num{text-align:right;font-variant-numeric:tabular-nums}.camino .town-kind{font-weight:400;font-size:.8rem;color:var(--ink-2)}
.camino .stage-list{margin:0;padding-left:1.4rem}.camino .stage-list li{margin:.3rem 0}.camino .stage-km{color:var(--ink-2);margin-left:.4rem}
.camino .stage-note{display:block;font-size:.9rem;color:var(--accent-ink)}
/* day planner: one full-width band under the chart; the form in a narrow left column, the results in the wide right column beside it (one column under 760 px) */
.camino .planner-band{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 2rem;align-items:start}
@media (min-width:760px){.camino .planner-band{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}}
.camino .planner{display:flex;flex-direction:column;align-items:stretch;gap:.8rem}.camino .planner label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:var(--ink-2)}
.camino .planner select,.camino .planner input{min-height:44px;padding:0 .7rem;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--ink);font:inherit}
.camino .planner-out>:first-child{margin-top:0}
.camino .town-stays{margin:0 0 1.2rem}.camino .stays{list-style:none;margin:0;padding:0}
.camino .stays li{padding:.3rem 0;border-bottom:1px solid var(--line-2)}.camino .stay-name{font-weight:600;color:var(--ink)}
.camino .stay-kind,.camino .stay-beds{color:var(--ink-2);font-size:.9rem}
.camino .stay-tag{display:inline-block;padding:0 .5rem;border-radius:999px;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;background:var(--green-soft);color:var(--green-ink)}
.camino .variants{margin:0 0 .8rem;padding-left:1.2rem}.camino .continues{margin:0}
.camino .sources{max-width:820px}
.camino-hub .hero{max-width:820px}
.camino-cards{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.camino-card a{display:block;height:100%;padding:1rem 1.1rem;border:1px solid var(--line-2);border-radius:16px;text-decoration:none;color:var(--ink);background:var(--surface)}
.camino-card a:hover{box-shadow:var(--shadow)}.camino-card h2{font-size:1.15rem;margin:0 0 .4rem;color:var(--ink)}
.camino-card .stats{margin:0 0 .3rem;color:var(--ink-2);font-size:.9rem}.camino-card .route{margin:0;color:var(--ink-2);font-size:.9rem}
@media (max-width:640px){
	.camino .specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.camino .spec-v{white-space:normal}
	.camino .town-table th,.camino .town-table td{padding:.45rem .5rem}.camino .town-table{font-size:.9rem}
	}
.camino .planner-out ul{margin:.4rem 0 .6rem;padding-left:1.2rem}
.camino .planner[hidden]{display:none}
/* km | mi switch: the right end of the hero's stats row (Camino and trail pages; phone: its own row above the boxes, right-aligned); both pills the same width. Shown by JS. */
.units-switch{display:flex;gap:.4rem;justify-content:flex-end;margin:0}.units-switch[hidden]{display:none}
.units-switch .chip{cursor:pointer;background:transparent;box-sizing:border-box;width:3.6rem;padding:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;letter-spacing:0;text-transform:none}
.units-switch .chip:hover{background:var(--surface)}
.units-switch .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
/* the stats row of every generated page: stat boxes left, pills right; under 760 px the pills go above the boxes */
.hero-row{display:flex;flex-direction:column-reverse;align-items:stretch;gap:.8rem}.hero-row .units-switch{align-self:flex-end}
@media (min-width:760px){.hero-row{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.hero-row .specs{flex:0 1 auto}.hero-row .units-switch{align-self:center;flex:none}}
/* section chips under the page name (Camino and trail pages) and the slim bar they fold into on scroll */
.section-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0 .9rem}
.section-chips .chip{flex:none;cursor:pointer;background:transparent;box-sizing:border-box;padding:0 .95rem;min-height:44px;display:inline-flex;align-items:center;font-size:.95rem;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
.section-chips .chip:hover{background:var(--surface)}
.section-chips .chip[aria-current="true"]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.section-chips .chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.slim-bar{position:fixed;left:0;right:0;z-index:40;height:52px;box-sizing:border-box;display:flex;align-items:center;gap:1rem;padding:0 max(clamp(1rem,4vw,3rem),calc((100% - 1180px) / 2 + clamp(1rem,4vw,3rem)));background:var(--bg);border-bottom:2px solid var(--green)}
nav.nav.nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.slim-bar[hidden]{display:none}
.slim-name{flex:0 1 auto;min-width:0;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-heading);font-weight:700;font-size:calc(1rem + 2px)}
.slim-bar .section-chips{flex:1 1 auto;min-width:0;margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.slim-bar .section-chips::-webkit-scrollbar{display:none}
.slim-bar .section-chips .chip{min-height:36px}
.camino [id],.trail [id]{scroll-margin-top:var(--sticky-offset,5rem)}
@media (max-width:759px){
	.hero .section-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * clamp(1rem,4vw,3rem));padding-right:clamp(1rem,4vw,3rem)}.hero .section-chips::-webkit-scrollbar{display:none}
	.slim-name{max-width:34%;font-size:calc(.9rem + 2px)}
}
/* Town by town: a town's box of places to sleep opens directly below its row, in rows Hostel | Guest house | Hotel | Apartment | Other */
.camino .town-toggle{font-weight:600;cursor:pointer}
.camino .town-box>td{background:var(--surface-2);padding:.8rem 1rem 1rem}
.camino .box-head{margin:0 0 .6rem;font-size:.85rem;color:var(--ink-2)}
.camino .stay-row{margin:0 0 .8rem}.camino .stay-row:last-child{margin-bottom:0}
.camino .stay-row h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .2rem}
.camino .town-box .stays li{border-bottom-color:var(--line)}
.camino .stay-outside{color:var(--ink-2);font-size:.85rem}
.title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}.title-row h1{min-width:0;flex:1 1 auto}
.share-btn{cursor:pointer;background:transparent;box-sizing:border-box;min-height:44px;padding:0 .95rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink-2);flex:none;white-space:nowrap}.share-btn[hidden]{display:none}
.share-btn:hover{background:var(--surface);color:var(--ink)}.share-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.share-btn+.share-url{display:block;margin:.5rem 0 0;max-width:100%;width:22rem;box-sizing:border-box;font:inherit;font-size:.9rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--ink)}
.camino-hub .hero>.share-btn,.trails-index .hero-text>.share-btn{margin-top:.2rem}
/* "Elsewhere on the web" (#174): outside write-ups, a plain list under the About section */
.trail .elsewhere ul{margin:.4rem 0 0;padding-left:1.2rem}.trail .elsewhere li{margin:.3rem 0;font-size:1.05rem}