/* ------------------------------------------------------------
 * Home page — cinematic hero + featured-destinations strip
 * Enqueued front-page-only via upd_enqueue_css('upd-home', …).
 * ------------------------------------------------------------ */

/* Hero — full-bleed photo intro that leads into the map.
 * The Elementor shortcode widget boxes content to ~812px; break out to the
 * full viewport width (same effect as the map below it). */
.upd-hero {
    position: relative;
    overflow: hidden; /* clip the oversized parallax bg layer */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* taller hero gives the photo more room and pushes the map (anchored to the
     * hero bottom) further below the centered content — opens up the gap above
     * the map. Photo is background-size:cover, so it zooms to fill, no gap. */
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* extra bottom padding shifts the centered content upward and opens a band
     * of empty photo below the "Explore the map" cue, so the map (which now
     * barely overlaps — see palawan-map.css) starts in clear space below it. */
    padding: 48px 24px 160px;
    background-color: #0c2230; /* fallback before image paints */
}
/* Parallax background layer — taller than the hero (top/bottom buffer) so the
 * 0.3x scroll translate never reveals an edge. Moved by JS on scroll. */
.upd-hero .upd-hero-bg {
    position: absolute;
    top: -30%;
    left: 0;
    right: 0;
    height: 130%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
.upd-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Subtle darkening up top for text legibility, then ramp the very bottom to
     * solid #11202a — the exact navy behind the map. This dissolves the photo's
     * hard bottom edge so photo-ocean → page navy → map-ocean read as one
     * continuous sea (no visible seam where the map's transparent top sits). */
    background: linear-gradient(180deg,
        rgba(8,16,20,.28) 0%,
        rgba(8,16,20,.5) 55%,
        rgba(17,32,42,.85) 88%,
        #11202a 100%);
}
.upd-hero > * { position: relative; z-index: 2; }
.upd-hero-logo {
    display: block;
    width: 84px;
    height: auto;
    margin: 0 auto 18px;
    /* logo PNG is solid black — invert to white to read on the dark photo */
    filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.upd-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0 0 .4em;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.upd-hero p.upd-hero-sub {
    color: #d8e4e8;
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 1.6em;
}
.upd-hero .upd-hero-cta {
    display: inline-block;
    background: #1f9e8a;
    color: #08161b;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.upd-hero .upd-hero-cta:hover { background: #7BC4A8; transform: translateY(-1px); }
.upd-hero .upd-hero-scroll {
    position: absolute;
    /* sits below the CTA, riding crisp on top of the map's fade-in zone */
    bottom: 90px; left: 0; right: 0;
    z-index: 4;
    color: #dfe9ee; opacity: .85; font-size: .85rem;
    text-decoration: none;
    animation: updHeroBob 2s ease-in-out infinite;
}
@media (max-width: 767px) {
    .upd-hero { min-height: 72vh; }
    /* the bottom padding already opens the band below the cue, so the cue keeps
     * its desktop bottom:90px here too (no collision — content is shifted up). */
}
@media (prefers-reduced-motion: reduce) { .upd-hero .upd-hero-scroll { animation: none; } }
@keyframes updHeroBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Featured destinations strip — full-bleed light band (breaks out of the
 * boxed Elementor widget, same technique as the hero), cards centred at 1200px.
 * The light band also separates the dark map above from the footer below. */
.upd-featured {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* darker band so white cards read distinctly against it (was #f6f6f9 —
     * too close to card #fff per client feedback). */
    background: #dde2ea;
    padding: 56px 24px;
}
.upd-featured-title {
    max-width: 1200px;
    margin: 0 auto 32px;
    text-align: center;
    color: #11202a;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.upd-featured-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.upd-fcard {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(17,32,42,.10);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.upd-fcard:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(17,32,42,.18); }
.upd-fcard-img {
    display: block;
    height: 160px;
    background: #16384a center/cover no-repeat;
    /* slow ease so the zoom+tilt feels cinematic on hover, not snappy */
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.upd-fcard:hover .upd-fcard-img { transform: scale(1.06) rotate(-.6deg); }
@media (prefers-reduced-motion: reduce) {
    .upd-fcard-img { transition: none; }
    .upd-fcard:hover .upd-fcard-img { transform: none; }
}
.upd-fcard-body { padding: 14px 16px 18px; }
.upd-fcard-name { display: block; color: #11202a; font-weight: 600; font-size: 1.05rem; }
.upd-fcard-area { display: block; color: #5a7180; font-size: .85rem; margin-top: 2px; }