/* Shared public shell and home. Loaded after site.css; no Tailwind rebuild required. */
:root {
    --ctl-ink: #10283f;
    --ctl-muted: #526477;
    --ctl-accent: #087e8b;
    --ctl-accent-dark: #08616d;
    --ctl-border: #dbe5ea;
    --ctl-surface: #f3f7f8;
    --ctl-radius: 1.125rem;
}
[x-cloak] { display: none !important; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; min-width: 0; scroll-margin-top: 6rem; }
.front-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.site-skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; color: white; background: var(--ctl-ink); border-radius: .5rem; transform: translateY(-180%); }
.site-skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--ctl-border); }
.site-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 76px; }
.site-brand { display: inline-flex; gap: .65rem; align-items: center; flex-shrink: 0; color: var(--ctl-ink); font-family: 'Playfair Display', Georgia, serif; font-size: 1.3rem; font-weight: 700; }
.site-brand > i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; background: #e5f4f4; color: var(--ctl-accent); font-size: 1.1rem; }
.site-brand small { display: block; margin-top: .1rem; font-family: Inter, sans-serif; font-size: .65rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ctl-muted); }
.site-desktop-nav, .site-desktop-account { display: none; }
.site-desktop-nav { gap: 1.25rem; align-items: center; }
.site-desktop-nav > a { padding-block: .7rem; border-bottom: 2px solid transparent; color: var(--ctl-muted); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.site-desktop-nav > a:hover, .site-desktop-nav > a[aria-current="page"] { color: var(--ctl-accent-dark); border-bottom-color: var(--ctl-accent); }
.site-desktop-account { align-items: center; gap: .75rem; }
.site-account-link { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .85rem; color: var(--ctl-ink); font-size: .875rem; font-weight: 600; border-radius: .65rem; }
.site-account-link:hover { background: var(--ctl-surface); }
.site-account-register { color: #fff; background: var(--ctl-accent); }
.site-account-register:hover { background: var(--ctl-accent-dark); }
.site-account { position: relative; }
.site-account summary { list-style: none; cursor: pointer; }
.site-account summary::-webkit-details-marker { display: none; }
.site-account-panel { position: absolute; right: 0; top: calc(100% + .75rem); width: 16rem; padding: .5rem; background: #fff; border: 1px solid var(--ctl-border); border-radius: .8rem; box-shadow: 0 16px 40px #10283f1a; }
.site-account-panel > p { padding: .6rem .75rem; overflow-wrap: anywhere; color: var(--ctl-muted); font-size: .8rem; }
.site-account-panel a, .site-account-panel button { display: block; width: 100%; padding: .7rem .75rem; border-radius: .5rem; text-align: left; font-size: .875rem; }
.site-account-panel a:hover, .site-account-panel button:hover { background: var(--ctl-surface); }
.site-menu-toggle { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--ctl-border); border-radius: .65rem; color: var(--ctl-ink); }
.site-mobile-panel { border-top: 1px solid var(--ctl-border); max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; padding-block: .75rem; }
.site-mobile-panel a, .site-mobile-panel button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .8rem .5rem; border-radius: .5rem; text-align: left; color: var(--ctl-ink); font-weight: 500; }
.site-mobile-panel a:hover, .site-mobile-panel button:hover { background: var(--ctl-surface); }
.site-mobile-panel i { width: 1.25rem; text-align: center; color: var(--ctl-accent); }
.site-mobile-account { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--ctl-border); }
.site-footer { padding-top: 3rem; background: var(--ctl-ink); color: #d5e2eb; }
.site-footer-grid { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
.site-footer .site-brand { color: #fff; }
.site-footer-about { max-width: 30rem; margin-top: 1rem; color: #b9ccda; font-size: .9rem; line-height: 1.8; }
.site-footer h2 { margin-bottom: 1rem; color: #fff; font-size: .875rem; font-weight: 700; }
.site-footer ul { display: grid; gap: .75rem; font-size: .875rem; }
.site-footer a:hover { color: #8de0e4; }
.site-install { margin-top: 1rem; }
.site-footer-bottom { border-top: 1px solid #ffffff26; padding-block: 1.25rem; color: #b9ccda; font-size: .8rem; }
.front-button { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; min-height: 48px; padding: .8rem 1.15rem; border: 1px solid transparent; border-radius: .75rem; font-size: .9rem; font-weight: 600; line-height: 1.4; text-align: center; transition: background-color .2s; }
.front-button-primary { background: var(--ctl-accent); color: white; }
.front-button-primary:hover { background: var(--ctl-accent-dark); color: white; }
.front-button-light { color: white; border-color: #ffffff66; background: #ffffff0d; }
.front-button-light:hover { background: #ffffff1f; color: white; }
.site-header :is(a, button, summary):focus-visible, .site-footer :is(a, button):focus-visible, .home-page :is(a, button, input):focus-visible { outline: 3px solid #0891b2; outline-offset: 4px; }
.home-page { color: var(--ctl-ink); }
.home-hero { padding-block: clamp(2.5rem, 5vw, 5rem); color: white; background: radial-gradient(ellipse at top right, #174c59, transparent 65%), #10283f; }
.home-hero-grid { display: grid; align-items: center; gap: 2.5rem; }
.home-hero-copy, .home-hero-visual { min-width: 0; }
.home-eyebrow { margin-bottom: .75rem; color: var(--ctl-accent-dark); font-size: .7rem; font-weight: 700; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; }
.home-hero .home-eyebrow { color: #8de0e4; }
.home-hero h1 { margin-bottom: 1.25rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.home-hero-intro { max-width: 35rem; color: #cedce5; font-size: 1rem; line-height: 1.8; }
.home-search { margin-block: 1.75rem 1.25rem; }
.home-search label { display: block; margin-bottom: .65rem; font-size: .85rem; font-weight: 500; color: #e2ebf0; }
.home-search-fields { display: flex; gap: .5rem; padding: .4rem; border: 1px solid var(--ctl-border); border-radius: .9rem; background: white; }
.home-search input { width: 100%; min-width: 0; min-height: 48px; padding: .65rem .75rem; border: 0; border-radius: .5rem; background: white; color: var(--ctl-ink); font-size: 1rem; }
.home-search input::placeholder { color: var(--ctl-muted); opacity: 1; }
.home-search button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0; min-height: 48px; padding: .65rem 1rem; border-radius: .6rem; background: var(--ctl-accent); color: white; font-weight: 600; }
.home-search button:hover { background: var(--ctl-accent-dark); }
.home-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.home-destination { position: relative; display: block; height: clamp(320px, 40vw, 510px); isolation: isolate; overflow: hidden; border: 1px solid #ffffff26; border-radius: 1.5rem; background: #1a4658; }
.home-destination > img { width: 100%; height: 100%; object-fit: cover; }
.home-destination::after { position: absolute; inset: 0; z-index: 0; content: ''; pointer-events: none; background: linear-gradient(180deg, transparent 25%, #071c30f2 100%); }
.home-destination-caption { position: absolute; inset: auto 1.5rem 1.5rem; z-index: 1; }
.home-destination-kicker { display: inline-block; margin-bottom: .6rem; color: #c9edf0; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.home-destination h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: .5rem; color: white; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; overflow-wrap: anywhere; }
.home-destination p { color: #dce8ed; font-size: .875rem; }
.home-destination p > i { margin-right: .5rem; }
.home-destination-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1rem; color: #a4eef0; font-size: .875rem; font-weight: 600; }
.home-destination-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem; padding: 2rem; text-align: center; }
.home-destination-empty::after { display: none; }
.home-destination-empty > i { color: #8de0e4; font-size: 3rem; }
.home-destination-empty > p { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; line-height: 1.5; }
.home-explore { display: grid; padding-block: 1.5rem; gap: .75rem; }
.home-explore > a { display: flex; gap: 1rem; align-items: center; min-width: 0; padding: 1rem; border: 1px solid var(--ctl-border); border-radius: .9rem; }
.home-explore > a:hover { background: var(--ctl-surface); border-color: var(--ctl-accent); }
.home-explore > a > i:first-child { color: var(--ctl-accent); font-size: 1.25rem; }
.home-explore > a > i:last-child { margin-left: auto; color: var(--ctl-accent); font-size: .75rem; }
.home-explore > a > span { min-width: 0; }
.home-explore strong { display: block; font-size: .9rem; }
.home-explore small { display: block; margin-top: .3rem; color: var(--ctl-muted); font-size: .75rem; line-height: 1.6; }
.home-section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.home-section-tinted { background: var(--ctl-surface); }
.home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.home-section-heading > div { max-width: 44rem; }
.home-section h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.home-section-heading h2 + p, .home-map-callout h2 + p { margin-top: .8rem; color: var(--ctl-muted); font-size: .95rem; line-height: 1.75; }
.home-section-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--ctl-accent-dark); font-size: .875rem; font-weight: 600; }
.home-section-link:hover, .home-card-cta:hover { text-decoration: underline; text-underline-offset: .25rem; }
.home-itinerary-grid, .home-location-grid, .home-media-grid, .home-article-grid { display: grid; gap: 1.25rem; }
.home-itinerary-card, .home-location-card, .home-article-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: #fff; transition: border-color .2s, box-shadow .2s; }
.home-itinerary-card:hover, .home-location-card:hover, .home-article-card:hover { border-color: var(--ctl-accent); box-shadow: 0 8px 24px #10283f0d; }
.home-page h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.home-itinerary-card { padding: 1.5rem; }
.home-itinerary-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: .75rem; color: var(--ctl-muted); font-size: .85rem; line-height: 1.7; }
.home-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.25rem; border-radius: .8rem; background: #e5f4f4; color: var(--ctl-accent); font-size: 1.2rem; }
.home-card-place { display: flex; align-items: baseline; gap: .4rem; margin-block: .5rem; color: var(--ctl-muted); font-size: .8rem; line-height: 1.65; overflow-wrap: anywhere; }
.home-card-meta { display: grid; gap: .8rem; margin-top: auto; padding-top: 1.5rem; font-size: .8rem; color: var(--ctl-muted); }
.home-card-meta > span { display: flex; align-items: baseline; gap: .45rem; }
.home-card-cta { display: inline-flex; align-items: center; gap: .6rem; color: var(--ctl-accent-dark); font-size: .8rem; font-weight: 600; }
.home-location-image { aspect-ratio: 16 / 10; background: #e5edf1; }
.home-location-image img, .home-article-image img { width: 100%; height: 100%; object-fit: cover; }
.home-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: .65rem; padding: 1.25rem; }
.home-card-body .home-card-place { margin: 0; }
.home-card-body .home-card-cta { margin-top: auto; padding-top: .5rem; }
.home-image-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; width: 100%; height: 100%; padding: 1rem; background: #e5edf1; color: #647d8d; font-size: .8rem; }
.home-image-fallback i { font-size: 2.5rem; }
.home-map-callout { display: flex; align-items: flex-start; gap: 1.5rem; flex-direction: column; }
.home-map-callout > div { flex: 1; }
.home-map-icon { display: grid; place-items: center; flex-shrink: 0; width: 4rem; height: 4rem; color: var(--ctl-accent); background: #e0f0f0; border-radius: 1rem; font-size: 1.75rem; }
.home-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-media-card { display: block; min-width: 0; }
.home-media-card h3 { margin-top: 1rem; font-size: 1rem; }
.home-media-card:hover h3 { color: var(--ctl-accent-dark); }
.home-poster { aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: #e5edf1; }
.home-poster img { width: 100%; height: 100%; object-fit: contain; }
.home-article-image { aspect-ratio: 3 / 2; background: #e5edf1; }
@media (max-width: 479px) {
    .home-search-fields { flex-direction: column; }
    .home-actions { flex-direction: column; }
    .home-destination-caption { inset-inline: 1.1rem; bottom: 1.1rem; }
    .home-destination h2 { font-size: 1.5rem; }
}
@media (min-width: 640px) {
    .home-itinerary-grid, .home-location-grid, .home-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 768px) {
    .home-explore { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .home-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }
    .home-location-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-itinerary-grid, .home-article-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-map-callout { flex-direction: row; align-items: center; }
    .home-map-callout > a { flex-shrink: 0; }
}
@media (min-width: 1280px) {
    .site-desktop-nav, .site-desktop-account { display: flex; }
    .site-menu-toggle, .site-mobile-panel { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page *, .site-header * { transition: none !important; }
}

/* Film and series showcases share the same destination-first pattern. */
.media-page { color: var(--ctl-ink); }
.media-page :is(a, button, input):focus-visible { outline: 3px solid #0891b2; outline-offset: 4px; }
.media-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem); color: white; background: radial-gradient(ellipse at top right, #174c59, transparent 65%), var(--ctl-ink); }
.media-hero-grid { display: grid; align-items: center; gap: 2rem; }
.media-hero-grid > div { min-width: 0; }
.media-eyebrow { margin-bottom: .75rem; color: var(--ctl-accent-dark); font-size: .7rem; font-weight: 700; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; }
.media-hero .media-eyebrow { color: #8de0e4; }
.media-hero h1 { max-width: 20ch; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.1rem, 3.8vw, 3.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.media-hero-intro { max-width: 38rem; margin-top: 1.25rem; color: #cedce5; line-height: 1.8; }
.media-search { margin-block: 1.75rem 1.25rem; }
.media-search label { display: block; margin-bottom: .65rem; color: #e2ebf0; font-size: .85rem; font-weight: 500; }
.media-search-fields { display: flex; gap: .5rem; padding: .4rem; border: 1px solid var(--ctl-border); border-radius: .9rem; background: #fff; }
.media-search input { width: 100%; min-width: 0; min-height: 48px; padding: .65rem .75rem; border: 0; border-radius: .5rem; background: #fff; color: var(--ctl-ink); font-size: 1rem; }
.media-search input::placeholder { color: var(--ctl-muted); opacity: 1; }
.media-search button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-shrink: 0; min-height: 48px; padding: .65rem 1rem; border-radius: .6rem; background: var(--ctl-accent); color: #fff; font-weight: 600; }
.media-search button:hover { background: var(--ctl-accent-dark); }
.media-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.media-spotlight { position: relative; display: block; min-width: 0; height: clamp(320px, 35vw, 440px); overflow: hidden; border: 1px solid #ffffff26; border-radius: 1.5rem; background: #1a4658; }
.media-spotlight::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(180deg, transparent 15%, #071c30f5 100%); }
.media-spotlight > img { width: 100%; height: 100%; object-fit: cover; }
.media-spotlight-caption { position: absolute; inset: auto 1.5rem 1.5rem; z-index: 1; }
.media-spotlight-caption p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: .65rem; color: #c9edf0; font-size: .85rem; }
.media-spotlight-caption h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: #fff; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.25; overflow-wrap: anywhere; }
.media-spotlight-caption > span { display: block; margin-top: .5rem; color: #dce8ed; font-size: .8rem; }
.media-spotlight-caption strong { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; color: #a4eef0; font-size: .85rem; }
.media-hero-guide { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #ffffff33; border-radius: 1.5rem; background: #ffffff08; }
.media-hero-guide > i { margin-bottom: 1.5rem; color: #8de0e4; font-size: 2rem; }
.media-hero-guide h2 { max-width: 20ch; font-family: 'Playfair Display', Georgia, serif; font-size: 1.85rem; line-height: 1.25; }
.media-hero-guide ol { display: grid; gap: 1rem; margin-top: 1.75rem; }
.media-hero-guide li { display: flex; gap: .9rem; align-items: baseline; color: #cedce5; font-size: .9rem; line-height: 1.6; }
.media-hero-guide li > span { color: #8de0e4; font-weight: 600; }
.media-collection { padding-block: clamp(2.75rem, 5vw, 4.5rem); scroll-margin-top: 6rem; }
.media-collection-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.media-collection-heading > div { max-width: 44rem; }
.media-collection h2, .media-journey h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.media-collection-heading h2 + p { margin-top: .8rem; color: var(--ctl-muted); font-size: .95rem; line-height: 1.75; }
.media-text-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--ctl-accent-dark); font-size: .875rem; font-weight: 600; }
.media-text-link:hover, .media-card-action:hover { text-decoration: underline; text-underline-offset: .25rem; }
.media-selection-count { margin-bottom: 1.5rem; color: var(--ctl-muted); font-size: .8rem; }
.media-destination-grid { display: grid; gap: 1.25rem; }
.media-destination-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1rem; min-width: 0; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: #fff; }
.media-card-poster { display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: .65rem; background: #e5edf1; }
.media-card-poster img { width: 100%; height: 100%; object-fit: contain; }
.media-poster-fallback { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .75rem; width: 100%; height: 100%; padding: .5rem; color: var(--ctl-muted); text-align: center; font-size: .65rem; }
.media-poster-fallback > i { font-size: 1.75rem; }
.media-card-content { min-width: 0; }
.media-card-year { margin-bottom: .35rem; color: var(--ctl-muted); font-size: .75rem; }
.media-card-content h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.media-card-content h3 a:hover { color: var(--ctl-accent-dark); }
.media-location-count { display: flex; align-items: baseline; gap: .45rem; margin-top: .7rem; color: var(--ctl-accent-dark); font-size: .8rem; font-weight: 600; }
.media-place-list { display: grid; margin-top: .8rem; border-top: 1px solid var(--ctl-border); }
.media-place-list li { border-bottom: 1px solid var(--ctl-border); }
.media-place-list a { display: block; min-height: 44px; padding-block: .7rem; font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.media-place-list a:hover > span { color: var(--ctl-accent-dark); text-decoration: underline; text-underline-offset: .2rem; }
.media-place-list small { display: block; margin-top: .2rem; color: var(--ctl-muted); font-size: .75rem; }
.media-card-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .5rem; color: var(--ctl-accent-dark); font-size: .8rem; font-weight: 600; }
.media-archive-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-top: 2rem; padding: 1.25rem; border-radius: var(--ctl-radius); background: var(--ctl-surface); }
.media-archive-note p { max-width: 42rem; color: var(--ctl-muted); font-size: .875rem; line-height: 1.7; }
.media-empty { padding: 2rem 1.25rem; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--ctl-surface); text-align: center; }
.media-empty > i { display: block; margin-bottom: 1.25rem; color: var(--ctl-accent); font-size: 2rem; }
.media-empty h3 { font-size: 1.2rem; font-weight: 600; }
.media-empty p { max-width: 38rem; margin: .8rem auto 1.5rem; color: var(--ctl-muted); font-size: .9rem; line-height: 1.8; }
.media-journey { padding-block: clamp(2.75rem, 5vw, 4rem); background: var(--ctl-surface); }
.media-journey-grid { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.media-journey-grid > a { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: #fff; }
.media-journey-grid > a:hover { border-color: var(--ctl-accent); }
.media-journey-grid > a > i { margin-bottom: .5rem; color: var(--ctl-accent); font-size: 1.5rem; }
.media-journey h3 { font-size: 1.1rem; font-weight: 600; }
.media-journey-grid p { max-width: 35rem; color: var(--ctl-muted); font-size: .9rem; line-height: 1.8; }
.media-journey-grid span { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .5rem; color: var(--ctl-accent-dark); font-size: .85rem; font-weight: 600; }
.media-crosslink { margin-top: 1.25rem; }
@media (max-width: 479px) {
    .media-search-fields, .media-hero-actions { flex-direction: column; }
    .media-spotlight-caption { inset-inline: 1.1rem; bottom: 1.1rem; }
}
@media (min-width: 640px) {
    .media-destination-card { grid-template-columns: 128px minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
    .media-journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .media-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }
    .media-destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Travel details: places and visit information precede editorial context. */
.detail-page { background: #fff; color: var(--ctl-ink); }
.detail-page :is(a, button):focus-visible { outline: 3px solid #0891b2; outline-offset: 4px; }
.detail-hero { padding-block: clamp(2.5rem, 5vw, 4rem); color: #fff; background: radial-gradient(ellipse at top right, #174c59, transparent 65%), var(--ctl-ink); }
.detail-hero-grid { display: grid; gap: 2rem; align-items: center; }
.detail-hero-grid > div { min-width: 0; }
.detail-eyebrow { margin-bottom: .75rem; color: var(--ctl-accent-dark); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.detail-hero .detail-eyebrow { color: #8de0e4; }
.detail-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.detail-subtitle { margin-top: 1rem; color: #c9edf0; font-size: .9rem; }
.detail-introduction { max-width: 42rem; margin-top: 1.5rem; color: #cedce5; line-height: 1.8; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.detail-hero-image { position: relative; height: clamp(260px, 30vw, 380px); overflow: hidden; border: 1px solid #ffffff33; border-radius: var(--ctl-radius); background: #ffffff08; }
.detail-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero-poster img { object-fit: contain; }
.detail-hero-image figcaption { position: absolute; inset: auto 0 0; padding: 1.5rem 1rem .75rem; color: #fff; background: linear-gradient(transparent, #10283fe6); font-size: .8rem; }
.detail-guide { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 2rem; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--ctl-surface); scroll-margin-top: 6rem; }
.detail-guide h2, .detail-description h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; line-height: 1.3; }
.detail-section-intro { margin-block: 1rem 1.5rem; color: var(--ctl-muted); font-size: .95rem; line-height: 1.8; }
.detail-section-intro a { color: var(--ctl-accent-dark); text-decoration: underline; }
.detail-location-grid, .detail-itinerary-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.detail-location-card, .detail-itinerary-grid > a { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ctl-border); border-radius: .85rem; background: #fff; }
.detail-location-card:hover, .detail-itinerary-grid > a:hover { border-color: var(--ctl-accent); }
.detail-location-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.detail-location-card > div { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: .6rem; padding: 1.1rem; }
.detail-guide h3 { font-size: 1rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.detail-location-card p, .detail-itinerary-grid p { color: var(--ctl-muted); font-size: .8rem; line-height: 1.6; }
.detail-location-card span, .detail-itinerary-grid span { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .5rem; color: var(--ctl-accent-dark); font-size: .8rem; font-weight: 600; }
.detail-map { height: 340px; margin-top: 1.5rem; border: 1px solid var(--ctl-border); border-radius: .75rem; z-index: 0; }
.detail-map-note, .detail-visit-note { margin-top: .9rem; color: var(--ctl-muted); font-size: .85rem; line-height: 1.8; }
.detail-visit-note { padding: 1rem; border-left: 3px solid var(--ctl-accent); background: #fff; }
.detail-itinerary-heading { margin-top: 2rem; }
.detail-itinerary-grid > a { align-items: flex-start; gap: .65rem; padding: 1.1rem; }
.detail-itinerary-grid > a > i { color: var(--ctl-accent); }
.detail-description { margin-bottom: 2rem; }
.detail-description p { margin-top: 1rem; color: var(--ctl-muted); line-height: 1.9; }
.detail-context > div { margin-bottom: 1.5rem; border-width: 1px; border-color: var(--ctl-border); }
.detail-context .text-gray-200, .detail-context .text-gray-400 { color: var(--ctl-muted); }
.detail-context :is(h2, h3) { color: var(--ctl-ink); }
.detail-context { display: grid; gap: 1.5rem; }
.detail-rich-text { overflow-wrap: anywhere; line-height: 1.85; }
.detail-rich-text > * + * { margin-top: 1rem; }
.detail-rich-text ul, .detail-rich-text ol { padding-left: 1.5rem; }
.detail-rich-text ul { list-style: disc; }
.detail-rich-text ol { list-style: decimal; }
.detail-rich-text a { color: var(--ctl-accent-dark); text-decoration: underline; text-underline-offset: .2rem; }
.detail-editorial-box { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--ctl-border); border-left: 4px solid var(--ctl-accent); border-radius: var(--ctl-radius); background: #f7fbfb; }
.detail-editorial-box h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.35; }
.detail-editorial-article { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ctl-border); }
.detail-editorial-article h3 { margin-bottom: .85rem; color: var(--ctl-ink); font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.detail-editorial-article h3 a { color: var(--ctl-accent-dark); }
.detail-scene-text { color: var(--ctl-muted); line-height: 1.85; }
.detail-hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.detail-hero-facts > div { min-width: 0; padding: 1rem; border: 1px solid #ffffff33; border-radius: .75rem; background: #ffffff08; }
.detail-hero-facts dt { margin-bottom: .5rem; color: #a9dce1; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.detail-hero-facts dd { color: #fff; font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.detail-hero-facts dd a { color: #a4eef0; text-decoration: underline; text-underline-offset: .2rem; }
.detail-hero-facts .detail-fact-wide { grid-column: 1 / -1; }
.detail-hero-synopsis { margin-top: 1rem; padding: 1rem; border: 1px solid #ffffff33; border-radius: .75rem; background: #ffffff08; }
.detail-hero-synopsis summary { color: #fff; font-weight: 600; cursor: pointer; }
.detail-hero-synopsis p { max-width: 68rem; margin-top: 1rem; color: #cedce5; line-height: 1.85; }
.detail-hero :is(a, button, summary):focus-visible { outline: 3px solid #8de0e4; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .detail-page * { transition: none !important; animation: none !important; } }
@media (max-width: 479px) {
    .detail-hero-facts { grid-template-columns: minmax(0, 1fr); }
    .detail-actions { flex-direction: column; }
    .detail-actions form, .detail-actions button { width: 100%; }
    .detail-map { height: 280px; }
}
@media (min-width: 640px) {
    .detail-location-grid, .detail-itinerary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .detail-hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .detail-hero-with-image { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; }
    .detail-location-grid, .detail-itinerary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* CTL-UX-001: locandina e luogo di ripresa nell'intestazione. */
.detail-hero-media { display: grid; gap: 1rem; min-width: 0; }
.detail-hero-media .detail-hero-poster { width: min(100%, 260px); height: auto; aspect-ratio: 2 / 3; margin-inline: auto; }
.detail-hero-media .detail-hero-poster img { object-fit: contain; }
@media (min-width: 640px) {
    .detail-hero-media-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
    .detail-hero-media-pair .detail-hero-poster { width: 100%; }
    .detail-hero-media-pair .detail-hero-image:not(.detail-hero-poster) { height: 280px; }
}