/* Landing page section boundaries.

   Destinations, packages and events had no background of their own, so they ran
   together as one long block. Sections now alternate between the page tint and
   white, and each is a rounded "sheet" that slides over the bottom of the one
   before it, with a soft shadow along its top edge. The overlap comes out of the
   previous section's own bottom padding, so no content moves and spacing inside
   each section is unchanged. */

:root { --sheet-radius: 32px; }

.landing-section {
    position: relative;
    margin-top: calc(var(--sheet-radius) * -1);
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    box-shadow: 0 -14px 32px rgba(16, 40, 30, .07);
}

.landing-section--tint { background: var(--bg); }
.landing-section--white { background: var(--white); }

/* The first section after the hero starts on a straight edge: the scroll cue sits at the foot of the hero
   block, and a sheet sliding up over it would cover it. */
.poster-hero + .landing-section,
.hero-screen + .landing-section {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 640px) {
    :root { --sheet-radius: 22px; }
}

.landing-section--cream { background: #f7f1e8; }

/* Tourism marks replace the former orange official badge. */
.hero-tourism-brands {
    position: relative;
    z-index: 6;
    width: 270px;
    margin: 0 auto 20px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
}
.hero-tourism-brands img { display: block; object-fit: contain; width: 100%; height: auto; }
.hero-tourism-brands .hero-tourism-brands__davao { width: 96px; }
.hero-tourism-brands .hero-tourism-brands__dot { width: 46px; }
.hero-tourism-brands .hero-tourism-brands__love { width: 104px; }
@media (max-width: 1100px) {
    .hero-tourism-brands {
        position: relative;
        top: auto;
        right: auto;
        align-self: center;
        flex-direction: row;
        justify-content: center;
        width: min(320px, calc(100% - 40px));
        margin: 0 auto 18px;
        padding: 0;
        gap: 18px;
    }
    .hero-tourism-brands .hero-tourism-brands__davao { width: 90px; }
    .hero-tourism-brands .hero-tourism-brands__dot { width: 42px; }
    .hero-tourism-brands .hero-tourism-brands__love { width: 100px; }
}
@media (max-width: 640px) {
    /* The Davao and Love the Philippines marks are dark and colourful; straight on the hero they
       nearly vanish. A light frosted pill keeps them legible on a phone without a solid block:
       the footage shows faintly through it. The fallback is the earlier solid cream where
       backdrop-filter is unsupported. */
    .hero-tourism-brands {
        width: fit-content;
        max-width: calc(100% - 40px);
        padding: 7px 20px;
        gap: 14px;
        background: rgba(255, 247, 233, .94);
        border-radius: 999px;
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .hero-tourism-brands {
            background: rgba(255, 247, 233, .8);
            -webkit-backdrop-filter: blur(10px) saturate(1.15);
            backdrop-filter: blur(10px) saturate(1.15);
            border: 1px solid rgba(255, 255, 255, .5);
            box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
        }
    }
    .hero-tourism-brands .hero-tourism-brands__davao { width: 78px; }
    .hero-tourism-brands .hero-tourism-brands__dot { width: 38px; }
    .hero-tourism-brands .hero-tourism-brands__love { width: 84px; }
}

/* Phones: each section kept its 64px of padding above and below, so two sections were 128px apart. Tighter here
   (still well past the 22px the next sheet slides over the bottom of this one). */
@media (max-width: 640px) {
    .landing-section.section { padding-top: 40px; padding-bottom: 40px; }
    .landing-section.about-region { padding-top: 36px; padding-bottom: 36px; }
}

/* About Davao Region: on a phone the second paragraph folds behind "Read more" (public/js/read-more.js). */
.read-more { display: none; }
@media (max-width: 640px) {
    .about-copy.has-fold .about-copy__more:not(.is-open) { display: none; }
    .about-copy .read-more {
        display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 16px; padding: 0;
        border: 0; background: none; color: var(--primary-dark); font: inherit; font-weight: 700;
        text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
    }
    .about-copy .read-more[hidden] { display: none; }
    .about-copy .read-more:focus-visible { outline: 3px solid var(--accent, #ff693b); outline-offset: 2px; }
}