/* Public-blog theme. Imports the admin stylesheet so cards/typography
   match, then layers public-only overrides (FAQ accordion, pagination,
   article body type scale). */

@import url("./style.css");

.wrap { display: block; }
.wrap > header h1 { margin-top: 0; }
.archive-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.archive-list li.card { padding: 18px; }
.archive-card-thumb {
    display: block;
    margin: -2px -2px 14px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #eef3f8 0%, #e2ecf9 100%);
}
.archive-card-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}
.archive-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}
.archive-card-actions .cta-button-booking,
.archive-card-actions .cta-button-secondary {
    margin: 0;
}
.archive-card-proof {
    display: flex;
    margin: 8px 0 0;
}
.archive-meta .qa-pill { font-size: 12px; }
.qa-pill {
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.archive-meta,
.related-posts p,
.post-byline,
.muted {
    line-height: 1.45;
}

.breadcrumb-inline {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 6px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.archive-hero-trust {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}
.trust-stars {
    color: #f5a623;
    letter-spacing: 0.04em;
}
/* Percentage-fill star rating: gold overlay on grey base, width = rating/5*100% */
.trust-stars-wrap {
    position: relative;
    display: inline-block;
    letter-spacing: 0.04em;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
.trust-stars-base {
    color: #ccc;
    display: inline-block;
}
.trust-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f5a623;
    white-space: nowrap;
    display: inline-block;
}
/* ---- Archive hero ---- */
.archive-hero {
    margin-bottom: 22px;
}
.archive-hero h1 {
    margin-bottom: 8px;
    font-size: clamp(1.7rem, 3.4vw, 2.15rem);
}
.archive-hero-lead {
    max-width: 62ch;
    margin: 0 0 12px;
    color: var(--text-sec);
    font-size: 1.05rem;
    line-height: 1.6;
}
.archive-hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
    font-size: 0.95rem;
}
.archive-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
}
.archive-hero-rating:hover .muted { text-decoration: underline; }
.archive-hero-count {
    color: var(--muted);
    font-size: 0.88rem;
}

/* ---- Trust strip (page 1) ---- */
.archive-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}
.archive-strip-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-sec);
    font-size: 0.9rem;
    line-height: 1.4;
}
.archive-strip-icon {
    flex: 0 0 auto;
    color: var(--success, #10b981);
    font-weight: 700;
}

/* ---- Filter chips ---- */
.archive-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
}
.archive-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.archive-filter-label {
    flex: 0 0 auto;
    min-width: 44px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.archive-chip {
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-sec);
    padding: 6px 14px;
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.archive-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.archive-chip.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.archive-filter-empty {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--muted);
}

/* ---- Badges + location pills ---- */
.archive-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}
.archive-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.archive-badge-featured {
    background: var(--brand);
    color: #fff;
}
.archive-badge-bofu {
    background: var(--brand-light, #eff6ff);
    color: var(--brand-dark, #1d4ed8);
}
.archive-badge-mofu {
    background: #fef3c7;
    color: #92400e;
}
.archive-badge-tofu {
    background: #dcfce7;
    color: #166534;
}
.archive-badge-faq {
    background: #f3e8ff;
    color: #6b21a8;
}
.archive-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* ---- Featured spotlight card ---- */
.archive-featured {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    overflow: hidden;
    margin: 0 0 18px;
}
.archive-featured-thumb {
    display: block;
    min-height: 100%;
    background: linear-gradient(135deg, #eef3f8 0%, #e2ecf9 100%);
}
.archive-featured-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}
.archive-featured-body {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
}
.archive-featured-body h2 {
    margin: 0 0 8px;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    line-height: 1.25;
}
.archive-featured-body h2 a { color: var(--text); }
.archive-featured-body h2 a:hover { color: var(--brand); }

/* ---- Post grid ---- */
.archive-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
}
.archive-grid-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.archive-grid-card:hover {
    box-shadow: 0 8px 24px rgba(14, 28, 46, 0.1);
    transform: translateY(-2px);
}
.archive-grid-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 16px 18px 18px;
}
.archive-grid-card h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    line-height: 1.3;
}
.archive-grid-card h2 a { color: var(--text); }
.archive-grid-card h2 a:hover { color: var(--brand); }
.archive-card-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}
.archive-card-date {
    color: var(--muted);
    font-size: 0.82rem;
}
.js-archive-card.is-hidden { display: none; }

/* Graceful thumbnail fallback: when a photo fails to load (e.g. an
   unsynced media stub), the wrapper keeps its footprint and shows a
   subtle brand gradient instead of a broken-image icon. */
.archive-card-thumb.is-broken,
.archive-featured-thumb.is-broken,
.archive-conversion-thumb.is-broken {
    position: relative;
    background: linear-gradient(135deg, var(--brand-light, #eff6ff) 0%, #e2ecf9 100%);
}
.archive-card-thumb.is-broken { aspect-ratio: 16 / 7; }
.archive-conversion-thumb.is-broken { aspect-ratio: 3 / 2; }
.archive-featured-thumb.is-broken { min-height: 240px; }
.archive-card-thumb.is-broken::after,
.archive-featured-thumb.is-broken::after,
.archive-conversion-thumb.is-broken::after {
    content: "";
    position: absolute;
    inset: 0;
    background: no-repeat center / 40px 40px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-opacity='0.35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.35-9.5-8.5A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6.5C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
    opacity: 0.8;
}

/* ---- Popular departures rail ---- */
.archive-conversion {
    margin: 0 0 30px;
}
.archive-conversion-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.archive-conversion h2 {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}
.archive-rating-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.archive-conversion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.archive-conversion-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.archive-conversion-card:hover {
    box-shadow: 0 8px 24px rgba(14, 28, 46, 0.1);
    transform: translateY(-2px);
}
.archive-conversion-thumb {
    display: block;
    background: linear-gradient(135deg, #eef3f8 0%, #e2ecf9 100%);
}
.archive-conversion-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.archive-conversion-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
}
.archive-conversion-card h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.3;
}
.archive-conversion-title {
    color: var(--text);
    text-decoration: none;
}
.archive-conversion-title:hover {
    color: var(--brand);
    text-decoration: underline;
}
.archive-conversion-place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
}
.archive-conversion-card .cta-button-booking {
    margin-top: auto;
    text-align: center;
    display: block;
    width: 100%;
}
/* Placeholder header for departure cards with no resolved hero photo, so the
   rail reads as a complete set of cards instead of empty white boxes. */
.archive-conversion-thumb--placeholder {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 2;
    padding: 12px 14px;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
}
.archive-conversion-thumb--placeholder .archive-conversion-thumb__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

article.card { font-size: 1.05rem; }
article.card h1 { margin-top: 0; }
article.card h2 { margin-top: 1.5em; }
article.card a { text-decoration: underline; }

.cta-button-booking {
    display: inline-block;
    background: var(--brand);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff) 0%, var(--brand) 55%, var(--brand-dark) 100%);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none !important;
    margin: 8px 0;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.cta-button-booking:hover {
    background-color: var(--brand-dark);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.cta-button-booking:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* FAQ accordion */
.faq-block h2 { margin-top: 0; }
.faq-item {
    border-top: 1px solid var(--border);
    padding: 12px 0;
}
.faq-item:first-of-type { border-top: none; }
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    padding: 6px 24px 6px 0;
    position: relative;
    color: var(--text);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 6px;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--muted);
    transition: transform var(--duration) var(--ease);
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item .faq-answer { color: var(--text); padding: 4px 0 8px; }
.faq-item .faq-answer p:first-child { margin-top: 4px; }

/* Pagination */
.archive-pagination a {
    text-decoration: none;
    font-weight: 600;
}
.archive-pagination a:hover { text-decoration: underline; }

/* Skip-link for keyboard users (WCAG 2.4.1). Hidden until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-sm);
    z-index: 9999;
    box-shadow: var(--shadow-md);
}

/* Visible focus ring for keyboard navigation (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
.faq-item > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Related posts module. */
.related-posts {
    margin-top: 32px;
    padding: 20px;
}
.related-posts h2 { margin: 0 0 8px; }
.related-posts__lead {
    color: var(--muted);
    font-size: 15px;
    margin: 0 0 16px;
}
.related-posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.related-posts li {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fbfcfe;
}
.related-posts li a {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.related-posts li a:hover { color: var(--brand); text-decoration: underline; }
.related-posts li p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

/* Article byline + reading time. */
.post-byline {
    color: var(--muted);
    font-size: 14px;
    margin: 8px 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.post-byline .byline-author { font-weight: 600; color: var(--text); }
.post-byline .byline-author a { color: inherit; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* TL;DR summary block for AI overview eligibility. */
.post-summary {
    margin: 16px 0 24px;
    padding: 14px 18px;
    background: var(--brand-light);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-sm);
}
.post-summary strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-dark); margin-bottom: 4px; }
.post-summary p { margin: 0; color: var(--text); }

.booking-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: -8px 0 18px;
    padding: 15px 18px;
    background: var(--brand-light, #eff6ff);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--brand-light, #eff6ff) 40%, #fff) 0%, var(--brand-light, #eff6ff) 100%);
    border: 1px solid var(--border);
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.booking-strip-copy strong { font-size: 1.02rem; }
.booking-strip-copy {
    display: grid;
    gap: 2px;
}
.booking-strip-copy strong {
    line-height: 1.25;
}
.booking-strip-copy span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}
.booking-strip-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid #e7c46f;
    border-radius: var(--radius-sm);
    background: #fff8e8;
    color: #5c4300 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-decoration: none !important;
    white-space: normal;
}
.trust-chip:hover {
    background: #fff1cc;
}
.trust-chip-alt {
    border-color: var(--border);
    background: #f7fbff;
    color: var(--brand-dark) !important;
}
.trust-chip-alt:hover {
    background: var(--brand-light);
}
.trust-chip-muted {
    color: var(--muted);
    font-weight: 600;
}
.trust-chip-price {
    border-color: var(--border);
    background: #f1f6fb;
    color: var(--text) !important;
}
.booking-strip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.booking-strip .cta-button-booking,
.booking-strip .cta-button-secondary {
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .booking-strip {
        align-items: stretch;
        flex-direction: column;
    }
    .booking-strip-actions {
        justify-content: stretch;
    }
    .booking-strip-actions a,
    .archive-card-actions a,
    .book-cta-actions a {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Archive: collapse featured + 2-col grid on tablet/phone. */
@media (max-width: 720px) {
    .archive-featured {
        grid-template-columns: 1fr;
    }
    .archive-featured-thumb img {
        min-height: 0;
        aspect-ratio: 16 / 8;
        height: auto;
    }
    .archive-grid {
        grid-template-columns: 1fr;
    }
    .archive-conversion-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
@media (max-width: 640px) {
    .archive-card-actions a {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }
    .archive-strip {
        flex-direction: column;
        gap: 8px;
    }
}

/* Booking + review-platform CTA card. Rendered between the article body
   and the FAQ when at least one real booking/review URL is resolved. */
.book-cta {
    margin-top: 24px;
    padding: 20px;
}
.book-cta h2 { margin-top: 0; }
.book-cta-lead { margin: 4px 0 16px; }
.book-cta-proof {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: var(--brand-light, #f3f6ff);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text, #111) !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.3;
}
.book-cta-proof:hover { background: #fff; }
.book-cta-proof__star { color: #f5a524; }
.book-cta-proof__source { color: var(--muted); }
.book-cta-proof__count { color: var(--muted); font-size: 13px; }
.book-cta-primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0 0 18px;
}
.book-cta-primary .cta-sub {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}
/* Point-of-action reassurance under the primary booking button. */
.book-cta-assurance {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 6px;
}
.book-cta-assurance li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-sec);
    font-size: 0.9rem;
    line-height: 1.4;
}
.book-cta-assurance__tick {
    flex: 0 0 auto;
    color: var(--success, #10b981);
    font-weight: 700;
}
.cta-button-booking--large {
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-size: 1.05rem;
    line-height: 1.25;
}
.book-cta-compare {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.book-cta-compare__label {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}
.book-cta-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.book-cta-actions li {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.book-cta-actions li > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.book-cta-actions .cta-sub {
    font-size: 13px;
    color: var(--muted);
}

/* Compact repeat-CTA strip rendered after related guides so readers who
   scrolled past the main booking card get a second conversion prompt. */
.book-cta-repeat {
    margin: 24px 0 8px;
    background: #fff;
    background-image: none;
    border-left-width: 1px;
}
.book-cta-repeat .booking-strip-copy strong { font-size: 1.05rem; }

/* Photo gallery: cap visible thumbnails; remainder lives in a <details>
   expander so the gallery doesn't push the booking CTA below the fold. */
.gallery-more {
    margin-top: 14px;
}
.gallery-more > summary {
    cursor: pointer;
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    color: var(--brand-dark);
    font-weight: 600;
    list-style: none;
}
.gallery-more > summary::-webkit-details-marker { display: none; }
.gallery-more > summary:hover { background: var(--brand-light, #f3f6ff); }
.gallery-more[open] > summary { margin-bottom: 4px; }

/* Mobile-only sticky booking bar. Fixed to the viewport bottom so the
   primary booking action is one tap away during long scrolls. Hidden on
   desktop; body gets extra padding-bottom on mobile so the bar can't
   cover the last content line. */
.sticky-mobile-cta { display: none; }
@media (max-width: 640px) {
    .sticky-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
        z-index: 50;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    .sticky-mobile-cta {
        flex-wrap: wrap;
        align-items: center;
    }
    .sticky-mobile-cta > a {
        flex: 1 1 0;
        padding: 12px 10px;
        text-align: center;
        white-space: nowrap;
    }
    .sticky-mobile-cta__price {
        flex: 1 1 100%;
        text-align: center;
        font-size: 0.86rem;
        color: var(--text-sec);
        line-height: 1.2;
    }
    .sticky-mobile-cta__price strong { color: var(--text); }
    .sticky-mobile-cta__price-unit { color: var(--muted); }
    body { padding-bottom: 96px; }
}

/* Lead capture form. Embedded under the booking CTA on blog posts and
   on the marketing site, so first-party enquiries are captured without
   pushing readers to an external contact form. */
.lead-form-card {
    margin-top: 24px;
    padding: 24px;
}
.lead-form-card h2 { margin: 0 0 6px; }
.lead-form-lead { margin: 0 0 16px; }
.lead-form { display: grid; gap: 12px; }
.lead-form-field input::placeholder,
.lead-form-field textarea::placeholder { color: var(--muted); }
.lead-form-row--split {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) {
    .lead-form-row--split { grid-template-columns: 1fr; }
}
.lead-form-field { display: grid; gap: 4px; font-size: 14px; }
.lead-form-field > span { font-weight: 600; }
.lead-form-field input,
.lead-form-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
}
.lead-form-field textarea { resize: vertical; min-height: 96px; }
.lead-form-field input:focus,
.lead-form-field textarea:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}
.lead-form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.lead-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.lead-form-fineprint { font-size: 13px; }
.lead-form-success {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #e7f4ec;
    border: 1px solid #95c8a8;
    border-radius: var(--radius-sm);
    color: #1f5b35;
}

.cta-button-secondary {
    display: inline-block;
    background: #fff;
    color: var(--brand-dark) !important;
    border: 1px solid var(--brand);
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.cta-button-secondary:hover {
    background: var(--brand-light);
    border-color: var(--brand-dark);
}
.trust-row {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.trust-row .trust-label {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.trust-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.trust-links a {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-dark);
}
.trust-links a:hover { text-decoration: underline; }

/* Reduce-motion users get instant transitions */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* External / new-tab link affordance. Any link that opens in a new tab
   (target="_blank") gets a small external-link icon so readers know the click
   leaves the site — important for trust on outbound booking/review links
   (Viator, TripAdvisor, direct-booking site). The icon is drawn with a mask
   filled by currentColor, so it inherits the link's colour and reads correctly
   on both coloured text links and white-on-brand buttons. Image/thumbnail
   links opt out with .no-newtab-icon. This stylesheet is public-blog only. */
a[target="_blank"]:not(.no-newtab-icon)::after {
    content: "";
    display: inline-block;
    width: 0.68em;
    height: 0.68em;
    margin-left: 0.3em;
    vertical-align: -0.03em;
    background-color: currentColor;
    opacity: 0.72;
    flex: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}