/* Shared clay surfaces for content sections and cards. */
:root {
    --heading-violet: linear-gradient(180deg, #604284 0%, #442766 48%, #321b50 100%);
    --heading-violet-shadow: 0 2px 5px rgba(49, 27, 77, 0.2), 0 0 14px rgba(82, 57, 112, 0.14);
    --clay-face: #f5eee5;
    --clay-face-light: #fbf8f3;
    --clay-edge: rgba(255, 255, 255, 0.82);
    --clay-raised-shadow:
        9px 9px 20px rgba(113, 87, 61, 0.14),
        -8px -8px 20px rgba(255, 255, 255, 0.88),
        inset 1px 1px 0 rgba(255, 255, 255, 0.78);
    --clay-inset-shadow:
        inset 5px 5px 12px rgba(113, 87, 61, 0.08),
        inset -5px -5px 12px rgba(255, 255, 255, 0.78);
}

[data-theme="dark"] {
    --heading-violet: linear-gradient(180deg, #f5e9ff 0%, #e8d5ff 52%, #c4b5fd 100%);
    --heading-violet-shadow: 0 2px 8px rgba(15, 23, 42, 0.48), 0 0 16px rgba(196, 181, 253, 0.16);
    --clay-face: #202b39;
    --clay-face-light: #263548;
    --clay-edge: rgba(255, 255, 255, 0.08);
    --clay-raised-shadow:
        9px 9px 20px rgba(0, 0, 0, 0.28),
        -8px -8px 20px rgba(255, 255, 255, 0.035),
        inset 1px 1px 0 rgba(255, 255, 255, 0.045);
    --clay-inset-shadow:
        inset 5px 5px 12px rgba(0, 0, 0, 0.2),
        inset -5px -5px 12px rgba(255, 255, 255, 0.025);
}

/* Keep headings readable on the dark clay surfaces used in dark mode. */
[data-theme="dark"] :is(
    .section-header,
    .section-title,
    section.guide-section:not(.nearby-highlight):not(.landscape-intro):not(.photo-gallery):not(.landscape-cta),
    .card,
    .attraction-card,
    .info-card,
    .info-item,
    .photo-card,
    .nearby-card,
    .blog-card,
    .featured-post,
    .highlight-card,
    .diversity-card,
    .craft-card,
    .timeline-card,
    .mission-panel,
    .team-card,
    .dashboard-panel,
    .cr-card,
    .cr-panel,
    .agoda-destination-card,
    section.section:not(.home-booking-banner):not(.booking-highlight-banner)
) :is(h1, h2, h3, h4, h5, h6) {
    background: none !important;
    -webkit-text-fill-color: #f3e8ff !important;
    color: #f3e8ff !important;
    text-shadow: 0 1px 8px rgba(15, 23, 42, 0.42) !important;
}

section.section:not(.home-booking-banner):not(.booking-highlight-banner),
section.guide-section:not(.nearby-highlight):not(.landscape-intro):not(.photo-gallery):not(.landscape-cta),
section.about-section,
section.cr-section,
.glass-panel,
.agoda-stay-section {
    background-color: var(--clay-face) !important;
    border: 1px solid var(--clay-edge) !important;
    border-radius: 1.6rem !important;
    box-shadow: var(--clay-raised-shadow) !important;
}

.card,
.attraction-card,
.info-card,
.info-item,
.photo-card,
.nearby-card,
.blog-card,
.featured-post,
.highlight-card,
.diversity-card,
.craft-card,
.timeline-card,
.mission-panel,
.team-card,
.dashboard-panel,
.cr-card,
.cr-panel,
.agoda-destination-card {
    background-color: var(--clay-face-light) !important;
    border: 1px solid var(--clay-edge) !important;
    border-radius: 1.35rem !important;
    box-shadow: var(--clay-raised-shadow) !important;
}

#destinations .card {
    border-color: var(--clay-edge) !important;
    box-shadow: var(--clay-raised-shadow) !important;
}

#destinations .card:hover,
.card:hover,
.attraction-card:hover,
.photo-card:hover,
.nearby-card:hover,
.blog-card:hover {
    box-shadow:
        12px 12px 24px rgba(113, 87, 61, 0.16),
        -8px -8px 20px rgba(255, 255, 255, 0.9),
        inset 1px 1px 0 rgba(255, 255, 255, 0.82) !important;
}

[data-theme="dark"] #destinations .card:hover,
[data-theme="dark"] .card:hover,
[data-theme="dark"] .attraction-card:hover,
[data-theme="dark"] .photo-card:hover,
[data-theme="dark"] .nearby-card:hover,
[data-theme="dark"] .blog-card:hover {
    box-shadow:
        12px 12px 24px rgba(0, 0, 0, 0.34),
        -8px -8px 20px rgba(255, 255, 255, 0.045),
        inset 1px 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.section-header,
.section-title {
    padding: 1.15rem 1.4rem;
    border: 1px solid var(--clay-edge);
    border-radius: 1.25rem;
    background: var(--clay-face);
    box-shadow: var(--clay-inset-shadow);
}

@media (max-width: 640px) {
    section.section:not(.home-booking-banner):not(.booking-highlight-banner),
    section.guide-section:not(.nearby-highlight):not(.landscape-intro):not(.photo-gallery):not(.landscape-cta),
    section.about-section,
    section.cr-section,
    .glass-panel,
    .agoda-stay-section {
        border-radius: 1.25rem !important;
    }

    .section-header,
    .section-title {
        padding: 0.9rem 1rem;
        border-radius: 1rem;
    }
}