/**
 * ═══════════════════════════════════════════════════════════════════════════
 * TOURWILL — DESTINATIONS LANDING PAGE
 * Mobile-first stylesheet
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Design tokens reused from the existing theme:
 *   --color-primary  : #134e4a   (deep teal)
 *   --color-accent   : #eab308   (warm gold)
 * If your theme already defines these in /assets/css/base/variables.css, this
 * file will inherit them. Local fallbacks are provided just in case.
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
    --dlp-primary: var(--color-primary, #134e4a);
    --dlp-primary-dark: #0d3a35;
    --dlp-primary-deep: #0a2e2a;
    --dlp-accent: var(--color-accent, #eab308);
    --dlp-accent-dark: #ca8a04;
    --dlp-ink: #0f172a;
    --dlp-ink-soft: #475569;
    --dlp-muted: #94a3b8;
    --dlp-line: #e5e7eb;
    --dlp-bg-soft: #f8f7f3;
    --dlp-bg-card: #fffaf0;
    --dlp-white: #ffffff;
    --dlp-radius-sm: 12px;
    --dlp-radius: 20px;
    --dlp-radius-lg: 28px;
    --dlp-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --dlp-shadow: 0 12px 36px rgba(15, 23, 42, .08);
    --dlp-shadow-lg: 0 20px 60px rgba(15, 23, 42, .12);
    --dlp-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 1. BASE
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-main {
    background: #ffffff;
    color: var(--dlp-ink);
    overflow-x: hidden;
    line-height: 1.55;
}

.dlp-main *,
.dlp-main *::before,
.dlp-main *::after { box-sizing: border-box; }

.dlp-section {
    padding: 48px 0;
    position: relative;
}

.dlp-section__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.dlp-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dlp-section__head--simple { justify-content: flex-start; }

.dlp-section__heading { display: flex; flex-direction: column; gap: 4px; }

.dlp-section__eyebrow {
    color: var(--dlp-accent);
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .01em;
}

.dlp-section__title {
    font-size: clamp(22px, 4.5vw, 32px);
    font-weight: 700;
    line-height: 1.18;
    color: var(--dlp-ink);
    margin: 0;
    letter-spacing: -.01em;
}

.dlp-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dlp-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: gap .25s var(--dlp-ease), color .25s var(--dlp-ease);
    flex-shrink: 0;
}
.dlp-section__cta:hover { gap: 10px; color: var(--dlp-accent-dark); }
.dlp-section__cta svg { width: 16px; height: 16px; }

.dlp-empty {
    text-align: center;
    padding: 32px 16px;
    background: var(--dlp-bg-soft);
    border-radius: var(--dlp-radius);
    color: var(--dlp-ink-soft);
    font-size: 14px;
}
.dlp-empty p { margin: 0; }

/* ═════════════════════════════════════════════════════════════════════════
 * 2. BUTTONS
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .25s var(--dlp-ease), box-shadow .25s var(--dlp-ease),
                background .25s var(--dlp-ease), color .25s var(--dlp-ease);
    line-height: 1;
    white-space: nowrap;
}
.dlp-btn svg { width: 16px; height: 16px; }
.dlp-btn:hover { transform: translateY(-1px); }

.dlp-btn--primary {
    background: var(--dlp-accent);
    color: var(--dlp-ink);
    box-shadow: 0 8px 22px rgba(234, 179, 8, .35);
}
.dlp-btn--primary:hover {
    background: var(--dlp-accent-dark);
    box-shadow: 0 12px 28px rgba(234, 179, 8, .45);
}

.dlp-btn--ghost {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dlp-btn--ghost:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .6);
}

.dlp-btn--lg { padding: 16px 28px; font-size: 16px; }
.dlp-btn--sm { padding: 10px 18px; font-size: 13px; }

/* ═════════════════════════════════════════════════════════════════════════
 * 3. HERO
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-hero {
    position: relative;
    min-height: 460px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.dlp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.dlp-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center right;
}

.dlp-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg,
            rgba(10, 46, 42, .92) 0%,
            rgba(13, 58, 53, .85) 35%,
            rgba(19, 78, 74, .55) 60%,
            rgba(19, 78, 74, .25) 100%);
}

.dlp-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 16px 120px;
}

.dlp-hero__content { max-width: 620px; }

.dlp-hero__eyebrow {
    display: inline-block;
    color: var(--dlp-accent);
    font-style: italic;
    font-size: 16px;
    margin-bottom: 12px;
    letter-spacing: .01em;
}

.dlp-hero__title {
    font-size: clamp(30px, 6.5vw, 54px);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 16px;
    letter-spacing: -.02em;
    color: #fff;
}

.dlp-hero__desc {
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    max-width: 540px;
    margin: 0 0 24px;
}

.dlp-hero__ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.dlp-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dlp-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
    font-size: 13px;
}
.dlp-hero__trust-icon {
    color: var(--dlp-accent);
    width: 20px; height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dlp-hero__trust-icon svg { width: 100%; height: 100%; }

/* ═════════════════════════════════════════════════════════════════════════
 * 4. SEARCH BAR — floating glass card
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-search {
    position: relative;
    margin-top: -64px;   /* overlap hero */
    margin-bottom: 24px;
    z-index: 5;
}

.dlp-search__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.dlp-search__card {
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--dlp-radius);
    box-shadow: var(--dlp-shadow-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dlp-search__form {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}

.dlp-search__field {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--dlp-line);
    border-radius: 999px;
    padding: 0 18px;
    transition: border-color .2s, box-shadow .2s;
}
.dlp-search__field:focus-within {
    border-color: var(--dlp-primary);
    box-shadow: 0 0 0 3px rgba(19, 78, 74, .12);
}

.dlp-search__icon {
    color: var(--dlp-primary);
    width: 18px; height: 18px;
    display: inline-flex;
    margin-right: 10px;
    flex-shrink: 0;
}
.dlp-search__icon svg { width: 100%; height: 100%; }

.dlp-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 14px 0;
    color: var(--dlp-ink);
    min-width: 0;
    font-family: inherit;
}
.dlp-search__input::placeholder { color: var(--dlp-muted); }

.dlp-search__submit {
    background: var(--dlp-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 14px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
    font-family: inherit;
}
.dlp-search__submit:hover { background: var(--dlp-primary-dark); }

.dlp-search__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dlp-search__chips::-webkit-scrollbar { display: none; }

.dlp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--dlp-line);
    border-radius: 999px;
    color: var(--dlp-ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    flex-shrink: 0;
    scroll-snap-align: start;
    font-family: inherit;
}
.dlp-chip:hover {
    border-color: var(--dlp-primary);
    color: var(--dlp-primary);
}
.dlp-chip__icon { width: 16px; height: 16px; color: var(--dlp-primary); display: inline-flex; }
.dlp-chip__icon svg { width: 100%; height: 100%; }
.dlp-chip--more { background: var(--dlp-bg-soft); }

/* ═════════════════════════════════════════════════════════════════════════
 * 5. SLIDER (shared)
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-slider {
    position: relative;
}
.dlp-slider .swiper { overflow: visible; }

.dlp-slider__nav {
    display: none;       /* mobile: hidden, swipe-only */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--dlp-line);
    color: var(--dlp-primary);
    cursor: pointer;
    z-index: 4;
    box-shadow: var(--dlp-shadow);
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, transform .2s;
    font-family: inherit;
}
.dlp-slider__nav svg { width: 18px; height: 18px; }
.dlp-slider__nav:hover { background: var(--dlp-primary); color: #fff; }
.dlp-slider__nav:disabled { opacity: .4; cursor: not-allowed; }
.dlp-slider__nav--prev { left: -22px; }
.dlp-slider__nav--next { right: -22px; }

.dlp-slider__dots {
    position: relative;
    text-align: center;
    margin-top: 16px;
}
.dlp-slider__dots .swiper-pagination-bullet {
    background: var(--dlp-muted);
    opacity: 1;
    width: 8px; height: 8px;
    margin: 0 4px !important;
    transition: width .25s var(--dlp-ease), background .25s var(--dlp-ease);
}
.dlp-slider__dots .swiper-pagination-bullet-active {
    background: var(--dlp-primary);
    width: 22px;
    border-radius: 4px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 6. DESTINATION CARD
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-card {
    background: var(--dlp-bg-card);
    border-radius: var(--dlp-radius);
    overflow: hidden;
    box-shadow: var(--dlp-shadow-sm);
    transition: transform .35s var(--dlp-ease), box-shadow .35s var(--dlp-ease);
    height: auto;
}
.dlp-card:hover { transform: translateY(-4px); box-shadow: var(--dlp-shadow); }

.dlp-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.dlp-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: #f3f4f6;
}
.dlp-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--dlp-ease);
}
.dlp-card:hover .dlp-card__media img { transform: scale(1.06); }

.dlp-card__pin {
    position: absolute;
    top: 10px; left: 10px;
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dlp-primary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dlp-card__pin svg { width: 14px; height: 14px; }

.dlp-card__body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.dlp-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--dlp-ink);
}

.dlp-card__loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--dlp-primary);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}
.dlp-card__loc svg { width: 12px; height: 12px; }

.dlp-card__desc {
    font-size: 13px;
    color: var(--dlp-ink-soft);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dlp-card__tag {
    align-self: flex-start;
    background: var(--dlp-accent);
    color: var(--dlp-ink);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    text-transform: capitalize;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 7. EXPERIENCE — icon cards
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-experience { background: #fdfdfb; }

.dlp-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 12px;
    background: var(--dlp-bg-card);
    border: 1px solid #f3eedd;
    border-radius: var(--dlp-radius);
    text-decoration: none;
    color: var(--dlp-ink);
    text-align: center;
    transition: transform .3s var(--dlp-ease), box-shadow .3s var(--dlp-ease);
    position: relative;
    height: auto;
    min-height: 130px;
    overflow: hidden;
}
.dlp-icon-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dlp-shadow);
}
.dlp-icon-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .12;
    z-index: 0;
}
.dlp-icon-card__icon {
    width: 36px; height: 36px;
    color: var(--dlp-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.dlp-icon-card__icon svg { width: 100%; height: 100%; }
.dlp-icon-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.dlp-icon-card__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 8. REGION CARD
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-region-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--dlp-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--dlp-ink);
    box-shadow: var(--dlp-shadow-sm);
    transition: transform .3s var(--dlp-ease), box-shadow .3s var(--dlp-ease);
    height: auto;
}
.dlp-region-card:hover { transform: translateY(-3px); box-shadow: var(--dlp-shadow); }

.dlp-region-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    background: #f3f4f6;
}
.dlp-region-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--dlp-ease);
}
.dlp-region-card:hover .dlp-region-card__media img { transform: scale(1.06); }

.dlp-region-card__body { padding: 14px; }

.dlp-region-card__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--dlp-ink);
    line-height: 1.2;
}
.dlp-region-card__desc {
    font-size: 12px;
    color: var(--dlp-ink-soft);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dlp-region-card__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--dlp-primary);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 9. STYLE CARD
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-style-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--dlp-ink);
    background: #fff;
    border-radius: var(--dlp-radius);
    overflow: hidden;
    box-shadow: var(--dlp-shadow-sm);
    transition: transform .3s var(--dlp-ease), box-shadow .3s var(--dlp-ease);
    height: auto;
}
.dlp-style-card:hover { transform: translateY(-3px); box-shadow: var(--dlp-shadow); }

.dlp-style-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
}
.dlp-style-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--dlp-ease);
}
.dlp-style-card:hover .dlp-style-card__media img { transform: scale(1.06); }

.dlp-style-card__pin {
    position: absolute;
    top: 8px; left: 8px;
    width: 26px; height: 26px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dlp-primary);
}
.dlp-style-card__pin svg { width: 12px; height: 12px; }

.dlp-style-card__title {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px 16px;
    margin: 0;
    line-height: 1.3;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 10. ACTIVITY CARD — wide image with overlay
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-activity-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--dlp-radius);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: var(--dlp-shadow-sm);
    transition: transform .3s var(--dlp-ease), box-shadow .3s var(--dlp-ease);
    height: auto;
}
.dlp-activity-card:hover { transform: translateY(-3px); box-shadow: var(--dlp-shadow); }

.dlp-activity-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--dlp-ease);
}
.dlp-activity-card:hover img { transform: scale(1.04); }

.dlp-activity-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(160, 158, 158, 0.55) 70%, rgba(131, 125, 125, 0.75) 100%);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}
.dlp-activity-card__sub {
    font-size: 10px;
    font-style: italic;
    opacity: .85;
    line-height: 1.3;
}
.dlp-activity-card__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 11. SEASON — split cards
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-season-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.dlp-season-card {
    position: relative;
    border-radius: var(--dlp-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: 220px;
    isolation: isolate;
}
.dlp-season-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(10, 46, 42, .9) 0%, rgba(13, 58, 53, .55) 60%, rgba(13, 58, 53, .15) 100%);
    z-index: 1;
}
.dlp-season-card__content {
    position: relative;
    z-index: 2;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 220px;
}
.dlp-season-card__title {
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.15;
}
.dlp-season-card__desc {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .9);
    max-width: 380px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 12. JOURNEY CARD
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-journey-card {
    background: #fff;
    border-radius: var(--dlp-radius);
    overflow: hidden;
    box-shadow: var(--dlp-shadow-sm);
    transition: transform .3s var(--dlp-ease), box-shadow .3s var(--dlp-ease);
    height: auto;
}
.dlp-journey-card:hover { transform: translateY(-3px); box-shadow: var(--dlp-shadow); }

.dlp-journey-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.dlp-journey-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
}
.dlp-journey-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--dlp-ease);
}
.dlp-journey-card:hover .dlp-journey-card__media img { transform: scale(1.05); }

.dlp-journey-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(19, 78, 74, .92);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.dlp-journey-card__pin {
    position: absolute;
    top: 10px; right: 10px;
    width: 26px; height: 26px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dlp-primary);
}
.dlp-journey-card__pin svg { width: 12px; height: 12px; }

.dlp-journey-card__body { padding: 14px; }

.dlp-journey-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--dlp-ink);
    line-height: 1.25;
}
.dlp-journey-card__route {
    font-size: 12px;
    color: var(--dlp-ink-soft);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dlp-journey-card__price {
    font-size: 12px;
    color: var(--dlp-ink-soft);
    margin: 0;
}
.dlp-journey-card__price strong {
    color: var(--dlp-primary);
    font-size: 14px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 13. WHY EXPLORE — feature grid
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-why { background: var(--dlp-bg-card); }

.dlp-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.dlp-why-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    background: transparent;
    border-radius: var(--dlp-radius);
}

.dlp-why-card__icon {
    width: 44px; height: 44px;
    background: var(--dlp-primary);
    color: var(--dlp-accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dlp-why-card__icon svg { width: 22px; height: 22px; }

.dlp-why-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--dlp-ink);
    line-height: 1.25;
}

.dlp-why-card__desc {
    font-size: 13px;
    color: var(--dlp-ink-soft);
    margin: 0;
    line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 14. FINAL CTA
 * ═════════════════════════════════════════════════════════════════════════ */

.dlp-final-cta {
    position: relative;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    margin: 24px 16px;
    border-radius: var(--dlp-radius-lg);
}

.dlp-final-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.dlp-final-cta__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center right;
}
.dlp-final-cta__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(10, 46, 42, .95) 0%, rgba(13, 58, 53, .85) 50%, rgba(19, 78, 74, .35) 100%);
}

.dlp-final-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 20px;
    align-items: flex-start;
}

.dlp-final-cta__label {
    color: var(--dlp-accent);
    font-style: italic;
    font-size: 14px;
    margin-bottom: 6px;
    display: inline-block;
}

.dlp-final-cta__title {
    font-size: clamp(22px, 4.5vw, 32px);
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.15;
    color: #fff;
}

.dlp-final-cta__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 15. RESPONSIVE — TABLET (≥ 640px)
 * ═════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .dlp-section { padding: 64px 0; }
    .dlp-section__inner { padding: 0 24px; }

    .dlp-hero { min-height: 540px; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }
    .dlp-hero__inner { padding: 96px 24px 140px; }

    .dlp-search__inner { padding: 0 24px; }
    .dlp-search__card { padding: 20px; }
    .dlp-search__form { flex-wrap: nowrap; }

    .dlp-season-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

    .dlp-why__grid { grid-template-columns: 1fr 1fr; gap: 20px; }

    .dlp-final-cta { margin: 32px 24px; }
    .dlp-final-cta__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 48px 40px;
    }
    .dlp-final-cta__action { flex-shrink: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 16. RESPONSIVE — DESKTOP (≥ 1024px)
 * ═════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .dlp-section { padding: 80px 0; }
    .dlp-section__inner { padding: 0 32px; }

    .dlp-hero { min-height: 620px; }
    .dlp-hero__inner { padding: 120px 32px 160px; }

    .dlp-section__head { margin-bottom: 28px; }

    .dlp-search__inner { padding: 0 32px; }
    .dlp-search { margin-top: -80px; }

    /* show desktop slider arrows */
    .dlp-slider__nav { display: inline-flex; }

    /* tighter slide gutters look better on desktop */
    .dlp-slider .swiper-wrapper { align-items: stretch; }

    .dlp-why__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }

    .dlp-final-cta__inner { padding: 56px 56px; }
}

@media (min-width: 1280px) {
    .dlp-hero__title { font-size: 60px; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 17. ACCESSIBILITY — reduced motion
 * ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .dlp-main *,
    .dlp-main *::before,
    .dlp-main *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Respect existing global focus styles where possible */
.dlp-main a:focus-visible,
.dlp-main button:focus-visible,
.dlp-main input:focus-visible {
    outline: 2px solid var(--dlp-accent);
    outline-offset: 2px;
    border-radius: 6px;
}
/* ─────────────────────────────────────────────────────────────────────────
 *  DLP — Pre-init / no-JS fallback hardening
 *  Append to the END of /assets/css/pages/template-destinations.css
 *
 *  WHY: Until Swiper.js initializes, .swiper-slide elements are plain
 *  block divs that stretch to 100% width. These rules give them
 *  reasonable widths so the page never looks "huge / collapsed",
 *  even if JS fails or hasn't loaded yet.
 * ───────────────────────────────────────────────────────────────────────── */

/* Default: any swiper container hides overflow until init                 */
.dlp-section .swiper {
    overflow-x: hidden;
}

/* Until Swiper sets `.swiper-initialized`, lay slides side-by-side
   using simple flex-wrap. Once Swiper inits, it overrides these.          */
.dlp-section .swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.dlp-section .swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Per-section pre-init slide widths (mobile-first) */
.dlp-section .swiper:not(.swiper-initialized) .swiper-slide {
    width: 78%;            /* default fallback width on mobile */
    max-width: 320px;
}

@media (min-width: 640px) {
    .dlp-section .swiper:not(.swiper-initialized) .swiper-slide {
        width: 44%;
        max-width: 360px;
    }
}

@media (min-width: 1024px) {
    .dlp-section .swiper:not(.swiper-initialized) .swiper-slide {
        width: 22%;
        max-width: 320px;
    }
}

/* The activity cards are wide 16:9 so override                             */
.dlp-explore-by-activities .swiper:not(.swiper-initialized) .swiper-slide {
    width: 86%;
    max-width: 520px;
}
@media (min-width: 1024px) {
    .dlp-explore-by-activities .swiper:not(.swiper-initialized) .swiper-slide {
        width: 32%;
        max-width: 480px;
    }
}

/* Season cards = side-by-side grid even without Swiper                     */
.dlp-where-to-travel .dlp-season-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .dlp-where-to-travel .dlp-season-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Hide pre-init nav arrows so they don't flash unstyled                    */
.dlp-section .swiper:not(.swiper-initialized) .swiper-button-next,
.dlp-section .swiper:not(.swiper-initialized) .swiper-button-prev,
.dlp-section .swiper:not(.swiper-initialized) .swiper-pagination {
    visibility: hidden;
}
/* ═════════════════════════════════════════════════════════════════════════
 * TOURWILL — DESTINATIONS LANDING PAGE — DESIGN POLISH OVERRIDES
 * Append this entire block to the END of:
 *   /assets/css/pages/template-destinations.css
 *
 * Fixes the following issues (loaded last so they win specificity):
 *   • Issue 2 — Hero eyebrow hidden under nav on small windows
 *   • Issue 3 — "Explore Now" buttons too long / inconsistent + black titles on season cards
 *   • Issue 4 — Section titles look flat / boring
 *   • Issue 5 — Search "More" chip cut off on desktop
 *   • Issue 6 — Sections feel too far apart on desktop
 *   • Bonus  — Uploaded experience icons now inherit theme color
 * ═════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
 * FIX 2 — Hero clears the fixed nav bar on smaller windows
 * Add a generous top padding so the eyebrow never sits beneath nav.
 * Adjust --dlp-nav-height once if your real nav is a different size.
 * ───────────────────────────────────────────────────────────────────── */
:root {
    --dlp-nav-height: 88px; /* set to your sticky/fixed nav height */
}

.dlp-hero {
    /* Ensure the hero container is at least tall enough to fit nav + content */
    min-height: calc(520px + var(--dlp-nav-height) - 80px);
}

.dlp-hero__inner {
    /* Push hero content below the nav on every breakpoint */
    padding-top: calc(72px + var(--dlp-nav-height));
}

@media (min-width: 640px) {
    .dlp-hero__inner {
        padding-top: calc(80px + var(--dlp-nav-height));
    }
}

@media (min-width: 1024px) {
    .dlp-hero__inner {
        padding-top: calc(96px + var(--dlp-nav-height));
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * FIX 4 — Section titles get warmth + a thin gold accent underline
 * Uses the brand teal instead of near-black, with a subtle gradient
 * underline on the first H2 word for visual interest.
 * ───────────────────────────────────────────────────────────────────── */
.dlp-section__title {
    color: var(--dlp-primary);                /* warm teal instead of cold ink */
    letter-spacing: -0.015em;
    background: linear-gradient(180deg, var(--dlp-primary) 0%, #0a3a36 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

/* Soft gold underline accent under each section title */
.dlp-section__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 3px;
    width: 40px;
    background: linear-gradient(90deg, var(--dlp-accent) 0%, transparent 100%);
    border-radius: 2px;
}

/* Eyebrow gets slightly more weight to stand alongside the new title */
.dlp-section__eyebrow {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-style: normal;
}


/* ─────────────────────────────────────────────────────────────────────
 * FIX 5 — Search bar chips never get cut off
 * Mobile: keep horizontal scroll (works well, fingers-friendly)
 * Tablet+: wrap to multiple rows so all chips are always visible
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .dlp-search__chips {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        padding: 4px 0 0;
    }
    /* Push the More chip to the end of its row */
    .dlp-chip--more {
        margin-left: auto;
    }
}

/* Even on mobile, give the rail a small right-padding so the
   last chip ("More") is fully visible before the scroll area edge */
.dlp-search__chips {
    padding-right: 16px;
}


/* ─────────────────────────────────────────────────────────────────────
 * FIX 6 — Tighter rhythm between sections on desktop
 * Mobile spacing was correct; only large screens were too generous.
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .dlp-section { padding: 52px 0; }
}

@media (min-width: 1024px) {
    .dlp-section { padding: 60px 0; }
    .dlp-section__head { margin-bottom: 24px; }
}

@media (min-width: 1280px) {
    .dlp-section { padding: 64px 0; }
}


/* ─────────────────────────────────────────────────────────────────────
 * FIX 1 — Cards on the "small" sections feel right-sized on desktop
 * The JS already controls slidesPerView, but we add CSS minimums so
 * cards never feel cramped at any container width.
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    /* Experience icon cards a bit roomier */
    .dlp-icon-card { min-height: 150px; padding: 22px 14px; }
    .dlp-icon-card__icon { width: 44px; height: 44px; }
    .dlp-icon-card__title { font-size: 14px; }

    /* Region & style cards — slightly larger title/text */
    .dlp-region-card__title { font-size: 17px; }
    .dlp-region-card__body { padding: 16px 18px 18px; }

    .dlp-style-card__title { font-size: 15px; padding: 14px 16px 18px; }

    /* Activity overlay text larger */
    .dlp-activity-card__title { font-size: 16px; }
    .dlp-activity-card__sub { font-size: 11px; }
}


/* ─────────────────────────────────────────────────────────────────────
 * FIX 3a — Season "Explore Now" button = compact + consistent
 * Uses an accent-coloured pill that matches the primary CTA system
 * but stays small, so it doesn't overflow on shorter cards.
 * ───────────────────────────────────────────────────────────────────── */
.dlp-season-card .dlp-btn {
    align-self: flex-start;
    padding: 9px 16px;
    font-size: 13px;
    background: var(--dlp-accent);
    color: var(--dlp-ink);
    border: 0;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(234, 179, 8, .35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    white-space: nowrap;
    max-width: max-content;
    min-width: 0;
}

.dlp-season-card .dlp-btn:hover {
    background: var(--dlp-accent-dark);
    color: var(--dlp-ink);
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(234, 179, 8, .45);
    transform: translateY(-1px);
}


/* ─────────────────────────────────────────────────────────────────────
 * FIX 3b — Season card titles always readable
 * Stronger overlay + explicit white text + soft shadow.
 * Some bright photos were leaking through the gradient.
 * ───────────────────────────────────────────────────────────────────── */
.dlp-season-card__overlay {
    background: linear-gradient(115deg,
        rgba(10, 46, 42, 0.92) 0%,
        rgba(13, 58, 53, 0.72) 50%,
        rgba(13, 58, 53, 0.45) 100%);
}

.dlp-season-card__title,
.dlp-season-card__desc {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}


/* ─────────────────────────────────────────────────────────────────────
 * BONUS — Uploaded experience icons now inherit the theme color
 *
 * Two approaches in one rule:
 *   • If the template uses the new "icon as CSS mask" markup (recommended),
 *     this rule colors the icon teal automatically.
 *   • Falls back gracefully for plain <img> usage.
 *
 * To enable: see Step 3 in the FIX-GUIDE.md (1-line PHP edit).
 * ───────────────────────────────────────────────────────────────────── */

/* CSS-mask version (preferred) — uses --dlp-icon-url custom property */
.dlp-icon-card__icon[data-icon] {
    background-color: var(--dlp-primary);
    -webkit-mask-image: var(--dlp-icon-url, none);
            mask-image: var(--dlp-icon-url, none);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

.dlp-icon-card:hover .dlp-icon-card__icon[data-icon] {
    background-color: var(--dlp-accent-dark);
}

/* Hide the inner <img> when mask is in use; the mask provides the shape */
.dlp-icon-card__icon[data-icon] img,
.dlp-icon-card__icon[data-icon] svg {
    display: none;
}

/* Final CTA buttons get a tiny lift — they were a bit small on desktop */
@media (min-width: 1024px) {
    .dlp-final-cta__action .dlp-btn--lg {
        padding: 18px 32px;
        font-size: 16px;
    }
}