/* ────────────────────────────────────────────────────────────
   Destination guide + Experience pages (Section Builder output)

   Everything the section renderer prints (dg-*) plus the destination
   hero, related-itineraries band and enquiry CTA. Experience pages load
   this file too (their hero + legacy blocks live in
   page-experience-detail.css).

   Layout system
     --dg-w        content width (matches --container)
     --dg-pad-y    vertical section rhythm
     --dg-edge     distance from the viewport edge to the content edge;
                   rows that bleed off-screen (place cards, carousels) use
                   it so their first item still lines up with the content.
   Breakpoints: 1100 (tablet landscape) · 820 (single column) · 560 (phones)
   ──────────────────────────────────────────────────────────── */

:root {
    --dg-w: 1200px;
    --dg-pad-y: clamp(48px, 4vw, 60px);
    --dg-edge: max(var(--gutter), calc((100vw - var(--dg-w)) / 2));
    --dg-inner-max: calc(var(--dg-w) + 2 * var(--gutter));
    /* Brand orange darkened for SMALL text on light surfaces (>= 4.5:1 on ivory
       / white; the bright #d58e4a is only 2.5:1 there). Used for accent labels,
       tip lead-ins and links; headings keep the bright brand orange. */
    --dg-ink: #a8631f;
}

/* Reveal safety: content must never stay invisible if scripts fail or the
   visitor prefers reduced motion; travel distance is shortened on phones. */
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (max-width: 560px) {
    .reveal:not(.visible) { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════ HERO (destination) ══════════════════════════ */
.dg-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 80vh;
    min-height: clamp(540px, 80svh, 940px);
    background: #0d0d0d;
    overflow: hidden;
    isolation: isolate;
}
.dg-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.dg-hero-parallax {
    position: absolute;
    inset: 0;
    will-change: transform;
}
.dg-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* full-strength photo: the scrim below carries the text contrast, the photo itself is not dimmed
       (a flat .72 opacity over black made overcast / portrait photos look muddy) */
    opacity: 1;
    animation: dgHeroZoom 7s var(--ease-out) both;
}
/* Portrait source photos (flagged by a tiny script in the template) would show only
   their middle in the wide desktop band: aim the crop at the upper part instead. */
@media (min-width: 821px) {
    .dg-hero-img { object-position: var(--hero-pos, center); }
}
@keyframes dgHeroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}
.dg-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* nav fade on top, a side gradient behind the text column, a heavy floor under the text:
       the photo stays bright on the right instead of being darkened uniformly */
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .46) 0, rgba(0, 0, 0, 0) 160px),
        linear-gradient(90deg, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, .42) 36%, rgba(0, 0, 0, .16) 58%, rgba(0, 0, 0, 0) 78%),
        linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .46) 30%, rgba(0, 0, 0, .16) 58%, rgba(0, 0, 0, 0) 100%);
}
.dg-hero-inner {
    width: 100%;
    max-width: var(--dg-inner-max);
    margin: 0 auto;
    padding: calc(var(--nav-h) + clamp(36px, 6vw, 72px)) var(--gutter) clamp(44px, 6.5vw, 88px);
}
.dg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 18px;
    margin-bottom: clamp(16px, 2vw, 22px);
    border-radius: 40px;
    background: rgba(179, 106, 40, .95);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
.dg-eyebrow svg { flex-shrink: 0; }
.dg-hero-h1 {
    font-family: var(--f-display);
    font-size: clamp(44px, 10vw, 130px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: #fff;
    max-width: 900px;
    margin-bottom: clamp(14px, 1.8vw, 22px);
    text-shadow: 0 2px 28px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .28);
}
.dg-hero-tagline {
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, .9);
    max-width: 560px;
    margin-bottom: clamp(24px, 3vw, 34px);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
.dg-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}
.dg-hero-cta .btn-primary,
.dg-hero-cta .btn-outline-light {
    min-height: 50px;
    justify-content: center;
}

@media (max-width: 820px) {
    .dg-hero-scrim {
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 150px),
            var(--scrim-hero);
    }
}
@media (max-width: 560px) {
    .dg-hero {
        min-height: 88vh;
        min-height: min(88svh, 780px);
    }
    .dg-hero-h1 { font-size: clamp(38px, 11.5vw, 52px); }
    .dg-hero-tagline { font-weight: 400; }
    .dg-eyebrow { letter-spacing: 1.6px; padding: 8px 16px; }
    .dg-eyebrow span { min-width: 0; }
    .dg-hero-cta { flex-direction: column; align-items: stretch; }
    .dg-hero-cta .btn-primary,
    .dg-hero-cta .btn-outline-light { width: 100%; padding-left: 22px; padding-right: 22px; }
}
/* Smallest phones: a long region label ("Antarctica · The Seventh Continent") stays one line in its pill
   instead of wrapping into a lumpy two-line capsule: a little smaller, tighter, no wrapping. */
@media (max-width: 400px) {
    .dg-eyebrow { padding: 7px 13px; letter-spacing: .8px; }
    .dg-eyebrow svg { display: none; }   /* decorative plane icon: its 18px is what a 34-character label needs */
    .dg-eyebrow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
    .dg-hero-img { animation: none; }
}

/* ══════════════════════════ SECTIONS ══════════════════════════ */
.dg-section {
    padding: var(--dg-pad-y) 0;
    background: var(--ivory);
}
.dg-section.dg-alt {
    background: var(--ivory-2);
}
.dg-inner {
    width: 100%;
    max-width: var(--dg-inner-max);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.dg-heading {
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.15;
    letter-spacing: -.02em;
    max-width: min(100%, 760px);
    margin-bottom: clamp(18px, 2.4vw, 28px);
    text-wrap: balance;
}
/* short hyphenated words ("K-pop") never break after the hyphen */
.dg-nb { white-space: nowrap; }

/* Icon badge, shown above the heading on every section */
.dg-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--orange-pale);
    color: var(--orange);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* ── Body copy ──
   Capped at ~70 characters a line (comfortable measure); the size grows a little
   with the viewport so laptop / desktop copy does not look small beside 50px headings. */
.dg-body {
    max-width: 68ch;
    font-size: clamp(15px, .35vw + 11px, 17px);
    line-height: 1.8;
    color: var(--black-soft);
}
.dg-body p {
    margin: 0 0 18px;
}
.dg-body p:last-child {
    margin-bottom: 0;
}
.dg-body ul,
.dg-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}
.dg-body li {
    margin-bottom: 8px;
    line-height: 1.7;
}
.dg-body strong {
    color: var(--black);
    font-weight: 700;
}
.dg-body a:not([class*="btn-"]) {
    color: var(--dg-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* a button pasted into copy keeps its pill styling (no link underline / link colour) */
.dg-body a[class*="btn-"] { text-decoration: none; }
@media (max-width: 560px) {
    .dg-body { font-size: 16px; line-height: 1.75; }
    .dg-body p { margin-bottom: 16px; }
}

/* ── Inline section image ("image, para" format): photo under the heading ── */
.dg-inline-img {
    margin: 4px 0 clamp(22px, 3vw, 36px);
}
.dg-inline-img img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
}
@media (max-width: 820px) {
    .dg-inline-img img { aspect-ratio: 3 / 2; border-radius: 14px; }
}

/* Inline links inside copy get a finger-sized hit area on touch screens
   without changing the line layout */
@media (pointer: coarse) {
    .dg-body a:not([class*="btn-"]) { padding-block: 12px; }
}

/* ── Layout variants (class names come from inc/section-renderer.php) ── */

/* Heading cluster: badge + eyebrow + title travel together */
.dg-head { min-width: 0; }
.dg-icon-badge svg { display: block; }

/* Intro / "image, para" copy runs in two columns at laptop widths so the 1200px
   container is used on purpose instead of leaving a dead third on the right. */
@media (min-width: 1101px) {
    .dg-body--cols {
        max-width: none;
        columns: 2;
        column-gap: clamp(48px, 6vw, 96px);
    }
    .dg-body--cols p,
    .dg-body--cols blockquote { break-inside: avoid-column; }
}

/* Text-only sections and the FAQ: heading on the left, copy on the right (a classic editorial split). */
@media (min-width: 1101px) {
    .dg-section--split .dg-inner {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(48px, 6vw, 96px);
        align-items: start;
    }
    .dg-section--split .dg-head {
        grid-column: 1;
        grid-row: 1 / span 4;
        position: sticky;
        top: 120px;
    }
    .dg-section--split .dg-inner > :not(.dg-head) { grid-column: 2; }
    .dg-section--split .dg-heading {
        max-width: none;
        margin-bottom: 0;
    }
    .dg-section--split .dg-body,
    .dg-section--split .dg-faq-list,
    .dg-section--split .dg-durations,
    .dg-section--split .dg-bullets {
        max-width: none;
    }
    .dg-section--split .dg-bullets { grid-template-columns: 1fr; margin-top: 0; }
    .dg-section--split .dg-durations { margin-top: 0; }
    /* with a badge above the heading, start the copy level with the heading itself */
    .dg-section--split .dg-head:has(.dg-icon-badge) + * { padding-top: 80px; }
    .dg-section--split .dg-head:not(:has(.dg-icon-badge)) + * { padding-top: 10px; }
    /* ...but a body that follows only the first item keeps its normal spacing */
    .dg-section--split .dg-inner > .dg-body + .dg-durations,
    .dg-section--split .dg-inner > .dg-body + .dg-bullets { padding-top: 0; margin-top: 20px; }
}

/* A button that closes a section (e.g. "Contact Us"), left-aligned under the copy */
.dg-cta-row {
    margin-top: clamp(26px, 3vw, 38px);
}
.dg-cta-row .btn-primary {
    min-height: 50px;
    justify-content: center;
    text-decoration: none;
}
/* A lone button section with nothing before it to attach to: a compact band, not a full section */
.dg-section--cta { padding-block: clamp(28px, 4vw, 44px); }
.dg-section--cta .dg-body { max-width: none; }
.dg-section--cta .dg-body p { margin: 0; }

/* Testimonial cards pasted into a text section render at full container width, like the real testimonials section */
.dg-body--bleed { max-width: none; }
.dg-body--bleed .dg-testi-grid { margin-top: 0; }
.dg-body--bleed .dg-testi-text { margin: 0 0 20px; font-size: 15px; line-height: 1.75; }
.dg-body--bleed > p {
    text-align: center;
    margin: 24px 0 0;
    font-size: 14px;
    color: #6b6b64;
}
.dg-body--bleed > p a {
    color: var(--dg-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Quoted tips ── */
.dg-body blockquote,
.dg-tip {
    margin: 18px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--orange);
    background: none;
    font-style: italic;
    font-size: 14px;
    line-height: 1.75;
    color: var(--black-soft);
}
.dg-body blockquote p {
    margin: 0 0 10px;
}
.dg-body blockquote p:last-child {
    margin-bottom: 0;
}
.dg-body blockquote strong,
.dg-tip strong {
    color: var(--dg-ink);
    font-weight: 700;
    font-style: italic;
}
@media (max-width: 560px) {
    .dg-body blockquote,
    .dg-tip { font-size: 15px; padding-left: 16px; }
}

/* ══════════════════════════ PHOTO PANEL ══════════════════════════
   Full-bleed alternating image + text. The photo bleeds to the viewport
   edge; the text block stays capped and centred in its column so very wide
   screens don't produce 150-character lines. Below 1100px the panel stacks
   (photo band, then text): at tablet-landscape the side-by-side photo column
   became a tall 470px strip that cropped and upscaled landscape photos. */
.dg-panel {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    min-height: clamp(440px, 38vw, 580px);
    background: var(--ivory);
}
.dg-panel-rev {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
}
.dg-panel-rev .dg-panel-img {
    order: 2;
}
.dg-panel-img {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    /* visible while a photo is still arriving (never a flat blank slab) */
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(213, 142, 74, .22) 0%, rgba(213, 142, 74, 0) 62%),
        linear-gradient(135deg, #e6dfcb 0%, #d3c8aa 100%);
}
/* A photo that failed to load even after the retries (see the image guard script): a deliberate
   forest-green editorial tile, never an empty beige slab. The broken <img> is hidden. */
.dg-panel-img.dg-img-failed,
.dg-inline-img.dg-img-failed,
.dg-place-img.dg-img-failed {
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(213, 142, 74, .30) 0%, rgba(213, 142, 74, 0) 60%),
        radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.6px) 0 0 / 18px 18px,
        linear-gradient(165deg, #2f7550 0%, #245c3f 46%, #173a28 100%);
}
.dg-img-failed img { visibility: hidden; }
.dg-inline-img.dg-img-failed { border-radius: 16px; min-height: 220px; }
.dg-panel-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.dg-panel-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(44px, 6vw, 88px) var(--dg-edge) clamp(44px, 6vw, 88px) clamp(36px, 5vw, 72px);
    background: var(--ivory);
}
/* Text on the left (photo on the right): its left edge sits on the same
   content edge as every other section's heading. */
.dg-panel-rev .dg-panel-text {
    padding-left: var(--dg-edge);
    padding-right: clamp(36px, 5vw, 72px);
}
.dg-panel-text-inner {
    width: 100%;
    max-width: 580px;
}
/* Alternate bands carry the tinted background like every other section, so two
   neighbouring sections never share a colour (and stack their padding into dead space) */
.dg-panel.dg-alt,
.dg-panel.dg-alt .dg-panel-text {
    background: var(--ivory-2);
}

@media (max-width: 1100px) {
    .dg-panel,
    .dg-panel-rev {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .dg-panel-rev .dg-panel-img { order: 0; }
    .dg-panel-img {
        width: 100%;
        min-height: 0;
        aspect-ratio: 2.1 / 1;
    }
    .dg-panel-text,
    .dg-panel-rev .dg-panel-text {
        padding: 40px var(--gutter) 52px;
    }
    .dg-panel-text-inner { max-width: 720px; }
}
@media (max-width: 820px) {
    .dg-panel-img {
        aspect-ratio: 4 / 3;
        max-height: 440px;
    }
    .dg-panel-text,
    .dg-panel-rev .dg-panel-text {
        padding: 36px var(--gutter) 48px;
    }
    .dg-panel-text-inner { max-width: 680px; }
}

/* ══════════════════════════ FAQ ══════════════════════════ */
.dg-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 960px;
}
.dg-faq-item {
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 14px;
    padding: 0 22px;
}
.dg-faq-item[open] {
    border-color: rgba(213, 142, 74, .35);
}
.dg-faq-q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 16px 0;
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--black);
}
.dg-faq-q::-webkit-details-marker {
    display: none;
}
.dg-faq-a {
    padding: 0 0 20px;
    font-size: 15px;
    line-height: 1.75;
    color: #5f5f58;
}
.dg-faq-a p {
    margin: 0 0 12px;
}
.dg-faq-a p:last-child {
    margin-bottom: 0;
}
@media (max-width: 560px) {
    .dg-faq-item { padding: 0 18px; border-radius: 12px; }
    .dg-faq-q { font-size: 16px; padding: 14px 0; }
}

/* ══════════════════════════ BULLETS ══════════════════════════ */
.dg-bullets {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 48px;
    max-width: 960px;
}
.dg-bullets li {
    position: relative;
    padding-left: 32px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--black-soft);
}
.dg-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orange-pale);
    color: var(--dg-ink);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 720px) {
    .dg-bullets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .dg-bullets li { font-size: 16px; }
}

/* ══════════════════════════ SEASONS ══════════════════════════ */
.dg-seasons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: clamp(22px, 3vw, 32px);
}
.dg-season {
    background: var(--white);
    border-radius: 18px;
    padding: clamp(22px, 2.4vw, 30px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.dg-season-label {
    font-family: var(--f-display);
    font-size: clamp(19px, 1.7vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--black);
    margin-bottom: 10px;
}
.dg-season-line {
    font-size: 15px;
    line-height: 1.65;
    color: var(--black-soft);
    margin: 0 0 4px;
}
.dg-season-line strong {
    color: var(--dg-ink);
    font-weight: 700;
}
.dg-season .dg-tip {
    margin-top: 14px;
    margin-bottom: 0;
}
@media (min-width: 860px) {
    .dg-seasons { grid-template-columns: 1fr 1fr; gap: 20px; }
    /* an odd last card spans the row instead of leaving an orphan and an empty cell */
    .dg-season:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* three seasons sit in one row at laptop widths */
@media (min-width: 1101px) {
    .dg-seasons--n3 { grid-template-columns: repeat(3, 1fr); }
    .dg-seasons--n3 .dg-season:last-child:nth-child(odd) { grid-column: auto; }
}

/* ══════════════════════════ DURATION ══════════════════════════ */
.dg-durations {
    display: flex;
    flex-direction: column;
    margin-top: clamp(18px, 2.4vw, 28px);
    max-width: 960px;
}
.dg-duration-row {
    display: grid;
    grid-template-columns: minmax(96px, 150px) 1fr;
    gap: 6px 28px;
    padding: 18px 0;
    border-bottom: 1px solid var(--gray-light);
    align-items: baseline;
}
.dg-duration-row:last-child {
    border-bottom: none;
}
.dg-duration-label {
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--dg-ink);
}
.dg-duration-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--black-soft);
}
@media (max-width: 560px) {
    .dg-duration-row { grid-template-columns: 1fr; gap: 2px; padding: 16px 0; }
    .dg-duration-body { font-size: 16px; }
}

/* ══════════════════════════ TILES ══════════════════════════ */
.dg-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: clamp(22px, 3vw, 32px);
}
.dg-tile-card {
    background: #fff;
    border-radius: 16px;
    padding: clamp(22px, 2.4vw, 28px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}
.dg-tile-icon-wrap {
    width: 52px;
    height: 52px;
    background: var(--orange-pale);
    color: var(--orange);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
    line-height: 1;
}
.dg-tile-icon-wrap svg { stroke: var(--orange); }
.dg-tile-title {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--black);
    margin-bottom: 10px;
}
.dg-tile-text {
    font-size: 15px;
    line-height: 1.7;
    color: #5f5f58;
}
/* The section's button (e.g. "Contact Us") is the grid's last cell: when the last row is short it sits in the
   hole beside the final card, centred in its cell, instead of dangling below the grid on its own. */
.dg-tile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.dg-tile-cta p { margin: 0; text-align: center; }
.dg-tile-cta .btn-primary { min-height: 50px; justify-content: center; text-decoration: none; }
@media (max-width: 1000px) {
    .dg-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
    .dg-tiles-grid { grid-template-columns: 1fr; gap: 12px; }
    .dg-tile-cta { padding: 8px 0 0; }
    .dg-tile-cta p, .dg-tile-cta .btn-primary { width: 100%; }
    /* Compact row layout: icon chip beside the title + text */
    .dg-tile-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
        align-items: start;
        padding: 20px;
    }
    .dg-tile-card:not(:has(.dg-tile-icon-wrap)) { display: block; }
    .dg-tile-icon-wrap {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        border-radius: 12px;
    }
    .dg-tile-title { grid-column: 2; margin-bottom: 6px; }
    .dg-tile-text { grid-column: 2; }
}

/* ══════════════════════════ TESTIMONIALS ══════════════════════════ */
.dg-testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: clamp(22px, 3vw, 32px);
}
.dg-testi-card {
    background: #fff;
    border-radius: 16px;
    padding: clamp(22px, 2.4vw, 28px);
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
}
.dg-testi-quote {
    font-family: var(--f-display);
    font-size: 48px;
    line-height: .8;
    height: 28px;
    color: var(--orange);
    display: block;
    margin-bottom: 10px;
}
.dg-testi-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--black-soft);
    margin-bottom: 20px;
    flex: 1;
}
.dg-testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dg-testi-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--orange-pale);
    color: var(--dg-ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dg-testi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.dg-testi-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
}
.dg-testi-trip {
    font-size: 12px;
    color: #6b6b64;
}
.dg-testi-card .travenza-stars {
    display: block;
    color: var(--orange);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.dg-testi-more {
    text-align: center;
    font-size: 14px;
    color: #6b6b64;
    margin-top: 24px;
}
.dg-testi-more a {
    color: var(--dg-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Long quotes are trimmed by the image guard script (at a word boundary, with an ellipsis), which also adds
   a "Read more" toggle beside the author on the cards whose quote was cut. No-JS visitors get the full text. */
.dg-testi-toggle {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--dg-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.dg-testi-toggle[hidden] { display: none; }
/* finger-sized hit area without adding height to the card */
.dg-testi-toggle::after { content: ''; position: absolute; inset: -12px -10px; }
/* Phones and tablet portrait: three tall quotes become a swipeable row (next card peeks) */
@media (max-width: 900px) {
    .dg-testi-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1);
        padding: 4px var(--gutter) 16px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .dg-testi-grid::-webkit-scrollbar { display: none; }
    /* cards share one height (quotes are clamped to 7 lines below, so the spread is small) and the author is
       pinned to the bottom: no ragged strip, no big void under a short quote */
    .dg-testi-grid { align-items: stretch; }
    .dg-testi-card {
        flex: 0 0 min(84vw, 340px);
        scroll-snap-align: start;
    }
    .dg-testi-card.reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════ BEST PLACES (accordion cards) ══════════════════════════
   Horizontal row of full-bleed photo cards. The row bleeds to the viewport
   edge (first card still lines up with the content edge) so the next card
   always peeks in as the "there is more" cue; arrows show on pointer devices.
   Collapsed: truncated preview + "Read More". Expanded: full text + CTA. */
.dg-place-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: clamp(20px, 2.6vw, 32px);
    margin-inline: calc(50% - 50vw);
    padding: 4px var(--dg-edge) 18px;
    scroll-padding-inline: var(--dg-edge);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-light) transparent;
}
.dg-place-row::-webkit-scrollbar {
    height: 6px;
}
.dg-place-row::-webkit-scrollbar-thumb {
    background: var(--gray-light);
    border-radius: 10px;
}
.dg-place-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 clamp(250px, 21vw, 290px);
    min-height: 380px;
    scroll-snap-align: start;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #1d1d1b;
}
.dg-place-img {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.dg-place-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.dg-place-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* strong already where the title starts (about a third down) so white text holds on
       bright skies, snow and white buildings, and still leaves the top of the photo visible */
    background: linear-gradient(180deg, rgba(8,8,8,.16) 0%, rgba(8,8,8,.34) 20%, rgba(8,8,8,.68) 38%, rgba(8,8,8,.86) 56%, rgba(8,8,8,.96) 100%);
}
/* Expanded card: the whole paragraph sits on the photo, so the scrim is
   heavy from top to bottom (passes on bright skies and white buildings). */
.dg-place-card[open] .dg-place-scrim {
    background: linear-gradient(180deg, rgba(8,8,8,.74) 0%, rgba(8,8,8,.86) 50%, rgba(8,8,8,.95) 100%);
}
.dg-place-summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 20px 20px;
    display: block;
}
.dg-place-summary::-webkit-details-marker {
    display: none;
}
.dg-place-title {
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 10px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
    /* reserve two lines, text bottom-aligned: every card's title, copy and button
       land on the same lines whatever the title length */
    min-height: 2.8em;
    display: flex;
    align-items: flex-end;
}
.dg-place-preview {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 16px;
    min-height: 6.4em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.dg-place-toggle-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--black);
    background: #fff;
    padding: 0 24px;
    border-radius: 60px;
}
.dg-place-card[open] .dg-place-toggle-more {
    display: none;
}
.dg-place-card[open] .dg-place-preview {
    display: none;
}
.dg-place-card[open] .dg-place-title {
    min-height: 0;
}
.dg-place-expand {
    padding: 0 20px 20px;
}
.dg-place-full {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 16px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.dg-place-expand .dg-place-cta {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    padding: 12px 20px;
    font-size: 13px;
    box-shadow: none;
}
/* the tile is already dark green: keep the scrim light so the green reads as colour, not black */
.dg-place-card--noimg .dg-place-scrim {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, .12) 40%, rgba(8, 8, 8, .42) 100%);
}
/* Place card with no photo yet: a deliberate dark-green editorial tile (forest gradient, soft
   dot grain, a warm glow in the corner and an orange numeral), never an empty photo slot.
   The photo is added from wp-admin (Section Builder "Choose Image" on that box) and replaces it. */
.dg-place-img-fallback {
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(213, 142, 74, .30) 0%, rgba(213, 142, 74, 0) 60%),
        radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.6px) 0 0 / 18px 18px,
        linear-gradient(165deg, #2f7550 0%, #245c3f 46%, #173a28 100%);
}
.dg-place-num {
    position: absolute;
    top: 22px;
    left: 20px;
    font-family: var(--f-display);
    font-size: 58px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--orange-light);
}
.dg-place-num::after {
    content: '';
    display: block;
    width: 38px;
    height: 2px;
    margin-top: 14px;
    background: var(--orange);
}

/* Prev / next arrows (injected by the section renderer's inline script) */
.dg-row-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.dg-row-nav[hidden] { display: none; }
.dg-row-nav + .dg-place-row { margin-top: 12px; }
.dg-row-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-light);
    background: #fff;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.dg-row-btn:hover:not(:disabled) {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.dg-row-btn:disabled {
    opacity: .35;
    cursor: default;
}
@media (hover: none) {
    .dg-row-nav { display: none; }
}

@media (max-width: 560px) {
    .dg-place-row { gap: 12px; }
    .dg-place-card {
        flex-basis: min(76vw, 300px);
        min-height: 380px;
    }
}

/* ══════════════════════════ RELATED ITINERARIES (destination) ══════════════════════════ */
.dg-itins-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: clamp(22px, 3vw, 40px);
}
.dg-itins-head .section-heading {
    margin-bottom: 0;
}
.dg-itins .view-all-link {
    min-height: 44px;
    font-size: 14px;
    color: var(--dg-ink);
}
.dg-itins .itin-grid {
    max-width: none;
    margin: 0;
    gap: clamp(14px, 1.7vw, 22px);
}
/* The grid follows the card count (class dg-itins--n1..n4 from the template) so one to
   three trips never sit lopsided in a four-column grid with an empty band beside them. */
@media (min-width: 1101px) {
    .dg-itins--n1 .itin-grid { grid-template-columns: minmax(0, 1fr); }
    .dg-itins--n2 .itin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dg-itins--n3 .itin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dg-itins--n1 .itin-card { aspect-ratio: 2.7 / 1; }
    .dg-itins--n2 .itin-card { aspect-ratio: 1.45 / 1; }
    .dg-itins--n3 .itin-card { aspect-ratio: .98 / 1; }
}
@media (min-width: 601px) and (max-width: 1100px) {
    .dg-itins .itin-card { aspect-ratio: 1 / 1; }
    /* an odd last card spans the row (a single card, or the third of three) */
    .dg-itins .itin-card:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2.1 / 1; }
}
/* One trip = one wide horizontal card, copy on a left-to-right scrim */
@media (min-width: 601px) {
    .dg-itins--n1 .itin-overlay {
        background:
            linear-gradient(90deg, rgba(8, 8, 8, .8) 0%, rgba(8, 8, 8, .5) 38%, rgba(8, 8, 8, 0) 74%),
            var(--scrim-card);
    }
    .dg-itins--n1 .itin-content { max-width: 640px; padding: clamp(24px, 3vw, 44px); }
    .dg-itins--n1 .itin-name { font-size: clamp(24px, 3vw, 38px); margin-bottom: 8px; }
    .dg-itins--n1 .itin-region { font-size: 12px; }
    .dg-itins--n1 .itin-days { font-size: 14px; }
}
/* Dark base so the white label stays readable even if a photo fails to load */
.dg-itins .itin-card {
    background: #26261f;
}
.dg-itins img.itin-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-image: none;
}
.dg-itins .itin-region {
    font-size: 11px;
    /* one line (the template prints the destination or a short route, never a city list); the ellipsis is
       only a safety net for an unusually long stored route */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* two lines reserved for the trip name, so eyebrows, names and durations line up across a row of cards */
.dg-itins:not(.dg-itins--n1) .itin-name { min-height: 2.4em; }
.dg-itins .itin-days {
    font-size: 13px;
}
/* Hover reveal: a wipe-up instead of an opacity fade, so the label is never
   an invisible-but-present element. Touch screens get an always-visible
   "View Itinerary" line instead of a hover overlay. */
.dg-itins .itin-hover {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .4s var(--ease-out);
}
.dg-itins .itin-card:hover .itin-hover,
.dg-itins .itin-card:focus-visible .itin-hover {
    clip-path: inset(0 0 0 0);
}
@media (hover: none) {
    .dg-itins .itin-content::after {
        content: 'View Itinerary \2192';
        display: block;
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .3px;
        color: var(--orange-light);
    }
}
/* Phones: stacked 3:4 posters are a long scroll, so the cards become a
   swipeable row with the next card peeking in. */
@media (max-width: 600px) {
    .dg-itins .itin-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        margin-inline: calc(var(--gutter) * -1);
        padding: 4px var(--gutter) 16px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .dg-itins .itin-grid::-webkit-scrollbar { display: none; }
    .dg-itins .itin-card {
        flex: 0 0 min(76vw, 300px);
        scroll-snap-align: start;
    }
    .dg-itins--n1 .itin-card { flex-basis: 100%; }
    /* Off-screen carousel items can't trigger the scroll-reveal observer
       until swiped into view, so they are simply shown. */
    .dg-itins .itin-card.reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════ ENQUIRY CTA ══════════════════════════ */
.dg-cta-label {
    color: rgba(255, 255, 255, .78);
    text-align: center;
}
.page-destination-single .enquiry-strip h2,
.page-experience-single .enquiry-strip h2 {
    line-height: 1.12;
    max-width: 900px;
    margin-inline: auto;
}
.page-destination-single .enquiry-strip h2 em,
.page-experience-single .enquiry-strip h2 em {
    color: var(--orange-light);
    font-style: italic;
}
.page-destination-single .enquiry-strip p,
.page-experience-single .enquiry-strip p {
    color: rgba(255, 255, 255, .84);
    max-width: 640px;
    margin-inline: auto;
}
.dg-cta-actions {
    display: flex;
    gap: 14px 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.dg-cta-actions .btn-primary,
.dg-cta-actions .btn-outline-light {
    min-height: 50px;
    justify-content: center;
}
@media (max-width: 560px) {
    .page-destination-single .enquiry-strip p,
    .page-experience-single .enquiry-strip p { margin-bottom: 28px; font-size: 16px; }
    .dg-cta-actions { flex-direction: column; align-items: stretch; max-width: 380px; margin-inline: auto; }
}

/* ══════════════════════════ FALLBACK LAYOUT (no sections / legacy guide) ══════════════════════════ */
.dg-fallback-lead {
    font-size: 15px;
    line-height: 1.8;
    color: var(--gray);
    max-width: 640px;
    margin-bottom: 40px;
}
.dg-fallback-content {
    max-width: 900px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--black-soft);
}
.dg-fallback-content img,
.dg-fallback-content iframe,
.dg-fallback-content video { max-width: 100%; height: auto; }