/* Destination city-guide pages — the utilities the committed Tailwind build lacks.
 *
 * WHY THIS FILE EXISTS. This repo has no Tailwind toolchain: no tailwind.config.js,
 * no tailwindcss dependency, and scripts/ci-build.sh has no CSS stage — the compiled
 * assets/tailwind.css is committed and shipped verbatim. The destination pages were
 * therefore written against the Tailwind Play CDN (cdn.tailwindcss.com), a 407 KB
 * in-browser JIT compiler loaded as a render-blocking <script> on four live, indexed
 * pages. Removing it needs the ~36 utilities those pages use that the committed build
 * does not define — they are written out here by hand, exactly as Tailwind v3 would
 * emit them, with the brand colours from the page's old inline tailwind.config:
 *   navy = #14532d (Thailand green — the class name mirrors the builder structure),
 *   gold = #b8860b.
 *
 * LOAD ORDER MATTERS: link this AFTER /assets/tailwind.css and BEFORE the page's own
 * inline <style>. The inline block defines .font-serif and the page components, and
 * must keep winning by source order.
 *
 * If a toolchain is ever restored, delete this file and rebuild instead.
 */

/* colours */
.bg-navy { background-color: #14532d; }
.bg-navy\/10 { background-color: rgba(20, 83, 45, 0.1); }
.text-navy { color: #14532d; }
.bg-gold { background-color: #b8860b; }
.bg-gold\/10 { background-color: rgba(184, 134, 11, 0.1); }
.text-gold { color: #b8860b; }
.border-gray-100 { border-color: #f3f4f6; }
.border-white\/50 { border-color: rgba(255, 255, 255, 0.5); }
.hover\:bg-\[\#9c7209\]:hover { background-color: #9c7209; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }

/* gradients (Tailwind v3 custom-property protocol) */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-navy\/60 {
  --tw-gradient-from: rgba(20, 83, 45, 0.6);
  --tw-gradient-to: rgba(20, 83, 45, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-navy\/95 { --tw-gradient-to: rgba(20, 83, 45, 0.95); }

/* type */
.font-light { font-weight: 300; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* box */
.h-2\.5 { height: 0.625rem; }
.w-2\.5 { width: 0.625rem; }
.w-24 { width: 6rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.opacity-30 { opacity: 0.3; }
.z-0 { z-index: 0; }
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* responsive */
@media (min-width: 640px) {
  .sm\:mb-16 { margin-bottom: 4rem; }
  .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
}

@media (min-width: 768px) {
  .md\:flex-row-reverse { flex-direction: row-reverse; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .md\:w-5\/12 { width: 41.666667%; }
  .md\:w-7\/12 { width: 58.333333%; }
}

@media (min-width: 1024px) {
  .lg\:p-10 { padding: 2.5rem; }
}

/* ── Guide hero: full-strength photo, veil on hover ──────────────────────
 * The hero photo used to sit at 30% under a near-opaque gradient, so it read
 * as texture rather than a photograph. Now the photo shows at full strength
 * and the old veil fades IN on hover, which keeps the "read the words"
 * version one gesture away without hiding the picture by default.
 *
 * Two permanent legibility aids carry the text over bright or busy photos:
 * a dark-green text-shadow on the kicker/title/lead, and a bottom-up scrim
 * under the lead and buttons. Touch devices (no hover) therefore always get
 * a readable full-photo hero — the veil is hover-only by design.
 *
 * Pure CSS on the existing published markup: every guide page links this
 * stylesheet, so published pages and future publishes pick it up together
 * with no page sweep.
 */
section.bg-navy > .absolute.inset-0.z-0 > img.opacity-30 {
    opacity: 1;
    transition: opacity 0.7s ease;
}
section.bg-navy > .absolute.inset-0.z-0 > .bg-gradient-to-b {
    opacity: 0;
    transition: opacity 0.7s ease;
}

/* Permanent bottom scrim, under the lead paragraph and buttons. */
section.bg-navy.overflow-hidden::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Dark at both ends, clear through the middle: the bottom carries the lead
       and buttons, the top backs the kicker and title. Tuned against the real
       photo set — Bangkok's hero is a pale sunrise sky, which washed out the
       small gold kicker entirely at bottom-scrim-only values. */
    background:
        linear-gradient(to top, rgba(11, 43, 24, 0.72) 0%, rgba(11, 43, 24, 0.26) 42%, rgba(11, 43, 24, 0) 72%),
        linear-gradient(to bottom, rgba(11, 43, 24, 0.52) 0%, rgba(11, 43, 24, 0.16) 30%, rgba(11, 43, 24, 0) 55%);
}

/* Legibility aids on the hero text itself. */
section.bg-navy > .relative.z-10 > h1,
section.bg-navy > .relative.z-10 > p {
    text-shadow: 0 2px 16px rgba(11, 43, 24, 0.62), 0 1px 3px rgba(11, 43, 24, 0.5);
}
/* The kicker is small gold type, and gold on a warm sky (Bangkok's hero is a
   sunrise) has too little contrast for a shadow alone to rescue. A quiet chip
   guarantees it reads on any photo without darkening the whole hero. */
section.bg-navy > .relative.z-10 > .text-gold {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(11, 43, 24, 0.55);
    color: #f0c65a;
    text-shadow: 0 1px 2px rgba(11, 43, 24, 0.9);
}

@media (hover: hover) {
    section.bg-navy:hover > .absolute.inset-0.z-0 > img.opacity-30 { opacity: 0.3; }
    section.bg-navy:hover > .absolute.inset-0.z-0 > .bg-gradient-to-b { opacity: 1; }
}