/* ═══════════════════════════════════════════════════════════════════════════
   DESTINATION PAGE — one place, in the tourist dashboard's language

   Classes are prefixed `dp-`. Tour cards are NOT restyled here: the page loads
   css/tourist-dashboard.css and uses .td-tour verbatim, so a tour looks the
   same whether you meet it on the homepage, in search results or here.

   The season strip is the page's one flourish, and it is information rather
   than ornament — twelve months, each carrying its own rating colour from the
   --tp-rating scale in theme.css. That scale is deliberately NOT the brand
   accent: best/good/fair/poor have to stay distinguishable from one another.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────── */

.dp-hero {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    background: linear-gradient(170deg,
        var(--hub-bg-deep) 0%,
        var(--hub-bg) 60%,
        var(--hub-elev) 100%);
    overflow: hidden;
}

/* Only when a destination actually has a photo. None of the seventeen do yet,
   so the gradient above is the normal case, not the fallback. */
.dp-hero.has-image { background: var(--hub-bg-deep); }

.dp-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.dp-hero > .container {
    position: relative;
    z-index: 1;
}

.dp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--hub-ink-faint);
    margin-bottom: 1.25rem;
}

.dp-breadcrumb a {
    color: var(--hub-ink-muted);
    text-decoration: none;
}

.dp-breadcrumb a:hover { color: var(--hub-accent); text-decoration: underline; }

.dp-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--hub-ink);
    margin: 0 0 0.75rem;
}

/* The Vietnamese name, set smaller and quieter — present because it is the
   name on the signs, not as decoration. */
.dp-title-local {
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 500;
    color: var(--hub-ink-faint);
    letter-spacing: 0;
}

.dp-tagline {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    color: var(--hub-ink-muted);
    max-width: 60ch;
    margin: 0 0 1.5rem;
}

.dp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dp-pill {
    padding: 0.36rem 0.9rem;
    border-radius: 100px;
    border: 1px solid var(--hub-hairline);
    background: var(--hub-elev);
    color: var(--hub-ink-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

/* The season is the one fact worth lifting out of the row. */
.dp-pill-season {
    background: var(--hub-fill);
    border-color: transparent;
    color: var(--hub-on-fill);
    font-weight: 700;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.dp-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--hub-bg);
}

.dp-section-alt { background: var(--hub-bg-deep); }

.dp-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.dp-section-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--hub-ink);
    margin: 0 0 0.4rem;
}

.dp-section-sub {
    color: var(--hub-ink-muted);
    font-size: 0.96rem;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
}

.dp-section-link {
    color: var(--hub-accent);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}

.dp-section-link:hover { text-decoration: underline; }

.dp-prose {
    color: var(--hub-ink-muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 68ch;
    white-space: pre-line;
}

/* ── Season strip ────────────────────────────────────────────────────────── */

.dp-season {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.dp-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.35rem;
    /* The card stretches to match the verdict beside it; its buttons must not.
       Without this the selected month's highlight ran the full height of the
       card as a tall empty box under the icon. */
    align-content: center;
    align-items: center;
    padding: 1.25rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
}

/* Each month is an icon, a temperature and a bar in its rating colour. The bar
   alone used to carry the whole message, which meant the reader had to learn a
   legend before the strip said anything — and a colour cannot distinguish "poor
   because it rains" from "poor because it is 34°C". */
.dp-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.15rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--hub-transition), border-color var(--hub-transition);
}

.dp-month:hover { background: rgb(var(--hub-overlay-rgb) / 0.05); }

.dp-month.is-selected {
    border-color: rgb(var(--hub-accent-rgb) / 0.55);
    background: rgb(var(--hub-accent-rgb) / 0.07);
}

.dp-month:focus-visible {
    outline: 3px solid var(--hub-focus);
    outline-offset: 2px;
}

.dp-month-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--hub-ink-muted);
    letter-spacing: 0.02em;
}

.dp-month.is-selected .dp-month-name { color: var(--hub-ink); }

.dp-month-sky {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: var(--tp-rating);
}

.dp-month-temp {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hub-ink);
    font-variant-numeric: tabular-nums;
}

/* Under the icon and the temperature rather than instead of them — but with
   enough area to be judged. Five pixels was a hairline; twelve is a band. */
.dp-month-bar {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 3px;
    background: var(--tp-rating);
}

.dp-month-now {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.dp-verdict {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-left: 6px solid var(--tp-rating);
    border-radius: var(--hub-radius);
}

.dp-verdict-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.dp-verdict-month {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--hub-ink);
}

.dp-verdict-rating {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tp-rating);
    white-space: nowrap;
}

.dp-verdict-wx {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.35rem 0 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgb(var(--hub-overlay-rgb) / 0.04);
}

.dp-wx-icon {
    display: flex;
    color: var(--tp-rating);
    flex-shrink: 0;
}

.dp-wx-figures {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dp-wx-sky {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hub-ink);
}

.dp-wx-temp {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.dp-wx-temp strong { font-size: 1.35rem; font-weight: 800; color: var(--hub-ink); }
.dp-wx-low { font-size: 0.92rem; color: var(--hub-ink-muted); }

.dp-wx-rain {
    font-size: 0.82rem;
    color: var(--hub-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* Says plainly that these are averages. A number with no provenance next to a
   month reads as a forecast, and it is not one. */
.dp-verdict-source {
    margin: 0.75rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--hub-hairline);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--hub-ink-faint);
}

.dp-verdict-label {
    margin: 0 0 0.5rem;
    color: var(--hub-ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.dp-verdict-note {
    margin: 0;
    color: var(--hub-ink-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ── Attractions ─────────────────────────────────────────────────────────── */

.dp-attrs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.dp-attr-group {
    padding: 1.25rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
}

.dp-attr-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.dp-attr-head span {
    color: var(--hub-ink-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.dp-attr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Name and distance on the first line, the kind under the name, and an icon
   spanning both — so the shape sits beside the pair it describes rather than
   floating against one line of it. */
/* The row is a button now — it shows the place on the map — so it sheds the
   button look and keeps the row's. The separator moved to the <li>, since
   the button no longer is the list item. */
.dp-attr-item {
    border-top: 1px solid var(--hub-hairline);
    /* Wiersz to przycisk „pokaż na mapie", a obok niego link do Google Maps —
       link w środku przycisku byłby niepoprawnym HTML-em. */
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.dp-attr-item > .dp-attr { flex: 1 1 auto; width: auto; min-width: 0; }

/* `display: flex` wyżej pobiłby atrybut hidden — ukryte wiersze „reszty". */
.dp-attr-item[hidden] { display: none; }

.dp-attr-more {
    margin-top: 0.5rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--hub-accent-strong);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.dp-attr-more:hover { border-color: var(--hub-accent); }

.dp-attr-gmaps {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--hub-hairline);
    color: var(--hub-ink-muted);
    transition: var(--hub-transition);
}
.dp-attr-gmaps:hover { border-color: var(--hub-accent); color: var(--hub-accent-strong); }
.dp-attr-gmaps:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 1px; }
.dp-attr-gmaps svg { width: 16px; height: 16px; }

.dp-pop-gmaps,
.pc-pop-gmaps {
    display: inline-block;
    margin-top: 0.3rem;
    font-weight: 600;
    color: var(--hub-accent-strong);
}
.dp-attr-item:first-child { border-top: 0; }

.dp-attr {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: baseline;
    gap: 0.15rem 0.7rem;
    width: 100%;
    padding: 0.55rem 0.4rem;
    margin: 0 -0.4rem;
    box-sizing: content-box;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--hub-transition);
}

.dp-attr:hover { background: rgb(var(--hub-accent-rgb) / 0.07); }
.dp-attr:focus-visible { outline: 3px solid var(--hub-focus); outline-offset: 0; }

/* The place on the map right now — the same mark as on a category's list. */
.dp-attr.is-shown { background: rgb(var(--hub-accent-rgb) / 0.14); }
.dp-attr.is-shown .dp-attr-icon {
    background: var(--hub-accent);
    color: var(--hub-on-accent);
}

.dp-attr-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgb(var(--hub-accent-rgb) / 0.1);
    color: var(--hub-accent-strong);
}

.dp-attr-icon svg { width: 17px; height: 17px; display: block; }



.dp-attr-name {
    grid-column: 2;
    grid-row: 1;
    color: var(--hub-ink);
    font-size: 0.92rem;
    font-weight: 600;
    min-width: 0;
}

/* The OSM kind, lowercased and de-underscored by the renderer — "archaeological
   site", "viewpoint". It sits under the name rather than beside it so a long
   Vietnamese name has the full column. */
.dp-attr-kind {
    grid-column: 2;
    grid-row: 2;
    color: var(--hub-ink-faint);
    font-size: 0.78rem;
}

.dp-attr-dist {
    /* Column 3 now that the icon holds column 1, still spanning both rows so
       it sits against the pair rather than against the name alone. */
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--hub-ink-muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Map of what's there ─────────────────────────────────────────────────
   The category page's map (css/places-catalog.css), under the same rules:
   off until asked for, a pill that turns green while it is on. */

.dp-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    font: inherit;
    font-size: 0.875rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--hub-ink-muted);
    cursor: pointer;
    transition: var(--hub-transition);
    white-space: nowrap;
}
.dp-map-toggle svg { width: 17px; height: 17px; }
.dp-map-toggle:hover { border-color: var(--hub-accent); color: var(--hub-ink); }
.dp-map-toggle[aria-pressed="true"] {
    background: var(--hub-accent);
    border-color: var(--hub-accent);
    color: var(--hub-on-accent);
}

.dp-map {
    height: 440px;
    margin-bottom: 1.25rem;
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-hairline);
    overflow: hidden;
    /* Leaflet paints its tiles on white; without a ground the page colour
       shows for a moment and the map blinks as it opens. */
    background: #e8e8e8;
    scroll-margin-top: calc(var(--navbar-h, 0px) + 1rem);
}

@media (max-width: 768px) {
    .dp-map {
        height: 60vh;
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* ── Gallery and news ────────────────────────────────────────────────────── */

.dp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.dp-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hub-radius);
    border: 1px solid var(--hub-hairline);
}

.dp-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.dp-news-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.15rem 1.25rem;
    background: var(--hub-elev);
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    text-decoration: none;
    transition: border-color var(--hub-transition), transform var(--hub-transition);
}

.dp-news-item:hover {
    border-color: rgb(var(--hub-accent-rgb) / 0.5);
    transform: translateY(-2px);
}

.dp-news-cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.dp-news-title {
    color: var(--hub-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.dp-news-meta {
    color: var(--hub-ink-faint);
    font-size: 0.82rem;
    margin-top: auto;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .dp-season { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    /* Twelve columns at phone width gives each month about 20px — unreadable
       and untappable. Two rows of six keeps the bars legible and the labels
       whole. */
    .dp-months { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
    .dp-verdict-wx { gap: 0.75rem; }
    .dp-section-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-month, .dp-news-item { transition: none; }
    .dp-news-item:hover { transform: none; }
}

/* Where a destination's own best season disagrees with its region's average.
   Two do, deliberately — the Mekong's high water and Côn Đảo's offshore
   monsoon — and without this the page reads as if it contradicts itself. */
.dp-divergence {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--hub-accent);
    border-radius: 0 8px 8px 0;
    background: rgb(var(--hub-accent-rgb) / 0.07);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--hub-ink-muted);
}

.dp-divergence strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--hub-ink);
}

/* Treść rysuje skrypt po odpowiedzi API; do tego czasu stopka stała na
   pierwszym ekranie i potem zjeżdżała w dół (CLS do 0,71, pomiar
   2026-10-17). Ekran zarezerwowany z góry. */
#destination-root { min-height: 100vh; }