.destination-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    background: var(--tt-bg);
    color: var(--tt-ink);
}

/* The photo fills the whole banner; the text and the weather card sit over it. */
.destination-photo {
    grid-area: 1 / 1 / -1 / -1;
    position: relative;
    min-width: 0;
    min-height: 240px;
    margin: 0;
    background: linear-gradient(145deg, #e9dfce, #c6b497);
}

.destination-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(36 34 31 / 72%) 40%, rgb(36 34 31 / 0%));
    pointer-events: none;
}

.destination-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 53%;
}

.destination-image[hidden] { display: none; }

/* The photo state lives on the figure: "unavailable" comes from the server, "failed" from the
   image's error event. Because it is an attribute, it survives HTMX history snapshots. */
.destination-photo-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--tt-ink);
    font-size: 14px;
}

.destination-photo[data-photo-state="unavailable"] .destination-photo-fallback,
.destination-photo[data-photo-state="failed"] .destination-photo-fallback { display: flex; }

/* Above 640px the dark overlay sits over the fallback, so its text turns light (phones keep the dark text at the top). */
@media (min-width: 641px) {
    .destination-photo-fallback { color: #fffdfa; }
}

.destination-photo[data-photo-state="failed"] .destination-image,
.destination-photo[data-photo-state="failed"] .destination-photo-credit,
.destination-photo[data-photo-state="failed"] .destination-photo-caption { display: none; }

.destination-photo-caption {
    position: absolute;
    bottom: 28px;
    left: 24px;
    max-width: calc(100% - 48px);
    margin: 0;
    padding: 4px 8px;
    background: rgb(36 34 31 / 65%);
    color: #fffdfa;
    font: italic 22px / 1.3 var(--tt-font-heading);
}

.destination-photo-credit {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 100%;
    padding: 4px 8px;
    background: rgb(36 34 31 / 80%);
    color: #fffdfa;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.destination-photo-credit a { color: inherit; }
.destination-photo-credit a:focus-visible { outline: 2px solid #fffdfa; outline-offset: -2px; }

.destination-information {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: center;
    min-width: 0;
    max-width: 520px;
    padding: 24px 32px;
    color: #fffdfa;
    text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
}

.destination-title {
    margin: 0;
    font: 700 clamp(2.25rem, 4vw, 3.5rem) / 1.1 var(--tt-font-heading);
    overflow-wrap: anywhere;
}

.destination-country {
    margin: 4px 0 0;
    font: 600 clamp(1.125rem, 2vw, 1.5rem) / 1.3 var(--tt-font-heading);
    overflow-wrap: anywhere;
}

.destination-tagline {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.weather-card {
    grid-area: 1 / 2;
    z-index: 1;
    align-self: start;
    min-width: 0;
    margin: 16px;
    padding: 16px;
    border-radius: var(--tt-radius);
    background: var(--tt-surface);
    box-shadow: 0 4px 16px rgb(36 34 31 / 25%);
    color: var(--tt-ink);
}

.weather-current { display: flex; align-items: center; gap: 12px; min-width: 0; }
.weather-icon-main { flex-shrink: 0; color: #b87200; font-size: 48px; line-height: 1; }
.weather-reading { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.weather-main .weather-temperature { order: -1; font-size: 28px; font-weight: 700; line-height: 1.2; }
.weather-label { color: var(--tt-ink); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; text-transform: capitalize; }
.weather-value { margin: 0; overflow-wrap: anywhere; }
.weather-feels { margin: 0; color: var(--tt-muted); font-size: 12px; }
.weather-unit { white-space: nowrap; }

.weather-details { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; padding: 0; font-size: 13px; }
.weather-detail { display: flex; align-items: center; gap: 6px; margin: 0; }
.weather-detail dd { margin: 0; font-weight: 600; }
.weather-detail-label { color: var(--tt-muted); font-weight: 400; }
.weather-detail > .bi { color: #b87200; }
.weather-detail > .weather-icon-water { color: #367e9f; }

.weather-forecast {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 12px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--tt-border);
    list-style: none;
}

.weather-forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 0 4px;
    border-left: 1px solid var(--tt-border);
    font-size: 12px;
}

.weather-forecast-day:first-child { border-left: 0; }
.weather-forecast-name { color: var(--tt-muted); }
.weather-forecast-day .bi { color: #b87200; font-size: 22px; }
.weather-forecast-range { white-space: nowrap; color: var(--tt-muted); }
.weather-forecast-range strong { color: var(--tt-ink); }

.map-card {
    display: grid;
    grid-template-rows: minmax(196px, 1fr) auto;
    min-width: 0;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    background: #eeeadd;
}

.map-embed { display: block; width: 100%; height: 100%; min-height: 196px; border: 0; }
/* A cross-origin frame takes keyboard focus without the page showing a ring (navigation.js sets the flag). */
.map-card[data-frame-focus="true"] { outline: 3px solid var(--tt-accent); outline-offset: -3px; }
.map-unavailable { align-self: center; padding: 16px; margin: 0; color: var(--tt-muted); }
.map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: var(--tt-surface); }
.map-attribution, .map-action { display: inline-flex; align-items: center; min-height: 44px; color: var(--tt-ink); font-size: 12px; line-height: 1.4; }
.map-attribution { color: var(--tt-muted); }
.map-action { gap: 8px; font-weight: 600; }

@media (min-width: 641px) and (max-width: 1100px) {
    .destination-information { padding: 20px 16px; }
    .weather-card { margin: 12px; padding: 12px; }
}

@media (max-width: 640px) {
    .destination-banner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
    .destination-photo { grid-area: 1 / 1; min-height: 200px; }
    .destination-photo::after { background: linear-gradient(transparent 25%, rgb(36 34 31 / 75%)); }
    .destination-image { object-position: center 53%; }
    .destination-information { display: grid; grid-template-rows: subgrid; grid-area: 1 / 1 / 3 / 2; align-self: stretch; padding: 0; max-width: none; text-shadow: none; }
    .destination-heading { align-self: end; justify-self: start; max-width: calc(100% - 32px); margin: 48px 16px 16px; padding: 4px 8px; border-radius: 4px; background: rgb(36 34 31 / 78%); color: #fffdfa; }
    .destination-title { font-size: 32px; }
    .destination-country { font-size: 16px; }
    .destination-tagline { margin: 0; padding: 12px 16px 0; background: var(--tt-surface); color: var(--tt-ink); }
    .destination-photo-caption { display: none; }
    .destination-photo-credit { top: 0; bottom: auto; z-index: 2; font-size: 11px; }
    .destination-photo-fallback { z-index: 1; align-items: flex-start; padding-top: 16px; font-size: 13px; }
    .weather-card { grid-area: 3 / 1; margin: 0; padding: 16px 12px; border-radius: 0; box-shadow: none; background: var(--tt-surface); }
    .map-card { min-height: 180px; grid-template-rows: minmax(136px, 1fr) auto; }
    .map-embed { min-height: 136px; }
}

@media (max-width: 360px) {
    .weather-details { gap: 4px 12px; }
}

/* Header order is brand, search, tabs. The DOM keeps the tabs next to the menu button, so the menu's first Tab stop is its first link.
   Below 900px styles.css reorders the rows itself. */
.tt-header > .tt-brand { font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -0.06em; }
.tt-footer-brand { font-size: 20px; }

@media (min-width: 900px) {
    .tt-search-area { order: 1; margin-left: 0; flex: 1 1 320px; max-width: 420px; }
    .tt-header-navigation { order: 2; }
}

@media (max-width: 639px) {
    .tt-header-navigation { display: none; }
}

.tt-header > .tt-brand { display: flex; align-items: center; gap: 8px; letter-spacing: 0; }
.tt-brand-peaks { width: 42px; height: 38px; color: #c96649; flex-shrink: 0; }
.tt-wordmark { display: flex; flex-direction: column; }
.tt-wordmark strong { font: 800 28px/1 var(--tt-font-heading); }
.tt-wordmark small { margin-top: 4px; font: 500 11px/1.1 var(--tt-font-body); color: #a64c35; }

/* Look v3: a slim photo banner with weather in one strip. */
.destination-banner { grid-template-columns: minmax(0, 1fr) auto; height: 157px; min-height: 157px; border-radius: 12px; overflow: visible; }
.destination-photo { min-height: 0; overflow: hidden; border-radius: 12px; }
.destination-photo::after { background: linear-gradient(90deg, rgb(20 20 20 / 78%), rgb(20 20 20 / 45%)); }
.destination-information { padding: 12px 24px; max-width: none; }
.destination-title { font-size: 60px; }
.destination-country { font-size: 24px; margin-top: 0; }
.destination-tagline { margin-top: 4px; font: 19px/1.3 var(--tt-serif); }
.destination-photo-credit { z-index: 2; padding: 2px 6px; font-size: 9px; background: rgb(20 20 20 / 75%); }
.weather-card { display: flex; align-items: center; gap: 12px; align-self: center; margin: 12px 20px 12px 0; padding: 12px; border-radius: 8px; min-height: 86px; }
.weather-current { gap: 8px; }
.weather-icon-main { font-size: 32px; }
.weather-main .weather-temperature { font-size: 18px; }
.weather-label { font-size: 12px; }
.weather-feels { font-size: 11px; white-space: nowrap; }
.weather-details { flex-wrap: nowrap; gap: 12px; margin: 0; padding-left: 12px; border-left: 1px solid var(--tt-border); }
.weather-detail { display: grid; grid-template-columns: auto auto; gap: 0 4px; }
.weather-detail > .bi { grid-row: 1; }
.weather-detail dd { grid-column: 2; grid-row: 1; font-size: 12px; white-space: nowrap; }
.weather-detail-label { grid-column: 1 / -1; grid-row: 2; font-size: 10px; }
.weather-plan { padding: 10px; font-size: 12px; white-space: nowrap; }
.weather-forecast-toggle { border: 0; background: transparent; color: var(--tt-accent); padding: 0 4px; min-height: 44px; min-width: 44px; font-size: 12px; }
.weather-popover { width: min(360px, calc(100vw - 28px)); padding: 20px; border: 1px solid var(--tt-border); border-radius: 12px; background: var(--tt-surface); color: var(--tt-ink); box-shadow: 0 8px 32px #0003; }
.weather-popover h2 { font: 700 24px var(--tt-serif); }
.weather-popover-details { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.weather-popover-details dt { color: var(--tt-muted); font-weight: 400; }
.weather-popover-details dd { margin: 0; font-weight: 600; }
@media (min-width: 641px) and (max-width: 1199px) {
    .destination-title { font-size: 42px; }
    .destination-information { padding: 12px; }
    .destination-tagline { font-size: 15px; }
    .weather-card { gap: 6px; margin-right: 10px; }
    .weather-details { gap: 6px; padding-left: 6px; }
}
@media (max-width: 640px) {
    .destination-banner { height: 100px; min-height: 100px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 100px; }
    .destination-photo { grid-area: 1 / 1; min-height: 100px; }
    .destination-photo-fallback { color: #fffdfa; }
    .destination-information { display: block; align-self: center; grid-area: 1 / 1; padding: 8px 12px; padding-right: 160px; color: #fffdfa; }
    .destination-heading { margin: 0; padding: 0; max-width: none; background: transparent; }
    .destination-title { font-size: 32px; }
    .destination-country { font-size: 14px; }
    .destination-tagline { font-size: 11px; line-height: 1.2; margin-top: 3px; padding: 0; background: transparent; color: #fffdfa; }
    .weather-card { grid-area: 1 / 1; justify-self: end; align-self: start; min-height: 44px; margin: 8px 8px 0 0; padding: 4px 6px; gap: 2px; background: var(--tt-surface); }
    .weather-current { gap: 4px; }
    .weather-icon-main { font-size: 23px; }
    .weather-main .weather-temperature { font-size: 14px; }
    .weather-feels { font-size: 9px; }
    .weather-label, .weather-strip-details, .weather-plan, .weather-forecast-toggle span { display: none; }
    .weather-forecast-toggle { padding: 0; min-width: 44px; min-height: 44px; font-size: 22px; }
    .destination-photo-credit { top: auto; bottom: 0; font-size: 7px; }
    .destination-photo::after { background: rgb(20 20 20 / 78%); }
}

.destination-photo[data-photo-state="unavailable"] .destination-photo-fallback,
.destination-photo[data-photo-state="failed"] .destination-photo-fallback {
    inset: auto 0 0 auto;
    align-items: center;
    padding: 2px 6px;
    background: #24221f;
    color: #fffdfa;
    font-size: 9px;
    z-index: 2;
}