/* ==========================================================================
   BungaDigital — global tweaks layered on top of Tailwind CDN.
   Phase 1: minimal. The somber theme is mostly carried by Tailwind utilities.
   ========================================================================== */

:root {
    --navy-900: #0B1B2B;
    --gold-500: #C9A24A;
    --paper:    #FAFAF7;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Subtle premium texture behind hero */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(60rem 30rem at 80% -10%, rgba(201, 162, 74, 0.08), transparent 60%),
      radial-gradient(50rem 30rem at -10% 110%, rgba(11, 27, 43, 0.06), transparent 60%);
    z-index: -1;
}

/* Section divider used in future phases */
.divider-soft {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 27, 43, 0.12), transparent);
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Image ratio containers — independent of Tailwind CDN.
   ----------------------------------------------------------------------------
   Tailwind's CDN (cdn.tailwindcss.com) is a runtime JIT and can fail to load
   reliably on mobile networks / older mobile Safari, leaving aspect-[x/y]
   classes with no effect. These plain CSS rules use the universally-supported
   padding-bottom hack so almarhum/rumah-duka photos always render correctly,
   even when the Tailwind CDN is slow, blocked, or unreachable.

   Markup contract:
     <div class="foto-ratio foto-ratio-4-3"> <img …> </div>
     <div class="foto-ratio foto-ratio-4-5"> <img …> </div>
     <div class="foto-ratio foto-ratio-4-3"> <div class="foto-fill">…</div> </div>
   ========================================================================== */
.foto-ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgba(11, 27, 43, 0.05);
}
.foto-ratio-4-3 { padding-bottom: 75%; }
.foto-ratio-4-5 { padding-bottom: 125%; }
.foto-ratio > img,
.foto-ratio > .foto-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.foto-ratio > img { object-fit: cover; display: block; }
.foto-ratio > .foto-fill {
    display: flex;
    align-items: center;
    justify-content: center;
}