/* 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-1 is the gold rule under every section heading ("w-24 h-1 bg-gold").
 * The committed Tailwind build has no .h-1, so until 2026-10-20 the rule
 * rendered 0px tall — present in the markup, invisible on all four guides.
 * 0.25rem (4px) = Tailwind's h-1, as China's city pages render it. */
.h-1 { height: 0.25rem; }
/* The width caps of a section with exactly ONE card: the builder wraps a lone
 * "top" card in .max-w-sm and a lone left/right card in .max-w-5xl. Missing
 * from the committed Tailwind build until 2026-10-21, so a one-card section
 * stretched its card to the full 1216px content width. Tailwind's values, as
 * China's city pages render them. tools/destination-builder.test.mjs fails if
 * a class the builder emits has no rule anywhere a city page loads. */
.max-w-sm { max-width: 24rem; }
.max-w-5xl { max-width: 64rem; }
.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: editorial split ─────────────────────────────────────────
 * Measured at 674px (75%vh) on desktop and 773px (95%vh) on a phone, the
 * full-bleed photo hero pushed every word of the guide below the fold. A city
 * guide is a page the visitor already chose, so the photo does not need to
 * sell it again: copy on white on the left, a framed photo on the right.
 *
 * This replaces the earlier full-photo treatment with its hover veil, scrim
 * and kicker chip — all of which existed to keep text legible ON the photo.
 * Text no longer sits on the photo at all, so none of it is needed.
 */
.dest-hero {
    background: #fff;
    padding: 3rem 1.25rem 2.5rem;
}
.dest-hero-inner {
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 52fr 48fr;
    gap: 3rem;
    align-items: center;
}
.dest-hero-crumb {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}
.dest-hero-crumb a { color: #6b7280; text-decoration: none; }
.dest-hero-crumb a:hover { color: #14532d; text-decoration: underline; }
.dest-hero-crumb span[aria-current] { color: #14532d; font-weight: 600; }
.dest-hero-eyebrow {
    color: #b8860b;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}
.dest-hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: #14532d;
    font-size: clamp(2.1rem, 3.4vw, 3.2rem);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 1rem;
}
.dest-hero-lead {
    color: #4b5563;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 1.75rem;
    max-width: 34rem;
}
.dest-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.dest-hero-actions .trip-btn,
.dest-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.8rem 1.6rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dest-hero-actions .trip-btn { background: #b8860b; color: #fff; }
.dest-hero-actions .trip-btn:hover { background: #9c7209; }
.dest-hero-cta { background: #14532d; color: #fff; }
.dest-hero-cta:hover { background: #0f3d22; }
.dest-hero-figure {
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(15, 42, 26, 0.18);
    background: #eef3f8;
}
.dest-hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 899px) {
    /* Photo first: on a phone the picture is the fastest confirmation that you
       opened the right city. Stacking makes the hero TALLER than the full-bleed
       version it replaced unless every part is trimmed — measured at 810px
       (100%vh) before this block was tuned: figure 257 + copy 473 + padding 56.
       A wider crop and side-by-side buttons do most of the work. */
    .dest-hero { padding: 1rem 1rem 1.5rem; }
    .dest-hero-inner { grid-template-columns: 1fr; gap: 1.1rem; }
    .dest-hero-figure { order: -1; aspect-ratio: 16 / 9; }
    .dest-hero-crumb { margin-bottom: 0.75rem; }
    .dest-hero-title { font-size: clamp(1.6rem, 6.4vw, 2.1rem); margin-bottom: 0.6rem; }
    .dest-hero-lead {
        font-size: 0.98rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        /* The lead is a full paragraph on some cities; the guide itself is
           right below, so the hero shows the opening and lets the page carry
           the rest. */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .dest-hero-actions { gap: 0.6rem; }
    .dest-hero-actions .trip-btn, .dest-hero-cta {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.7rem 1rem;
        font-size: 0.92rem;
    }
}

/* ── Tour Packages That Include <City> ───────────────────────────────────
 * The staff-picked tours at the foot of a city guide (Destination Page
 * Builder → "Tour packages on this page"; markup from
 * tools/destination-builder/city-tours-render.js, kept current by the CI bake).
 * Here, not in the page template's inline <style>, so a page that gets the
 * block from the CI bake (inserted after its last section) is styled too.
 * Port of China's card style in Thailand green / gold. 1 / 2 / 3 columns.
 */
.city-tours-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .city-tours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .city-tours-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.city-tour-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
}
.city-tour-photo { height: 12rem; overflow: hidden; background: #eef3f8; }
.city-tour-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.city-tour-card:hover .city-tour-photo img { transform: scale(1.04); }
.city-tour-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.city-tour-more { margin-top: auto; font-size: 0.875rem; font-weight: 600; color: #14532d; }
.city-tour-card:hover .city-tour-more { color: #b8860b; }
.city-tours-all {
    font-weight: 600;
    color: #14532d;
    border-bottom: 1px solid rgba(20, 83, 45, 0.35);
    text-decoration: none;
}
.city-tours-all:hover { color: #b8860b; border-bottom-color: #b8860b; }