:root {
  color-scheme: light;
  --tacloban-font-family: "Google Sans", "Google Sans Text", "Google Sans Display", Roboto, Arial, sans-serif;
  font-family: var(--tacloban-font-family);
  background: #f6f9fd;
  color: #0f172a;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: #f6f9fd; }
button, a, input, textarea, select { font: inherit; }
a { color: inherit; }

.tourism-shell { --tourism-shell-gutter: clamp(16px, 3vw, 46px); width: min(1920px, 100%); margin: 0 auto; padding: clamp(16px, 2vw, 30px) var(--tourism-shell-gutter) 42px; }
.tourism-loading, .tourism-state { min-height: 100vh; display: grid; place-content: center; gap: 12px; color: #475569; font-weight: 750; text-align: center; padding: 24px; }
.tourism-home-loading { min-height: 180px; }
.tourism-state-card { background: #fff; border: 1px solid #dbe5f2; border-radius: 24px; padding: 30px; max-width: 600px; box-shadow: 0 10px 28px rgba(25, 50, 82, .08); }
.tourism-spinner { width: 26px; height: 26px; border: 3px solid #bfdbfe; border-top-color: #2563eb; border-radius: 999px; animation: tourism-spin .8s linear infinite; margin: 0 auto; }
@keyframes tourism-spin { to { transform: rotate(360deg); } }

.tourism-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 12px 16px; margin-bottom: clamp(16px, 2vw, 26px); background: rgba(255,255,255,.96); border: 1px solid rgba(219,229,242,.72); border-radius: 24px; box-shadow: 0 10px 24px rgba(25, 50, 82, .06); }
.tourism-brand { display: flex; align-items: center; min-width: 0; gap: 12px; text-decoration: none; }
.tourism-brand-mark { display: block; flex: 0 0 58px; width: 58px; height: 58px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; }
.tourism-brand-copy { position: absolute; top: 50%; left: 50%; min-width: 0; max-width: calc(100% - 260px); transform: translate(-50%, -50%); }
.tourism-brand-title { display: block; overflow: hidden; color: #0f4d93; font-size: clamp(16px, 1.6vw, 20px); font-weight: 900; letter-spacing: -.35px; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.tourism-menu-trigger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 9px; min-height: 44px; padding: 9px 14px; border: 1px solid #0f4d93; border-radius: 999px; color: #fff; background: #0f4d93; cursor: pointer; font-size: 13px; font-weight: 850; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tourism-menu-trigger:hover, .tourism-menu-trigger:focus-visible { background: #1d5fae; box-shadow: 0 8px 16px rgba(15,77,147,.18); transform: translateY(-1px); }
.tourism-menu-icon { display: grid; width: 18px; gap: 3px; }
.tourism-menu-icon i { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; }
.tourism-menu-label-short { display: none; }
.tourism-pill, .tourism-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; padding: 8px 14px; text-decoration: none; font-size: 13px; font-weight: 850; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.tourism-pill { color: #334155; background: #f6f9fd; }
.tourism-button { color: #fff; background: #2563eb; }
.tourism-pill:hover, .tourism-pill:focus-visible { background: #e7f0fb; transform: translateY(-1px); }
.tourism-button:hover, .tourism-button:focus-visible { box-shadow: 0 8px 16px rgba(37,99,235,.2); opacity: .92; transform: translateY(-1px); }
.tourism-button:focus-visible, .tourism-pill:focus-visible, .tourism-subtle-button:focus-visible, .tourism-copy-button:focus-visible, .tourism-brand:focus-visible, .tourism-menu-trigger:focus-visible, .tourism-drawer-link:focus-visible, .tourism-drawer-search-toggle:focus-visible, .tourism-drawer-search-field button:focus-visible, .tourism-drawer-search-result:focus-visible, .tourism-drawer-staff:focus-visible, .tourism-next:focus-visible, .tourism-back:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-drawer-open { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }
.tourism-drawer[hidden] { display: none; }
.tourism-drawer { position: fixed; z-index: 1200; inset: 0; visibility: hidden; pointer-events: none; }
.tourism-drawer.is-open { visibility: visible; pointer-events: auto; }
.tourism-drawer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15,23,42,.46); cursor: default; opacity: 0; transition: opacity .22s ease; }
.tourism-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: min(400px, calc(100% - 28px)); flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 88px; padding: 26px; border-left: 1px solid rgba(219,229,242,.9); background: #fff; box-shadow: -18px 0 42px rgba(15,23,42,.16); transform: translateX(104%); transition: transform .24s ease; }
.tourism-drawer.is-open .tourism-drawer-backdrop { opacity: 1; }
.tourism-drawer.is-open .tourism-drawer-panel { transform: translateX(0); }
.tourism-drawer-header { position: sticky; top: -26px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: flex-start; gap: 16px; margin: -26px -26px 0; padding: 26px 26px 12px; border-bottom: 1px solid rgba(219,229,242,.72); background: rgba(255,255,255,.97); box-shadow: 0 8px 18px rgba(15,23,42,.04); backdrop-filter: blur(12px); }
.tourism-drawer-header > span { display: grid; min-width: 0; gap: 4px; }
.tourism-drawer-kicker { color: #2563eb; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.tourism-drawer-header strong { display: block; color: #0f4d93; font-size: 21px; letter-spacing: -.45px; line-height: 1.15; overflow-wrap: anywhere; }
.tourism-drawer-actions { display: flex !important; flex: 0 0 auto; align-items: center; gap: 8px !important; }
.tourism-drawer-search-toggle { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dbe5f2; border-radius: 13px; color: #0f4d93; background: #f8fbff; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.tourism-drawer-search-toggle svg, .tourism-drawer-search-field svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.tourism-drawer-search-toggle:hover, .tourism-drawer-search-toggle:focus-visible, .tourism-drawer-search-toggle[aria-expanded="true"] { color: #fff; background: #2563eb; }
.tourism-drawer-close { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border: 1px solid #dbe5f2; border-radius: 13px; color: #334155; background: #f8fbff; cursor: pointer; font-size: 27px; line-height: 1; transition: background-color .18s ease, color .18s ease; }
.tourism-drawer-close:hover, .tourism-drawer-close:focus-visible { color: #fff; background: #0f4d93; }
.tourism-drawer-close:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-drawer-search[hidden] { display: none; }
.tourism-drawer-search { position: relative; z-index: 1; display: grid; min-width: 0; gap: 10px; margin-top: 20px; scroll-margin-top: 88px; }
.tourism-drawer-search > label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tourism-drawer-search-field { display: grid; grid-template-columns: 22px minmax(0, 1fr) 44px; align-items: center; gap: 9px; width: 100%; min-width: 0; min-height: 52px; overflow: hidden; padding: 4px 4px 4px 14px; border: 1px solid #cbd9ea; border-radius: 15px; color: #64748b; background: #f8fbff; transition: border-color .18s ease, box-shadow .18s ease; }
.tourism-drawer-search-field:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.tourism-drawer-search-field input { display: block; min-width: 0; width: 100%; max-width: 100%; height: 38px; padding: 0; border: 0; outline: 0; color: #0f172a; background: transparent; font-size: 16px; font-weight: 700; }
.tourism-drawer-search-field input::-webkit-search-decoration, .tourism-drawer-search-field input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.tourism-drawer-search-field input::placeholder { color: #94a3b8; font-weight: 650; }
.tourism-drawer-search-field button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; color: #64748b; background: transparent; cursor: pointer; font-size: 21px; line-height: 1; }
.tourism-drawer-search-field button:hover, .tourism-drawer-search-field button:focus-visible { color: #fff; background: #0f4d93; }
.tourism-drawer-search-field input:placeholder-shown + button { visibility: hidden; }
.tourism-drawer-search-status { min-height: 17px; margin: 0 2px; color: #64748b; font-size: 11px; font-weight: 700; line-height: 1.45; }
.tourism-drawer-search-results[hidden] { display: none; }
.tourism-drawer-search-results { display: grid; min-width: 0; max-height: min(42dvh, 390px); gap: 6px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.tourism-drawer-search-result { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; border: 1px solid #e4ebf4; border-radius: 14px; color: #334155; background: #fff; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.tourism-drawer-search-result:hover, .tourism-drawer-search-result:focus-visible { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; transform: translateX(-2px); }
.tourism-drawer-search-result-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #2563eb; background: #eff6ff; font-size: 15px; }
.tourism-drawer-search-result > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.tourism-drawer-search-result strong { overflow: hidden; color: #0f172a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tourism-drawer-search-result small { display: -webkit-box; overflow: hidden; color: #64748b; font-size: 10px; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tourism-drawer-search-result > span:last-child { color: #94a3b8; font-weight: 900; }
.tourism-drawer-links { display: grid; gap: 6px; margin-top: 30px; }
.tourism-drawer-link { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: 15px; color: #334155; text-decoration: none; font-size: 14px; font-weight: 800; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.tourism-drawer-link-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #eff6ff; color: #2563eb; font-size: 14px; }
.tourism-drawer-link-arrow { color: #94a3b8; }
.tourism-drawer-link:hover, .tourism-drawer-link:focus-visible, .tourism-drawer-link[aria-current="page"] { color: #1d4ed8; background: #eff6ff; transform: translateX(-2px); }
.tourism-drawer-link[aria-current="page"] .tourism-drawer-link-icon { color: #fff; background: #2563eb; }
.tourism-drawer-footer { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
.tourism-drawer-note { margin: 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.55; }
.tourism-drawer-staff { display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 30px; padding: 5px 8px; border-radius: 10px; color: #94a3b8; font-size: 11px; font-weight: 750; letter-spacing: .12px; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.tourism-drawer-staff-icon { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; line-height: 1; }
.tourism-drawer-staff:hover, .tourism-drawer-staff:focus-visible { color: #475569; background: #f6f9fd; }

.tourism-hero, .tourism-detail-intro { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(350px, .68fr); min-height: clamp(510px, 42vw, 650px); overflow: hidden; border: 1px solid rgba(15,77,147,.12); border-radius: 32px; background: #0f4d93; box-shadow: 0 18px 38px rgba(25,50,82,.1); }
.tourism-hero-media, .tourism-detail-image { position: relative; display: grid; min-height: 340px; overflow: hidden; background: linear-gradient(140deg, #dbeafe, #eaf2ff); }
.tourism-hero-media::after, .tourism-detail-image::after { position: absolute; inset: auto -56px -92px auto; width: 260px; height: 260px; border: 42px solid rgba(37,99,235,.11); border-radius: 50%; content: ''; pointer-events: none; }
.tourism-hero-media picture, .tourism-detail-image picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.tourism-hero-media img, .tourism-detail-image img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.06) contrast(1.02); }
.tourism-image-placeholder { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; min-height: 100%; overflow: hidden; color: #2563eb; background: radial-gradient(circle at 19% 22%, rgba(255,255,255,.92) 0 3px, transparent 4px), radial-gradient(circle at 78% 23%, rgba(37,99,235,.15) 0 2px, transparent 3px), linear-gradient(140deg, #eaf2ff, #dceaff); font-size: 54px; font-weight: 900; }
.tourism-image-placeholder::before { position: absolute; top: 12%; left: -15%; width: 80%; aspect-ratio: 1; border: 42px solid rgba(37,99,235,.1); border-radius: 50%; content: ''; }
.tourism-image-placeholder::after { position: absolute; right: 8%; bottom: 12%; width: 118px; height: 118px; border: 2px solid rgba(37,99,235,.24); border-radius: 28px; content: ''; transform: rotate(18deg); }
.tourism-image-placeholder > span { position: relative; z-index: 1; display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid rgba(37,99,235,.18); border-radius: 28px; background: rgba(255,255,255,.64); box-shadow: 0 12px 28px rgba(37,99,235,.12); }
.tourism-image-placeholder--listing { min-height: 100%; font-size: 30px; }
.tourism-image-placeholder--listing > span { width: 50px; height: 50px; border-radius: 18px; }
.tourism-hero-copy, .tourism-detail-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(30px, 4vw, 62px); color: #fff; background: linear-gradient(145deg, #0b3e7c, #1d5ba9); }

/* Visitor pages use a true full-bleed photograph. The copy is layered over a
   restrained gradient instead of taking half of the hero as a solid panel. */
.tourism-hero { position: relative; isolation: isolate; grid-template-columns: 1fr; min-height: clamp(560px, 52vw, 740px); background: #0f4d93; }
.tourism-hero::before { position: absolute; z-index: 1; inset: 0; content: ''; pointer-events: none; background: linear-gradient(90deg, rgba(4,21,51,.74) 0%, rgba(4,21,51,.48) 33%, rgba(4,21,51,.12) 58%, transparent 76%), linear-gradient(0deg, rgba(4,21,51,.30), transparent 56%); }
.tourism-hero .tourism-hero-media { position: absolute; z-index: 0; inset: 0; display: block; min-height: 0; }
.tourism-hero .tourism-hero-media::after { display: none; }
.tourism-hero .tourism-hero-media picture { position: absolute; inset: 0; z-index: 0; }
.tourism-hero .tourism-hero-media img { z-index: 0; }
.tourism-hero--history .tourism-hero-media img { object-position: 56% 60%; }
.tourism-hero-caption { width: fit-content; max-width: min(520px, 100%); margin: 12px 4px 0 auto; padding: 9px 12px; border: 1px solid #dbe5f2; border-radius: 12px; background: #f8fbff; box-shadow: 0 8px 20px rgba(25,50,82,.06); color: #475569; font-size: 11px; font-weight: 750; line-height: 1.45; text-align: right; }
.tourism-hero .tourism-hero-copy { position: relative; z-index: 2; align-self: end; justify-self: start; width: min(660px, 58%); min-height: 0; padding: clamp(30px, 4vw, 62px); background: transparent; }
.tourism-badge { display: inline-flex; gap: 8px; align-items: center; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.16); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .65px; text-transform: uppercase; }
.tourism-hero h1, .tourism-detail-intro h1 { max-width: 820px; margin: 20px 0 0; overflow-wrap: anywhere; font-size: clamp(35px, 4.2vw, 64px); line-height: 1.07; letter-spacing: -2.2px; }
.tourism-hero p { max-width: 720px; margin: 18px 0 0; color: #e4efff; font-size: clamp(15px, 1.45vw, 19px); font-weight: 650; line-height: 1.62; }
.tourism-hero h1 { max-width: 700px; color: #fff; font-size: clamp(42px, 5.1vw, 78px); text-shadow: 0 3px 20px rgba(2,12,30,.46); }
.tourism-sangyaw-hero-logo { display: block; width: clamp(170px, 21vw, 300px); height: auto; margin: 15px 0 -2px; filter: drop-shadow(0 5px 14px rgba(2,12,30,.46)); }
.tourism-hero p { color: #f2f7ff; text-shadow: 0 2px 14px rgba(2,12,30,.38); }
.tourism-detail-meta { margin: 13px 0 0; color: #e4efff; font-weight: 750; line-height: 1.5; }
.tourism-updated { margin-top: 18px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.14); color: #dcecff; font-size: 11px; font-weight: 850; }

/* Landing page: the official welcome billboard is shown in its full artwork
   ratio. It is intentionally not a background image, so no part is cropped on
   either wide or narrow screens. */
.tourism-home-billboard { overflow: hidden; border: 1px solid rgba(15,77,147,.14); border-radius: 32px; background: #0f4d93; box-shadow: 0 18px 38px rgba(25,50,82,.1); }
.tourism-home-billboard picture, .tourism-home-billboard img { display: block; width: 100%; }
.tourism-home-billboard img { height: auto; aspect-ratio: 8438 / 5000; object-fit: contain; }

/* Keep visitor photography genuinely edge-to-edge. Navigation and written
   content retain a comfortable reading gutter, while image-led moments can
   use the entire screen width on both phones and wide displays. */
.tourism-photo-gallery .tourism-photo-grid, .tourism-gallery-page > .tourism-photo-grid { width: calc(100% + (2 * var(--tourism-shell-gutter))); margin-inline: calc(-1 * var(--tourism-shell-gutter)); gap: 2px; border-block: 1px solid rgba(219,229,242,.9); }
.tourism-photo-gallery .tourism-photo, .tourism-gallery-page > .tourism-photo-grid .tourism-photo { border: 0; border-radius: 0; box-shadow: none; }
.tourism-photo-gallery .tourism-photo:only-child, .tourism-gallery-page > .tourism-photo-grid .tourism-photo:only-child { width: 100%; justify-self: stretch; }

/* The City Hall welcome section uses one continuous photograph. A gradual
   blue overlay keeps the copy legible without cutting the image in half. */
.tourism-home-waterfront { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; min-height: clamp(420px, 35vw, 540px); margin-top: clamp(18px, 2.2vw, 28px); overflow: hidden; border: 1px solid rgba(15,77,147,.12); border-radius: 32px; background: #0f4d93; box-shadow: 0 18px 38px rgba(25,50,82,.1); }
.tourism-home-waterfront::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(3,22,54,.03) 0%, rgba(3,22,54,.10) 31%, rgba(7,43,94,.48) 57%, rgba(8,48,106,.91) 100%), linear-gradient(0deg, rgba(2,18,45,.28), transparent 54%); content: ''; pointer-events: none; }
.tourism-home-waterfront-media { position: absolute; z-index: 0; inset: 0; min-height: 0; overflow: hidden; background: linear-gradient(140deg, #dbeafe, #eaf2ff); }
.tourism-home-waterfront-media picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tourism-home-waterfront-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.06) contrast(1.02); }
.tourism-home-waterfront-copy { position: relative; z-index: 2; display: flex; align-self: stretch; justify-self: end; flex-direction: column; align-items: flex-start; justify-content: center; width: min(650px, 54%); min-width: 0; padding: clamp(30px, 4vw, 62px); color: #fff; background: transparent; }
.tourism-home-waterfront-copy h1 { max-width: 700px; margin: 20px 0 0; color: #fff; font-size: clamp(42px, 5.1vw, 78px); line-height: 1.07; letter-spacing: -2.2px; text-shadow: 0 3px 20px rgba(2,12,30,.28); }
.tourism-home-waterfront-copy p { max-width: 620px; margin: 18px 0 0; color: #f2f7ff; font-size: clamp(15px, 1.45vw, 19px); font-weight: 650; line-height: 1.62; }
.tourism-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.tourism-hero-actions .tourism-button { min-height: 46px; padding-inline: 19px; }
.tourism-hero-link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 5px; color: #fff; font-size: 13px; font-weight: 850; text-decoration: none; text-shadow: 0 2px 12px rgba(2,12,30,.38); }
.tourism-hero-link:hover, .tourism-hero-link:focus-visible { color: #dbeafe; }
.tourism-hero-link:focus-visible { outline: 3px solid rgba(255,255,255,.52); outline-offset: 4px; border-radius: 8px; }
.tourism-home-featured-event { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); align-items: stretch; margin-top: clamp(18px, 2.2vw, 28px); overflow: hidden; border: 1px solid rgba(37,99,235,.2); border-radius: 28px; background: #fff; box-shadow: 0 14px 30px rgba(25,50,82,.08); }
.tourism-home-featured-event-media { display: grid; min-height: clamp(330px, 32vw, 460px); overflow: hidden; background: #0f4d93; text-decoration: none; }
.tourism-home-featured-event-media picture, .tourism-home-featured-event-media img, .tourism-home-featured-event-media .tourism-image-placeholder { display: block; width: 100%; height: 100%; }
.tourism-home-featured-event-media img { object-fit: contain; background: #0f4d93; }
.tourism-home-featured-event-media .tourism-image-placeholder { min-height: 100%; }
.tourism-home-featured-event-media:focus-visible { outline: 3px solid rgba(37,99,235,.5); outline-offset: -4px; }
.tourism-home-featured-event-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(26px, 4vw, 52px); }
.tourism-home-featured-event-copy h2 { max-width: 720px; margin: 8px 0 0; color: #0f172a; font-size: clamp(27px, 3vw, 44px); letter-spacing: -1.1px; line-height: 1.1; overflow-wrap: anywhere; }
.tourism-home-featured-event-copy h2 a { text-decoration: none; }
.tourism-home-featured-event-copy h2 a:hover, .tourism-home-featured-event-copy h2 a:focus-visible { color: #1d4ed8; }
.tourism-home-featured-event-date { margin: 16px 0 0; color: #1d4ed8; font-size: 15px; font-weight: 900; line-height: 1.45; }
.tourism-home-featured-event-location { margin: 8px 0 0; color: #475569; font-size: 13px; font-weight: 800; line-height: 1.5; }
.tourism-home-featured-event-description { display: -webkit-box; max-width: 680px; margin: 16px 0 0; overflow: hidden; color: #475569; font-size: 15px; font-weight: 650; line-height: 1.62; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.tourism-home-featured-event-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tourism-home-featured-event-actions .tourism-button, .tourism-home-featured-event-actions .tourism-subtle-button { min-height: 44px; padding-inline: 17px; }
.tourism-home-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: stretch; gap: 18px; margin-top: 22px; }
.tourism-home-status { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3vw, 32px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(145deg, #eff6ff, #dbeafe); color: #0f172a; box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-home-status::after { position: absolute; right: -48px; bottom: -74px; width: 200px; height: 200px; border: 31px solid rgba(37,99,235,.11); border-radius: 50%; content: ''; pointer-events: none; }
.tourism-home-status > * { position: relative; z-index: 1; }
.tourism-status-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 14px; background: #2563eb; color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 8px 16px rgba(37,99,235,.18); }
.tourism-home-status strong { margin-top: 6px; font-size: clamp(21px, 2vw, 26px); letter-spacing: -.5px; }
.tourism-home-status p { max-width: 350px; margin: 13px 0 0; color: #475569; font-size: 14px; font-weight: 650; line-height: 1.65; }
.tourism-plan { margin-top: clamp(28px, 4vw, 42px); }
.tourism-plan-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 4px; margin-bottom: 15px; }
.tourism-plan-header h2 { margin: 3px 0 0; color: #0f172a; font-size: 25px; letter-spacing: -.55px; }
.tourism-plan-header p { max-width: 460px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.55; text-align: right; }
.tourism-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.45vw, 20px); }
.tourism-plan-link { display: grid; grid-template-columns: minmax(110px, 31%) minmax(0, 1fr) auto; align-items: stretch; gap: clamp(18px, 1.7vw, 24px); min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(219,229,242,.92); border-radius: 24px; background: #fff; box-shadow: 0 10px 22px rgba(25,50,82,.05); color: #0f172a; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tourism-plan-link:hover, .tourism-plan-link:focus-visible { border-color: #bfdbfe; box-shadow: 0 15px 27px rgba(25,50,82,.10); transform: translateY(-3px); }
.tourism-plan-link:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 3px; }
.tourism-plan-thumbnail { display: block; min-height: clamp(122px, 10vw, 164px); overflow: hidden; border: 0; border-radius: 0; background: #eff6ff; box-shadow: none; }
.tourism-plan-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .24s ease; }
.tourism-plan-link:hover .tourism-plan-thumbnail img, .tourism-plan-link:focus-visible .tourism-plan-thumbnail img { transform: scale(1.06); }
.tourism-plan-link > span:not(.tourism-plan-thumbnail) { align-self: center; min-width: 0; padding-block: 14px; }
.tourism-plan-link small, .tourism-plan-link strong, .tourism-plan-link em { display: block; min-width: 0; }
.tourism-plan-link small { color: #2563eb; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .75px; text-transform: uppercase; }
.tourism-plan-link strong { margin-top: 4px; color: #0f172a; font-size: 17px; letter-spacing: -.25px; }
.tourism-plan-link em { margin-top: 7px; color: #64748b; font-size: 12px; font-style: normal; font-weight: 650; line-height: 1.5; }
.tourism-plan-link > b { align-self: center; padding-right: clamp(14px, 1.7vw, 24px); color: #2563eb; font-size: 18px; }

.tourism-arrival { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); gap: 18px; margin-top: 22px; overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(135deg, #eff6ff, #fff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-arrival-copy { min-width: 0; padding: clamp(22px, 3vw, 30px); }
.tourism-arrival-marker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 15px; padding: 7px 11px; border: 1px solid rgba(37,99,235,.2); border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.tourism-arrival-marker span { color: #16a34a; font-size: 12px; }
.tourism-arrival h2 { margin: 4px 0 0; color: #0f172a; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.8px; }
.tourism-arrival-copy > p { max-width: 720px; margin: 13px 0 0; color: #475569; font-size: 15px; font-weight: 620; line-height: 1.68; }
.tourism-arrival-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.tourism-arrival-side { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 220px; padding: 28px; overflow: hidden; background: linear-gradient(145deg, #0f4d93, #2563eb); color: #fff; }
.tourism-arrival-side::after { position: absolute; right: -62px; bottom: -68px; width: 230px; height: 230px; border: 34px solid rgba(255,255,255,.12); border-radius: 50%; content: ''; }
.tourism-arrival-side > span, .tourism-arrival-side strong, .tourism-arrival-side p { position: relative; z-index: 1; }
.tourism-arrival-side > span { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,.26); border-radius: 16px; background: rgba(255,255,255,.14); font-size: 22px; }
.tourism-arrival-side strong { font-size: 21px; letter-spacing: -.4px; }
.tourism-arrival-side p { max-width: 270px; margin: 8px 0 0; color: #e4efff; font-size: 13px; font-weight: 650; line-height: 1.55; }

.tourism-history { margin-top: clamp(28px, 4vw, 44px); }
.tourism-history-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 4px; margin-bottom: 15px; }
.tourism-history-header h2 { max-width: 760px; margin: 3px 0 0; color: #0f172a; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.9px; line-height: 1.12; }
.tourism-history-header p { max-width: 470px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.58; text-align: right; }
.tourism-history-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tourism-history-chapter { position: relative; min-width: 0; padding: clamp(21px, 2.5vw, 28px); overflow: hidden; border: 1px solid rgba(191,219,254,.9); border-radius: 24px; background: linear-gradient(145deg, #fff, #f5f9ff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-history-chapter::after { position: absolute; right: -48px; bottom: -58px; width: 150px; height: 150px; border: 25px solid rgba(37,99,235,.08); border-radius: 50%; content: ''; pointer-events: none; }
.tourism-history-chapter > * { position: relative; z-index: 1; }
.tourism-history-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 14px; background: #dbeafe; color: #2563eb; font-size: 21px; font-weight: 900; }
.tourism-history-chapter h3 { margin: 5px 0 0; color: #0f172a; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.4px; line-height: 1.2; }
.tourism-history-chapter p { margin: 12px 0 0; color: #475569; font-size: 14px; font-weight: 620; line-height: 1.68; }
.tourism-history-timeline { margin-top: 18px; padding: clamp(22px, 3vw, 30px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(145deg, #eff6ff, #fff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-history-timeline > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.tourism-history-timeline h3 { margin: 3px 0 0; color: #0f172a; font-size: clamp(23px, 2.3vw, 30px); letter-spacing: -.65px; }
.tourism-history-timeline > header p { max-width: 430px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.55; text-align: right; }
.tourism-history-timeline ol { display: grid; gap: 0; margin: 23px 0 0; padding: 0; list-style: none; }
.tourism-history-timeline li { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; min-width: 0; padding: 0 0 19px; }
.tourism-history-timeline li:last-child { padding-bottom: 0; }
.tourism-history-timeline li::before { position: absolute; top: 7px; left: 167px; bottom: -7px; width: 2px; background: #bfdbfe; content: ''; }
.tourism-history-timeline li:last-child::before { display: none; }
.tourism-history-timeline time { position: relative; z-index: 1; display: inline-flex; align-items: center; align-self: start; width: fit-content; min-height: 30px; padding: 5px 9px; border: 1px solid rgba(37,99,235,.2); border-radius: 999px; background: #fff; color: #1d4ed8; font-size: 11px; font-weight: 900; line-height: 1.25; text-align: left; }
.tourism-history-timeline li > span { position: relative; min-width: 0; padding-left: 28px; }
.tourism-history-timeline li > span::before { position: absolute; top: 7px; left: 0; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 2px #93c5fd; content: ''; }
.tourism-history-timeline strong, .tourism-history-timeline small { display: block; }
.tourism-history-timeline strong { color: #0f172a; font-size: 15px; font-weight: 900; line-height: 1.4; }
.tourism-history-timeline small { margin-top: 4px; color: #475569; font-size: 13px; font-weight: 620; line-height: 1.55; }
.tourism-history-sources { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 16px 4px 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.55; }
.tourism-history-sources strong { color: #475569; }
.tourism-history-sources a { color: #2563eb; font-weight: 800; text-decoration: none; }
.tourism-history-sources a:hover, .tourism-history-sources a:focus-visible { color: #0f4d93; text-decoration: underline; }
.tourism-history-sources a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; border-radius: 4px; }

.tourism-heritage { margin-top: clamp(28px, 4vw, 44px); }
.tourism-heritage-header, .tourism-heritage-yolanda-header, .tourism-heritage-sto-nino-header, .tourism-yolanda-story-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 4px; margin-bottom: 15px; }
.tourism-heritage-header h2, .tourism-heritage-yolanda-header h2, .tourism-heritage-sto-nino-header h2 { max-width: 760px; margin: 3px 0 0; color: #0f172a; font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.9px; line-height: 1.12; }
.tourism-heritage-header p, .tourism-heritage-yolanda-header p, .tourism-heritage-sto-nino-header p, .tourism-yolanda-story-header p { max-width: 500px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.58; text-align: right; }
.tourism-heritage-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.45vw, 20px); }
.tourism-heritage-card { position: relative; min-width: 0; padding: clamp(21px, 2.5vw, 28px); overflow: hidden; border: 1px solid rgba(191,219,254,.9); border-radius: 24px; background: linear-gradient(145deg, #fff, #f5f9ff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-heritage-card::after { position: absolute; right: -48px; bottom: -58px; width: 150px; height: 150px; border: 25px solid rgba(37,99,235,.08); border-radius: 50%; content: ''; pointer-events: none; }
.tourism-heritage-card > * { position: relative; z-index: 1; }
.tourism-heritage-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 14px; background: #dbeafe; color: #2563eb; font-size: 21px; font-weight: 900; }
.tourism-heritage-card h3 { margin: 5px 0 0; color: #0f172a; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.4px; line-height: 1.2; }
.tourism-heritage-card p { margin: 12px 0 0; color: #475569; font-size: 14px; font-weight: 620; line-height: 1.68; }
.tourism-heritage-taklub { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(250px, .62fr); align-items: center; gap: clamp(22px, 4vw, 54px); margin-top: 18px; padding: clamp(22px, 3vw, 30px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(135deg, #fffdf8, #fff 62%, #eff6ff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-taklub-copy h2 { margin: 4px 0 0; color: #0f172a; font-size: clamp(27px, 2.8vw, 38px); letter-spacing: -.9px; line-height: 1.12; }
.tourism-taklub-copy > p { max-width: 720px; margin: 14px 0 0; color: #475569; font-size: 14px; font-weight: 620; line-height: 1.7; }
.tourism-taklub-copy .tourism-taklub-note { color: #64748b; font-size: 13px; }
.tourism-taklub-reference { margin-top: 16px !important; }
.tourism-taklub-reference a { color: #2563eb; font-size: 12px; font-weight: 850; text-decoration: none; }
.tourism-taklub-reference a:hover, .tourism-taklub-reference a:focus-visible { color: #0f4d93; text-decoration: underline; }
.tourism-taklub-reference a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; border-radius: 4px; }
.tourism-heritage-taklub .tourism-taklub-photo { width: min(100%, 340px); justify-self: end; border-radius: 20px; }
.tourism-heritage-taklub .tourism-taklub-photo .tourism-photo { aspect-ratio: 1; background: #fffdf8; }
.tourism-heritage-sto-nino { margin-top: 18px; padding: clamp(22px, 3vw, 30px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(145deg, #fffaf2 0%, #fff 48%, #eff6ff 100%); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-heritage-sto-nino-header { padding: 0; }
.tourism-sto-nino-story { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 20px 0; padding: clamp(19px, 2.5vw, 25px); border: 1px solid rgba(191,219,254,.92); border-radius: 22px; background: rgba(255,255,255,.8); }
.tourism-sto-nino-story h3 { margin: 0; color: #0f172a; font-size: clamp(20px, 2.1vw, 27px); letter-spacing: -.55px; line-height: 1.18; }
.tourism-sto-nino-story p { max-width: 760px; margin: 10px 0 0; color: #475569; font-size: 14px; font-weight: 620; line-height: 1.66; }
.tourism-sto-nino-story .tourism-subtle-button { flex: 0 0 auto; }
.tourism-heritage-photo-grid.tourism-sto-nino-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tourism-heritage-photo-grid.tourism-sto-nino-photo-grid .tourism-photo { aspect-ratio: 2 / 3; }
.tourism-sto-nino-note { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 15px 2px 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.58; }
.tourism-sto-nino-note a { color: #2563eb; font-weight: 800; text-decoration: none; }
.tourism-sto-nino-note a:hover, .tourism-sto-nino-note a:focus-visible { color: #0f4d93; text-decoration: underline; }
.tourism-sto-nino-note a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; border-radius: 4px; }
.tourism-heritage-yolanda { margin-top: 18px; padding: clamp(22px, 3vw, 30px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(145deg, #eff6ff, #fff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-heritage-yolanda-header { padding: 0; }
.tourism-yolanda-story { margin: 20px 0; padding: clamp(20px, 2.6vw, 26px); border: 1px solid rgba(191,219,254,.92); border-radius: 22px; background: rgba(255,255,255,.76); }
.tourism-yolanda-story-header { padding: 0; margin-bottom: 18px; }
.tourism-yolanda-story-header h3 { max-width: 650px; margin: 3px 0 0; color: #0f172a; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.65px; line-height: 1.16; }
.tourism-yolanda-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.tourism-yolanda-story-card { min-width: 0; padding: 18px; border: 1px solid rgba(191,219,254,.86); border-radius: 18px; background: #fff; box-shadow: 0 7px 16px rgba(25,50,82,.04); }
.tourism-yolanda-story-kicker { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.tourism-yolanda-story-card h4 { margin: 10px 0 0; color: #0f172a; font-size: 17px; font-weight: 900; letter-spacing: -.25px; line-height: 1.3; }
.tourism-yolanda-story-card p { margin: 9px 0 0; color: #475569; font-size: 13px; font-weight: 620; line-height: 1.62; }
.tourism-yolanda-story-card a { color: #2563eb; font-weight: 850; text-decoration: none; white-space: nowrap; }
.tourism-yolanda-story-card a:hover, .tourism-yolanda-story-card a:focus-visible { color: #0f4d93; text-decoration: underline; }
.tourism-yolanda-story-card a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; border-radius: 4px; }
.tourism-yolanda-story-note { margin: 15px 2px 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.58; }
.tourism-heritage-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tourism-heritage-photo { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(191,219,254,.92); border-radius: 20px; background: #fff; box-shadow: 0 7px 16px rgba(25,50,82,.045); }
.tourism-heritage-photo .tourism-photo { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 0; box-shadow: none; cursor: zoom-in; }
.tourism-heritage-photo .tourism-photo picture, .tourism-heritage-photo .tourism-photo img { display: block; width: 100%; height: 100%; }
.tourism-heritage-photo .tourism-photo img { object-fit: cover; }
.tourism-heritage-photo figcaption { padding: 12px 14px 14px; color: #52647e; font-size: 12px; font-weight: 650; line-height: 1.55; }
.tourism-heritage-photo figcaption a, .tourism-heritage-sources a { color: #2563eb; font-weight: 800; text-decoration: none; }
.tourism-heritage-photo figcaption a:hover, .tourism-heritage-photo figcaption a:focus-visible, .tourism-heritage-sources a:hover, .tourism-heritage-sources a:focus-visible { color: #0f4d93; text-decoration: underline; }
.tourism-heritage-photo figcaption a:focus-visible, .tourism-heritage-sources a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; border-radius: 4px; }
.tourism-heritage-photo-note { margin: 14px 2px 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.55; }
.tourism-heritage-sources { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 16px 4px 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.55; }
.tourism-heritage-sources strong { color: #475569; }

.tourism-sangyaw-soundtrack { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(22px, 4vw, 54px); margin-top: 22px; padding: clamp(24px, 3.6vw, 42px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 28px; background: linear-gradient(135deg, #fff8fb, #fff 62%); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-sangyaw-soundtrack-copy { max-width: 560px; }
.tourism-sangyaw-soundtrack-copy h2 { margin: 5px 0 0; color: #0f172a; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.9px; line-height: 1.12; }
.tourism-sangyaw-soundtrack-copy p { margin: 13px 0 0; color: #475569; font-size: 15px; font-weight: 650; line-height: 1.62; }
.tourism-sangyaw-soundtrack-copy .tourism-subtle-button { margin-top: 18px; }
.tourism-sangyaw-soundtrack-frame { justify-self: stretch; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(219,39,119,.22); border-radius: 22px; background: #0f172a; box-shadow: 0 16px 28px rgba(15,23,42,.16); }
.tourism-sangyaw-soundtrack-frame iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }

.tourism-sangyaw-reel { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(22px, 4vw, 54px); margin-top: 22px; padding: clamp(24px, 3.6vw, 42px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 28px; background: linear-gradient(135deg, #eff6ff, #fff 62%); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-sangyaw-reel-copy { max-width: 560px; }
.tourism-sangyaw-reel-copy h2 { margin: 5px 0 0; color: #0f172a; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.9px; line-height: 1.12; }
.tourism-sangyaw-reel-copy p { margin: 13px 0 0; color: #475569; font-size: 15px; font-weight: 650; line-height: 1.62; }
.tourism-sangyaw-reel-copy .tourism-subtle-button { margin-top: 18px; }
.tourism-sangyaw-reel-frame { justify-self: stretch; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(37,99,235,.2); border-radius: 22px; background: #0f172a; box-shadow: 0 16px 28px rgba(15,23,42,.16); }
.tourism-sangyaw-reel-frame iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }

.tourism-fares { margin-top: 22px; padding: clamp(22px, 3vw, 30px); overflow: hidden; border: 1px solid #bfdbfe; border-radius: 26px; background: linear-gradient(145deg, #fff, #eff6ff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-fares-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.tourism-fares-header h2 { margin: 3px 0 0; color: #0f172a; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.8px; }
.tourism-fares-header p { max-width: 430px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.55; text-align: right; }
.tourism-fare-notice { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; padding: 13px 15px; border: 1px solid #dbeafe; border-radius: 16px; background: rgba(255,255,255,.76); color: #475569; }
.tourism-fare-notice > span { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font-size: 13px; font-weight: 900; }
.tourism-fare-notice p { margin: 1px 0 0; font-size: 12px; font-weight: 700; line-height: 1.55; }
.tourism-fare-group { margin-top: 24px; }
.tourism-fare-group + .tourism-fare-group { padding-top: 24px; border-top: 1px solid rgba(191,219,254,.78); }
.tourism-fare-group-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.tourism-fare-group-header h3 { margin: 3px 0 0; color: #0f172a; font-size: 20px; font-weight: 900; letter-spacing: -.35px; line-height: 1.2; }
.tourism-fare-group-header p { max-width: 390px; margin: 0; color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.5; text-align: right; }
.tourism-fare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 14px; }
.tourism-fare-grid--destinations { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.tourism-fare-card { min-width: 0; padding: 17px; border: 1px solid rgba(191,219,254,.92); border-radius: 18px; background: #fff; box-shadow: 0 7px 16px rgba(25,50,82,.045); }
.tourism-fare-card--destination { padding: 15px 16px; }
.tourism-fare-card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tourism-fare-card--link:hover { border-color: #60a5fa; box-shadow: 0 12px 23px rgba(37,99,235,.12); transform: translateY(-2px); }
.tourism-fare-card--link:focus-visible { outline: 3px solid rgba(37,99,235,.32); outline-offset: 3px; }
.tourism-fare-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.tourism-fare-type { color: #0f172a; font-size: 15px; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; }
.tourism-fare-card strong { flex: 0 0 auto; color: #1d4ed8; font-size: 17px; font-weight: 900; line-height: 1.25; text-align: right; overflow-wrap: anywhere; }
.tourism-fare-card p { margin: 9px 0 0; color: #475569; font-size: 13px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.tourism-fare-card small { display: block; margin-top: 8px; color: #64748b; font-size: 11px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.tourism-fare-card-link-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; color: #1d4ed8; font-size: 12px; font-weight: 900; line-height: 1.2; }
.tourism-fares-empty { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding: 18px; border: 1px dashed #bfdbfe; border-radius: 18px; background: rgba(255,255,255,.72); color: #475569; }
.tourism-fares-empty > span { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: #dbeafe; color: #1d4ed8; font-size: 18px; font-weight: 900; }
.tourism-fares-empty strong { display: block; color: #0f172a; font-size: 14px; font-weight: 900; }
.tourism-fares-empty p { margin: 4px 0 0; font-size: 12px; font-weight: 650; line-height: 1.55; }
.tourism-fares-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; color: #64748b; font-size: 11px; font-weight: 700; line-height: 1.5; }
.tourism-fares-footer span:last-child { flex: 0 0 auto; color: #475569; }

.tourism-content-grid, .tourism-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: start; gap: 18px; margin-top: 22px; }
.tourism-card { background: #fff; border: 1px solid rgba(219,229,242,.7); border-radius: 26px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-card h2, .tourism-showcase h2 { color: #0f172a; margin: 3px 0 0; font-size: 25px; letter-spacing: -.55px; }
.tourism-eyebrow { color: #2563eb; font-size: 11px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
.tourism-body { margin: 18px 0 0; color: #475569; font-size: 15px; font-weight: 620; line-height: 1.72; overflow-wrap: anywhere; white-space: pre-line; }
.tourism-side { display: grid; gap: 18px; }
.tourism-help { background: linear-gradient(145deg, #eff6ff, #f8fbff); border: 1px solid #deebfb; border-radius: 24px; padding: 24px; color: #334155; }
.tourism-help strong { display: block; color: #0f172a; margin-bottom: 8px; }
.tourism-help p { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.58; }
.tourism-next { display: flex; align-items: center; gap: 12px; padding: 20px; background: #eff6ff; border-radius: 24px; text-decoration: none; color: #2563eb; font-weight: 850; }
.tourism-next small { display: block; color: #64748b; font-size: 11px; letter-spacing: .85px; text-transform: uppercase; }

.tourism-values { margin-top: 22px; }
.tourism-values-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 4px; margin-bottom: 15px; }
.tourism-values-header h2 { margin: 3px 0 0; color: #0f172a; font-size: 25px; letter-spacing: -.55px; }
.tourism-values-header p { max-width: 440px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.55; text-align: right; }
.tourism-values-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tourism-value-card { position: relative; min-width: 0; overflow: hidden; padding: clamp(22px, 3vw, 30px); border: 1px solid rgba(191,219,254,.9); border-radius: 26px; background: linear-gradient(145deg, #fff, #eff6ff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-value-card::after { position: absolute; right: -42px; bottom: -72px; width: 170px; height: 170px; border: 26px solid rgba(37,99,235,.07); border-radius: 50%; content: ''; pointer-events: none; }
.tourism-value-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 14px; background: #2563eb; color: #fff; font-weight: 900; box-shadow: 0 8px 16px rgba(37,99,235,.16); }
.tourism-value-card h3 { position: relative; z-index: 1; margin: 5px 0 0; color: #0f172a; font-size: 22px; letter-spacing: -.45px; }
.tourism-value-card p { position: relative; z-index: 1; margin: 13px 0 0; color: #475569; font-size: 15px; font-weight: 620; line-height: 1.68; }
.tourism-contact-action { position: relative; z-index: 1; margin-top: 18px; }

.tourism-feedback-hero { display: flex; align-items: center; gap: 20px; margin-top: 8px; padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(191,219,254,.9); border-radius: 28px; background: linear-gradient(135deg, #0f4d93, #2563eb); color: #fff; box-shadow: 0 16px 34px rgba(15,77,147,.16); }
.tourism-feedback-hero-icon { display: grid; flex: 0 0 58px; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; background: rgba(255,255,255,.16); font-size: 30px; }
.tourism-feedback-hero h1 { max-width: 760px; margin: 7px 0 0; color: #fff; font-size: clamp(28px, 4vw, 46px); letter-spacing: -1.3px; line-height: 1.08; }
.tourism-feedback-hero p { max-width: 700px; margin: 12px 0 0; color: #e8f1ff; font-size: 15px; font-weight: 650; line-height: 1.6; }
.tourism-feedback-hero .tourism-eyebrow { color: #bfdbfe; }
.tourism-feedback-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: start; gap: 18px; margin-top: 22px; }
.tourism-feedback-card { min-width: 0; }
.tourism-feedback-card-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.tourism-feedback-card-header h2 { margin-bottom: 0; }
.tourism-feedback-intro { margin: 7px 0 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.45; }
.tourism-feedback-required, .tourism-feedback-optional { color: #64748b; font-size: 11px; font-weight: 750; }
.tourism-feedback-form { display: grid; gap: 17px; margin-top: 22px; }
.tourism-feedback-field { display: grid; min-width: 0; gap: 7px; }
.tourism-feedback-field label { color: #0f172a; font-size: 13px; font-weight: 850; }
.tourism-feedback-field label > span:not(.tourism-feedback-optional) { color: #2563eb; }
.tourism-feedback-field input, .tourism-feedback-field select, .tourism-feedback-field textarea { display: block; width: 100%; min-width: 0; border: 1px solid #cbd9ea; border-radius: 14px; color: #0f172a; background: #f8fbff; font-size: 14px; font-weight: 650; line-height: 1.45; outline: 0; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.tourism-feedback-field input, .tourism-feedback-field select { min-height: 48px; padding: 10px 13px; }
.tourism-feedback-field textarea { min-height: 150px; padding: 12px 13px; resize: vertical; }
.tourism-feedback-field input::placeholder, .tourism-feedback-field textarea::placeholder { color: #94a3b8; font-weight: 600; }
.tourism-feedback-field input:focus, .tourism-feedback-field select:focus, .tourism-feedback-field textarea:focus { border-color: #2563eb; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tourism-feedback-fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tourism-feedback-rating { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tourism-feedback-rating-option { position: relative; display: grid; min-height: 55px; place-items: center; align-content: center; gap: 2px; border: 1px solid #cbd9ea; border-radius: 13px; background: #f8fbff; color: #1e3a8a; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tourism-feedback-rating-option:hover { border-color: #93c5fd; background: #eff6ff; transform: translateY(-1px); }
.tourism-feedback-rating-option:has(input:focus-visible) { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
.tourism-feedback-rating-option:has(input:checked) { border-color: #2563eb; background: #dbeafe; box-shadow: inset 0 0 0 1px #2563eb; }
.tourism-feedback-rating-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tourism-feedback-rating-option span { font-size: 17px; font-weight: 850; line-height: 1; }
.tourism-feedback-rating-option small { min-height: 12px; color: #64748b; font-size: 10px; font-weight: 750; line-height: 1; }
.tourism-feedback-hint { color: #64748b; font-size: 11px; font-weight: 650; line-height: 1.45; }
.tourism-feedback-hint-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tourism-feedback-count { flex: 0 0 auto; color: #64748b; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 750; }
.tourism-feedback-submit { justify-self: start; gap: 8px; min-height: 46px; padding-inline: 18px; }
.tourism-feedback-submit:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.tourism-feedback-security { display: grid; justify-items: start; gap: 6px; }
.tourism-feedback-turnstile { min-height: 65px; }
.tourism-feedback-security-status { min-height: 18px; margin: 0; color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.45; }
.tourism-feedback-security-status[data-tone="success"] { color: #15803d; }
.tourism-feedback-security-status[data-tone="error"] { color: #b91c1c; }
.tourism-feedback-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.tourism-feedback-status { min-height: 18px; margin: -3px 0 0; color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.5; }
.tourism-feedback-fallback { width: fit-content; color: #1d4ed8; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tourism-feedback-side { min-width: 0; }
.tourism-feedback-side ul { display: grid; gap: 9px; margin: 12px 0 0; padding-left: 19px; color: #475569; font-size: 13px; font-weight: 650; line-height: 1.55; }
.tourism-feedback-contact { display: grid; gap: 2px; }
.tourism-feedback-contact .tourism-subtle-button { justify-self: start; margin-top: 12px; }

.tourism-photo-gallery { margin-top: clamp(28px, 4vw, 42px); }
.tourism-photo-gallery-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 0 4px; margin-bottom: 15px; }
.tourism-photo-gallery-header h2 { margin: 3px 0 0; color: #0f172a; font-size: 25px; letter-spacing: -.55px; }
.tourism-photo-gallery-header p { max-width: 400px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.55; text-align: right; }
.tourism-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.5vw, 22px); }
.tourism-photo-grid--page-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tourism-photo-grid--page-preview.tourism-photo-grid--count-1 { grid-template-columns: 1fr; }
.tourism-photo-grid--page-preview.tourism-photo-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tourism-photo-grid--page-preview:is(.tourism-photo-grid--count-3, .tourism-photo-grid--count-5, .tourism-photo-grid--count-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tourism-photo-grid--page-preview:is(.tourism-photo-grid--count-5, .tourism-photo-grid--count-7) .tourism-photo:last-child { grid-column: span 2; }
.tourism-photo-grid--page-preview .tourism-photo { height: clamp(160px, 18vw, 420px); min-height: 0; aspect-ratio: auto; }
.tourism-photo { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(219,229,242,.9); border-radius: 28px; background: #dbeafe; box-shadow: 0 14px 30px rgba(25,50,82,.08); }
.tourism-photo[type="button"] { padding: 0; cursor: zoom-in; appearance: none; text-align: inherit; }
.tourism-photo:only-child { grid-column: 1 / -1; width: min(1040px, 100%); min-height: 420px; justify-self: center; }
.tourism-photo::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(15,23,42,.26)); content: ''; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.tourism-photo::before { position: absolute; right: 13px; bottom: 13px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; background: rgba(15,23,42,.56); color: #fff; content: '↗'; font-weight: 900; opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.tourism-photo:hover::after, .tourism-photo:focus-visible::after, .tourism-photo:hover::before, .tourism-photo:focus-visible::before { opacity: 1; }
.tourism-photo:hover::before, .tourism-photo:focus-visible::before { transform: translateY(0); }
.tourism-photo:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.tourism-photo:hover img, .tourism-photo:focus-visible img { transform: scale(1.035); }
.tourism-photo--preview { cursor: zoom-in; }
.tourism-photo--captioned::after { opacity: 1; background: linear-gradient(180deg, transparent 35%, rgba(15,23,42,.76)); }
.tourism-photo-caption { position: absolute; z-index: 2; right: 16px; bottom: 14px; left: 16px; display: grid; gap: 3px; color: #fff; text-align: left; text-shadow: 0 1px 5px rgba(2,12,30,.5); pointer-events: none; }
.tourism-photo-caption strong { font-size: 14px; font-weight: 900; line-height: 1.25; }
.tourism-photo-caption span { display: -webkit-box; overflow: hidden; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tourism-gallery-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; margin-top: 16px; padding: 9px 17px; border: 1px solid #bfdbfe; border-radius: 999px; background: #fff; color: #2563eb; font-size: 13px; font-weight: 900; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.tourism-gallery-open:hover, .tourism-gallery-open:focus-visible { background: #eff6ff; transform: translateY(-1px); }
.tourism-gallery-open:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-gallery-page { margin-top: 0; }
.tourism-gallery-page-header { display: flex; align-items: flex-start; gap: 16px; padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(191,219,254,.9); border-radius: 26px; background: linear-gradient(145deg, #fff, #eff6ff); box-shadow: 0 10px 22px rgba(25,50,82,.05); }
.tourism-gallery-page-icon { display: grid; flex: 0 0 50px; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #dbeafe; color: #2563eb; font-size: 24px; font-weight: 900; }
.tourism-gallery-page-header > span:last-child { min-width: 0; }
.tourism-gallery-page h1 { margin: 3px 0 0; color: #0f172a; font-size: clamp(28px, 3.3vw, 46px); letter-spacing: -1.2px; line-height: 1.1; overflow-wrap: anywhere; }
.tourism-gallery-page p { max-width: 690px; margin: 12px 0 0; color: #64748b; font-size: 15px; font-weight: 650; line-height: 1.62; }
.tourism-gallery-page > .tourism-photo-grid { margin-top: clamp(18px, 2vw, 28px); }
.tourism-photo-grid--full { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.tourism-gallery-empty { display: grid; place-items: center; gap: 8px; margin-top: 20px; padding: 34px 20px; border: 1px solid #dbeafe; border-radius: 24px; background: #fff; color: #64748b; text-align: center; }
.tourism-gallery-empty > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #dbeafe; color: #2563eb; font-size: 24px; font-weight: 900; }
.tourism-gallery-empty h2 { margin: 3px 0 0; color: #0f172a; font-size: 20px; }
.tourism-gallery-empty p { max-width: 400px; margin: 0; font-size: 14px; font-weight: 650; line-height: 1.55; }
.tourism-photo-viewer-open { overflow: hidden; }
.tourism-photo-viewer { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: clamp(14px, 3vw, 36px); background: rgba(15,23,42,.88); }
.tourism-photo-viewer-dialog { position: relative; width: min(1180px, 100%); padding-top: 56px; }
.tourism-photo-viewer-stage { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: clamp(10px, 2vw, 22px); }
.tourism-photo-viewer-figure { min-width: 0; margin: 0; }
.tourism-photo-viewer-image { display: block; width: 100%; max-height: calc(100dvh - 154px); border-radius: 22px; background: #0f172a; object-fit: contain; }
.tourism-photo-viewer-figure figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 4px 0; color: #fff; font-size: 13px; font-weight: 750; }
.tourism-photo-viewer-copy { display: grid; gap: 3px; min-width: 0; }
.tourism-photo-viewer-figure figcaption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tourism-photo-viewer-description { color: rgba(255,255,255,.76); font-size: 12px; font-weight: 650; line-height: 1.4; }
.tourism-photo-viewer-count { flex: 0 0 auto; color: rgba(255,255,255,.74); font-size: 12px; }
.tourism-photo-viewer-control, .tourism-photo-viewer-close { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); color: #fff; background: rgba(15,23,42,.72); cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.tourism-photo-viewer-control { width: 52px; height: 52px; border-radius: 999px; font-size: 24px; }
.tourism-photo-viewer-close { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-radius: 14px; font-size: 28px; line-height: 1; }
.tourism-photo-viewer-control:hover, .tourism-photo-viewer-control:focus-visible, .tourism-photo-viewer-close:hover, .tourism-photo-viewer-close:focus-visible { background: #2563eb; transform: translateY(-1px); }
.tourism-photo-viewer-control:focus-visible, .tourism-photo-viewer-close:focus-visible { outline: 3px solid rgba(191,219,254,.92); outline-offset: 3px; }
.tourism-photo-viewer-control:disabled { visibility: hidden; }

.tourism-showcase { margin-top: clamp(30px, 4vw, 44px); }
.tourism-showcase-header { display: flex; gap: 20px; align-items: end; justify-content: space-between; padding: 0 4px; margin-bottom: 15px; }
.tourism-showcase-header p { max-width: 520px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.55; text-align: right; }
.tourism-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 1.5vw, 22px); }
.tourism-listing { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(219,229,242,.7); border-radius: 28px; background: #fff; box-shadow: 0 12px 28px rgba(25,50,82,.07); transition: transform .2s ease, box-shadow .2s ease; }
.tourism-listing:hover { box-shadow: 0 16px 28px rgba(25,50,82,.1); transform: translateY(-3px); }
.tourism-listing-image { position: relative; display: block; height: clamp(220px, 17vw, 280px); overflow: hidden; background: #dbeafe; cursor: pointer; text-decoration: none; }
.tourism-listing-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tourism-listing-image:focus-visible { outline: 3px solid rgba(37,99,235,.62); outline-offset: -4px; }
.tourism-featured { position: absolute; bottom: 12px; left: 12px; border-radius: 999px; padding: 6px 9px; background: #2563eb; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.tourism-listing-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 20px; }
.tourism-listing h3 { margin: 0; color: #0f172a; overflow-wrap: anywhere; font-size: 20px; letter-spacing: -.4px; }
.tourism-listing h3 a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.tourism-listing h3 a:hover, .tourism-listing h3 a:focus-visible { color: #1d4ed8; }
.tourism-listing p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: #475569; font-size: 14px; font-weight: 620; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.tourism-listing-meta { display: grid; gap: 6px; margin-top: 10px; color: #64748b; font-size: 13px; font-weight: 750; line-height: 1.45; }
.tourism-listing-actions { display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; margin-top: auto; padding-top: 16px; }
.tourism-listing-actions > .tourism-button { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.tourism-listing-more { position: relative; flex: 0 0 auto; }
.tourism-listing-more-summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #bfdbfe; border-radius: 999px; color: #2563eb; background: #fff; cursor: pointer; list-style: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.tourism-listing-more-summary::-webkit-details-marker { display: none; }
.tourism-listing-more-summary::marker { content: ''; }
.tourism-listing-more-summary > span { display: block; margin-top: -7px; font-size: 28px; font-weight: 900; letter-spacing: 1px; line-height: 1; }
.tourism-listing-more-summary:hover, .tourism-listing-more-summary:focus-visible, .tourism-listing-more[open] .tourism-listing-more-summary { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; }
.tourism-listing-more-summary:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-listing-more-menu { position: absolute; z-index: 20; right: 0; bottom: calc(100% + 9px); display: grid; gap: 4px; width: max-content; min-width: 210px; max-width: min(260px, calc(100vw - 64px)); padding: 7px; border: 1px solid #dbeafe; border-radius: 16px; background: #fff; box-shadow: 0 18px 38px rgba(15,23,42,.18); }
.tourism-listing-more-item, .tourism-listing-more-menu .tourism-share-button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 11px; color: #0f172a; background: transparent; cursor: pointer; text-align: left; text-decoration: none; font-size: 12px; font-weight: 850; transform: none; }
.tourism-listing-more-item > span:first-child, .tourism-listing-more-menu .tourism-share-icon { display: grid; flex: 0 0 20px; place-items: center; width: 20px; color: #2563eb; font-size: 16px; }
.tourism-listing-more-item:hover, .tourism-listing-more-item:focus-visible, .tourism-listing-more-menu .tourism-share-button:hover, .tourism-listing-more-menu .tourism-share-button:focus-visible { color: #1d4ed8; background: #eff6ff; transform: none; }
.tourism-listing-more-item:focus-visible, .tourism-listing-more-menu .tourism-share-button:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: -1px; }
.tourism-subtle-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 7px 13px; border: 1px solid #bfdbfe; border-radius: 999px; color: #2563eb; background: #fff; cursor: pointer; text-decoration: none; font-size: 12px; font-weight: 850; transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .18s ease; }
.tourism-subtle-button:hover, .tourism-subtle-button:focus-visible { background: #eff6ff; transform: translateY(-1px); }
.tourism-share-button { gap: 7px; }
.tourism-share-icon { font-size: 16px; font-weight: 900; line-height: 1; }
.tourism-share-button:disabled { cursor: default; opacity: .76; transform: none; }
.tourism-share-button[data-share-state="shared"], .tourism-share-button[data-share-state="copied"] { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.tourism-share-button[data-share-state="error"] { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.tourism-detail-copy .tourism-share-button { min-height: 44px; margin-top: 18px; padding-inline: 16px; border-color: rgba(255,255,255,.78); color: #1d4ed8; background: rgba(255,255,255,.96); }
.tourism-detail-copy .tourism-share-button:hover, .tourism-detail-copy .tourism-share-button:focus-visible { background: #fff; }
.tourism-load-more { display: flex; justify-content: center; margin-top: 17px; }
.tourism-load-more button { border: 1px solid #bfdbfe; background: #fff; color: #2563eb; }

.tourism-events-calendar { margin-top: clamp(30px, 4vw, 44px); padding: clamp(20px, 3vw, 34px); overflow: hidden; border: 1px solid rgba(191,219,254,.86); border-radius: 28px; background: #fff; box-shadow: 0 14px 34px rgba(25,50,82,.08); }
.tourism-calendar-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.tourism-calendar-header h2 { margin: 3px 0 0; color: #0f172a; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.7px; }
.tourism-calendar-header p { max-width: 560px; margin: 7px 0 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.5; }
.tourism-calendar-today { flex: 0 0 auto; min-width: 84px; }
.tourism-calendar-toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-top: 24px; padding: 7px; border: 1px solid #dbeafe; border-radius: 16px; background: #f8fbff; }
.tourism-calendar-toolbar button { display: grid; place-items: center; width: 44px; height: 42px; border: 0; border-radius: 12px; color: #1d4ed8; background: transparent; cursor: pointer; font-size: 20px; font-weight: 900; }
.tourism-calendar-toolbar button:hover, .tourism-calendar-toolbar button:focus-visible { background: #dbeafe; }
.tourism-calendar-toolbar button:focus-visible, .tourism-calendar-day:focus-visible, .tourism-calendar-agenda-item:focus-visible { outline: 3px solid rgba(37,99,235,.32); outline-offset: 2px; }
.tourism-calendar-toolbar strong { color: #0f172a; font-size: 17px; font-weight: 900; text-align: center; }
.tourism-calendar-weekdays, .tourism-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tourism-calendar-weekdays { margin-top: 16px; padding-inline: 2px; }
.tourism-calendar-weekdays span { color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-align: center; text-transform: uppercase; }
.tourism-calendar-grid { margin-top: 7px; }
.tourism-calendar-day { display: flex; min-width: 0; min-height: 104px; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; color: #334155; background: #fff; cursor: pointer; text-align: left; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tourism-calendar-day:hover { border-color: #93c5fd; background: #f8fbff; transform: translateY(-1px); }
.tourism-calendar-day--outside { color: #94a3b8; background: #f8fafc; opacity: .72; }
.tourism-calendar-day--has-events { border-color: #bfdbfe; background: #f8fbff; }
.tourism-calendar-day--today .tourism-calendar-day-number { color: #fff; background: #2563eb; }
.tourism-calendar-day--selected { border-color: #2563eb; background: #eff6ff; box-shadow: inset 0 0 0 1px #2563eb; }
.tourism-calendar-day-number { display: grid; place-items: center; align-self: flex-start; width: 27px; height: 27px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.tourism-calendar-day-events { display: grid; min-width: 0; gap: 5px; }
.tourism-calendar-event-marker { display: flex; align-items: center; min-width: 0; gap: 5px; color: #1d4ed8; font-size: 10px; font-weight: 800; line-height: 1.25; }
.tourism-calendar-event-marker > span:first-child { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 999px; background: #2563eb; }
.tourism-calendar-event-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tourism-calendar-more { color: #64748b; font-size: 9px; font-weight: 800; }
.tourism-calendar-agenda { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.tourism-calendar-agenda-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.tourism-calendar-agenda-header h3 { margin: 3px 0 0; color: #0f172a; font-size: 20px; letter-spacing: -.35px; }
.tourism-calendar-agenda-header small { color: #64748b; font-size: 11px; font-weight: 850; }
.tourism-calendar-agenda-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.tourism-calendar-agenda-item { position: relative; display: grid; min-width: 0; gap: 4px; padding: 15px 44px 15px 16px; border: 1px solid #dbeafe; border-radius: 16px; color: #0f172a; background: #f8fbff; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.tourism-calendar-agenda-item:hover { border-color: #93c5fd; background: #eff6ff; transform: translateY(-1px); }
.tourism-calendar-agenda-item time { color: #2563eb; font-size: 10px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.tourism-calendar-agenda-item strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }
.tourism-calendar-agenda-item span { overflow-wrap: anywhere; color: #64748b; font-size: 11px; font-weight: 700; line-height: 1.4; }
.tourism-calendar-agenda-item b { position: absolute; top: 50%; right: 16px; color: #2563eb; font-size: 18px; transform: translateY(-50%); }
.tourism-calendar-empty, .tourism-calendar-undated { margin: 12px 0 0; color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.5; }
.tourism-calendar-empty { grid-column: 1 / -1; padding: 18px; border-radius: 14px; background: #f8fafc; text-align: center; }
.tourism-calendar-undated { padding: 10px 12px; border-radius: 12px; background: #fff7ed; color: #9a3412; }

/* Church cards share the same stacked layout as other cards. A side-by-side
   layout needs more width than a featured grid cell can guarantee. */
.tourism-listing--church .tourism-listing-image { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.tourism-listing--church .tourism-listing-image img { object-fit: cover; object-position: center; }

.tourism-back { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; margin: 0 0 10px 3px; color: #2563eb; text-decoration: none; font-size: 13px; font-weight: 850; }
.tourism-detail-intro { min-height: clamp(450px, 36vw, 540px); }
.tourism-detail-media { display: grid; min-width: 0; align-content: start; background: #f8fbff; }
.tourism-detail-image { min-height: 440px; }
.tourism-photo-gallery--listing { width: 100%; margin: 0; padding: clamp(16px, 2vw, 24px); border-top: 1px solid #dbe5f2; background: #fff; }
.tourism-photo-gallery--listing .tourism-photo-gallery-header { align-items: center; margin-bottom: 12px; padding: 0; }
.tourism-photo-gallery--listing .tourism-photo-gallery-header h2 { font-size: 20px; letter-spacing: -.35px; }
.tourism-photo-gallery--listing .tourism-photo-gallery-header p { max-width: 300px; font-size: 12px; }
.tourism-photo-gallery--listing .tourism-photo-grid { width: 100%; margin: 0; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; border: 0; }
.tourism-photo-gallery--listing .tourism-photo { grid-column: auto; width: 100%; min-height: 0; aspect-ratio: 4 / 3; border: 0; border-radius: 14px; }
.tourism-photo-gallery--listing .tourism-gallery-open { width: 100%; margin-top: 12px; }
.tourism-detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.tourism-detail-grid > .tourism-side { position: sticky; top: 18px; }
.tourism-info { display: grid; gap: 20px; }
.tourism-detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tourism-fact { display: flex; gap: 10px; padding: 14px; border-radius: 16px; background: #f6f9fd; color: #475569; font-size: 14px; font-weight: 700; line-height: 1.5; }
.tourism-fact strong { display: block; color: #0f172a; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.tourism-fact > span:first-child { flex: 0 0 auto; }
.tourism-fact > span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tourism-fact-content { min-width: 0; }
.tourism-fact-contact { display: block; overflow-wrap: anywhere; }
.tourism-copy-button { display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; margin-top: 9px; padding: 0; border: 1px solid #bfdbfe; border-radius: 11px; color: #1d4ed8; background: #fff; cursor: pointer; line-height: 1; transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .18s ease; }
.tourism-copy-button:hover, .tourism-copy-button:focus-visible { border-color: #93c5fd; background: #eff6ff; transform: translateY(-1px); }
.tourism-copy-icon { position: relative; display: block; width: 15px; height: 16px; color: currentColor; }
.tourism-copy-icon::before, .tourism-copy-icon::after { position: absolute; box-sizing: border-box; width: 10px; height: 12px; border: 1.75px solid currentColor; border-radius: 3px; content: ''; }
.tourism-copy-icon::before { top: 0; left: 0; opacity: .48; }
.tourism-copy-icon::after { right: 0; bottom: 0; background: inherit; }
.tourism-copy-button[data-copy-state="success"] { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.tourism-copy-button[data-copy-state="success"] .tourism-copy-icon::before { top: 1px; left: 5px; width: 6px; height: 10px; border-width: 0 2px 2px 0; border-radius: 0; opacity: 1; transform: rotate(45deg); }
.tourism-copy-button[data-copy-state="success"] .tourism-copy-icon::after { display: none; }
.tourism-copy-button[data-copy-state="error"] { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.tourism-copy-button[data-copy-state="error"] .tourism-copy-icon::before { top: -1px; left: 4px; width: auto; height: auto; border: 0; border-radius: 0; content: '!'; font-size: 19px; font-weight: 900; line-height: 1; opacity: 1; }
.tourism-copy-button[data-copy-state="error"] .tourism-copy-icon::after { display: none; }
.tourism-copy-button:disabled { cursor: default; opacity: .76; }
.tourism-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tourism-schedule { padding: clamp(18px, 2.4vw, 24px); border: 1px solid #bfdbfe; border-radius: 20px; background: linear-gradient(135deg, #eff6ff 0%, #fff 72%); box-shadow: 0 10px 22px rgba(37,99,235,.05); }
.tourism-schedule-header { display: flex; align-items: center; gap: 12px; }
.tourism-schedule-header h2 { margin: 3px 0 0; color: #0f172a; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.45px; line-height: 1.18; }
.tourism-schedule-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #dbeafe; color: #2563eb; font-size: 21px; font-weight: 900; }
.tourism-schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px; margin-top: 17px; }
.tourism-schedule-entry { min-width: 0; padding: 13px; border: 1px solid rgba(191,219,254,.8); border-radius: 15px; background: rgba(255,255,255,.82); }
.tourism-schedule-entry strong { display: block; color: #1e3a5f; font-size: 13px; font-weight: 900; }
.tourism-schedule-entry p { margin: 6px 0 0; color: #475569; font-size: 12px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.tourism-schedule-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 13px; }
.tourism-schedule-updated { color: #475569; font-size: 11px; font-weight: 850; line-height: 1.5; white-space: nowrap; }
.tourism-schedule-note { margin: 0; color: #64748b; font-size: 11px; font-weight: 650; line-height: 1.5; text-align: right; }
.tourism-airport-guide { padding: clamp(18px, 2.4vw, 24px); border: 1px solid #bfdbfe; border-radius: 20px; background: linear-gradient(135deg, #eff6ff 0%, #ffffff 72%); box-shadow: 0 10px 22px rgba(37,99,235,.06); }
.tourism-airport-guide-header h2 { margin: 4px 0 0; color: #0f172a; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.45px; line-height: 1.18; }
.tourism-airport-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.tourism-airport-guide-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 13px; border: 1px solid rgba(191,219,254,.78); border-radius: 15px; background: rgba(255,255,255,.82); color: #475569; }
.tourism-airport-guide-item > span:first-child { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #dbeafe; color: #2563eb; font-size: 16px; font-weight: 900; }
.tourism-airport-guide-item > span:last-child { min-width: 0; }
.tourism-airport-guide-item strong { display: block; color: #1e3a5f; font-size: 11px; font-weight: 900; letter-spacing: .72px; text-transform: uppercase; }
.tourism-airport-guide-item small { display: block; margin-top: 4px; color: #475569; font-size: 13px; font-weight: 720; line-height: 1.48; }
.tourism-airport-guide .tourism-button { margin-top: 15px; min-height: 45px; }
.tourism-airport-guide-note { margin: 11px 0 0; color: #64748b; font-size: 11px; font-weight: 700; line-height: 1.5; }
.tourism-map { overflow: hidden; border-radius: 18px; border: 1px solid #dbe5f2; height: 330px; }
.tourism-map iframe { width: 100%; height: 100%; border: 0; }
.tourism-references { padding-top: 2px; }
.tourism-references h2 { margin: 4px 0 0; color: #0f172a; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -.45px; }
.tourism-reference-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tourism-reference-list a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 8px 11px; overflow-wrap: anywhere; border: 1px solid #bfdbfe; border-radius: 12px; color: #1d4ed8; background: #f8fbff; font-size: 13px; font-weight: 800; line-height: 1.35; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.tourism-reference-list a:hover, .tourism-reference-list a:focus-visible { border-color: #93c5fd; background: #eff6ff; transform: translateY(-1px); }
.tourism-reference-list a:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-detail-actions { display: grid; gap: 10px; }
.tourism-detail-actions a, .tourism-detail-actions button { width: 100%; min-height: 46px; }
.tourism-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 42px; padding: 22px 4px 20px; border-top: 1px solid #dbe5f2; color: #64748b; font-size: 12px; font-weight: 700; }
.tourism-footer-primary { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tourism-footer-tourism-logo { display: block; flex: 0 0 72px; width: 72px; height: 64px; object-fit: contain; }
.tourism-footer-office { display: grid; min-width: 0; gap: 3px; line-height: 1.35; }
.tourism-footer-office-meta { display: inline-flex; align-items: center; flex-wrap: wrap; justify-self: start; gap: 8px; min-width: 0; }
.tourism-footer-kicker, .tourism-footer-partner-label { color: #2563eb; font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.tourism-footer-office strong { color: #1e293b; font-size: 15px; font-weight: 900; }
.tourism-footer-contact { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; color: #1d4ed8; font-size: 11px; font-weight: 850; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.tourism-footer-contact:hover, .tourism-footer-contact:focus-visible { border-color: #93c5fd; background: #eff6ff; transform: translateY(-1px); }
.tourism-footer-contact:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-footer-facebook { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #dbeafe; border-radius: 12px; background: #eff6ff; color: #1877f2; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 900; line-height: 1; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.tourism-footer-facebook span { display: block; margin-top: 4px; line-height: .8; }
.tourism-footer-facebook:hover, .tourism-footer-facebook:focus-visible { border-color: #1877f2; background: #1877f2; color: #fff; transform: translateY(-1px); }
.tourism-footer-facebook:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-footer-partner { display: grid; flex: 0 0 auto; justify-items: end; gap: 7px; text-align: right; }
.tourism-footer-partner-logos { display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
.tourism-footer-partner-link { display: block; border-radius: 12px; line-height: 0; transition: opacity .18s ease; }
.tourism-footer-partner-link:hover { opacity: .82; }
.tourism-footer-partner-link:focus-visible { outline: 3px solid rgba(37,99,235,.32); outline-offset: 3px; }
.tourism-footer-city-partner-logo { display: block; width: 76px; height: 76px; object-fit: contain; }
.tourism-footer-pdot-logo { display: block; width: auto; height: 64px; }
.tourism-footer-updated { color: #94a3b8; font-size: 11px; font-weight: 750; }
.tourism-pattern-band {
  width: calc(100% + (2 * var(--tourism-shell-gutter)));
  height: clamp(54px, 4.5vw, 72px);
  margin-top: 28px;
  margin-right: calc(-1 * var(--tourism-shell-gutter));
  margin-bottom: -42px;
  margin-left: calc(-1 * var(--tourism-shell-gutter));
  background-color: #2563eb;
  background-image: url('/assets/tourism/tacloban-tourism-pattern.webp');
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 980px) {
  .tourism-hero, .tourism-detail-intro { grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr); min-height: clamp(460px, 52vw, 560px); }
  .tourism-hero { grid-template-columns: 1fr; min-height: clamp(520px, 62vw, 680px); }
  .tourism-arrival { grid-template-columns: minmax(0, 1fr) minmax(230px, .7fr); }
  .tourism-history-header, .tourism-history-timeline > header, .tourism-heritage-header, .tourism-heritage-yolanda-header, .tourism-heritage-sto-nino-header, .tourism-yolanda-story-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .tourism-history-header p, .tourism-history-timeline > header p, .tourism-heritage-header p, .tourism-heritage-yolanda-header p, .tourism-heritage-sto-nino-header p, .tourism-yolanda-story-header p { text-align: left; }
  .tourism-sangyaw-soundtrack, .tourism-sangyaw-reel { grid-template-columns: 1fr; gap: 24px; }
  .tourism-sangyaw-soundtrack-frame, .tourism-sangyaw-reel-frame { justify-self: start; }
  .tourism-content-grid, .tourism-detail-grid { grid-template-columns: 1fr; }
  .tourism-feedback-layout { grid-template-columns: 1fr; }
  .tourism-detail-grid > .tourism-side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tourism-detail-actions { align-content: start; }
  .tourism-home-intro { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
  .tourism-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .tourism-photo:first-child:nth-last-child(n+3) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .tourism-photo-grid--page-preview .tourism-photo:first-child:nth-last-child(n+3) { grid-column: auto; aspect-ratio: auto; }
  .tourism-photo-gallery--listing .tourism-photo:first-child:nth-last-child(n+3) { grid-column: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  .tourism-shell { --tourism-shell-gutter: 18px; padding: 16px var(--tourism-shell-gutter) 28px; }
  .tourism-nav { align-items: center; flex-direction: row; gap: 12px; padding: 12px 14px; border-radius: 20px; }
  .tourism-brand { width: auto; }
  .tourism-brand-copy { max-width: calc(100% - 172px); }
  .tourism-brand-mark { flex-basis: 52px; width: 52px; height: 52px; border-radius: 0; }
  .tourism-menu-trigger { min-height: 44px; padding: 9px 12px; }
  .tourism-menu-label-full { display: none; }
  .tourism-menu-label-short { display: inline; }
  .tourism-drawer-panel { width: min(380px, calc(100% - 22px)); padding: 22px; }
  .tourism-drawer-header { top: -22px; margin: -22px -22px 0; padding: 22px 22px 12px; }
  .tourism-hero, .tourism-detail-intro { grid-template-columns: 1fr; min-height: 0; border-radius: 24px; }
  .tourism-hero { min-height: min(680px, calc(100svh - 32px)); }
  .tourism-arrival { grid-template-columns: 1fr; gap: 0; margin-top: 14px; border-radius: 20px; }
  .tourism-arrival-copy { padding: 20px; }
  .tourism-arrival-side { min-height: 160px; padding: 22px 20px; }
  .tourism-history { margin-top: 24px; }
  .tourism-history-header { padding: 0 2px; }
  .tourism-history-chapters { grid-template-columns: 1fr; gap: 14px; }
  .tourism-history-chapter { border-radius: 20px; padding: 20px; }
  .tourism-history-timeline { margin-top: 14px; padding: 20px; border-radius: 20px; }
  .tourism-history-timeline li { grid-template-columns: 1fr; gap: 9px; padding-bottom: 21px; }
  .tourism-history-timeline li::before { top: 37px; left: 7px; bottom: -9px; }
  .tourism-history-timeline li > span { padding-left: 28px; }
  .tourism-history-timeline li > span::before { left: 0; }
  .tourism-history-sources { margin-inline: 2px; }
  .tourism-heritage { margin-top: 24px; }
  .tourism-heritage-header { padding: 0 2px; }
  .tourism-heritage-pillars, .tourism-heritage-photo-grid, .tourism-yolanda-story-grid { grid-template-columns: 1fr; gap: 14px; }
  .tourism-heritage-photo-grid.tourism-sto-nino-photo-grid { grid-template-columns: 1fr; }
  .tourism-heritage-card { border-radius: 20px; padding: 20px; }
  .tourism-heritage-taklub { grid-template-columns: 1fr; gap: 18px; margin-top: 14px; padding: 20px; border-radius: 20px; }
  .tourism-heritage-taklub .tourism-taklub-photo { width: 100%; max-width: 360px; justify-self: start; }
  .tourism-heritage-sto-nino { margin-top: 14px; padding: 20px; border-radius: 20px; }
  .tourism-sto-nino-story { align-items: flex-start; flex-direction: column; gap: 16px; margin: 16px 0; padding: 18px; border-radius: 18px; }
  .tourism-sto-nino-story .tourism-subtle-button { width: 100%; justify-content: center; }
  .tourism-heritage-yolanda { margin-top: 14px; padding: 20px; border-radius: 20px; }
  .tourism-yolanda-story { margin: 16px 0; padding: 18px; border-radius: 18px; }
  .tourism-yolanda-story-card { padding: 17px; border-radius: 16px; }
  .tourism-sangyaw-soundtrack, .tourism-sangyaw-reel { margin-top: 14px; padding: 22px 20px; border-radius: 20px; }
  .tourism-sangyaw-soundtrack-frame, .tourism-sangyaw-reel-frame { justify-self: stretch; width: 100%; border-radius: 18px; }
  .tourism-heritage-sources { margin-inline: 2px; }
  .tourism-fares { margin-top: 14px; padding: 20px; border-radius: 20px; }
  .tourism-fares-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .tourism-fares-header p { text-align: left; }
  .tourism-fare-group { margin-top: 20px; }
  .tourism-fare-group + .tourism-fare-group { padding-top: 20px; }
  .tourism-fare-group-header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .tourism-fare-group-header p { text-align: left; }
  .tourism-fares-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .tourism-hero .tourism-hero-media { min-height: 0; }
  .tourism-hero--history .tourism-hero-media img { object-position: 62% center; }
  .tourism-hero-caption { width: auto; max-width: none; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; font-size: 10px; line-height: 1.45; text-align: left; }
  .tourism-detail-image { min-height: clamp(300px, 82vw, 420px); }
  .tourism-photo-gallery--listing { margin-top: 0; padding: 16px 18px 18px; }
  .tourism-photo-gallery--listing .tourism-photo-gallery-header { align-items: flex-start; flex-direction: row; gap: 12px; }
  .tourism-photo-gallery--listing .tourism-photo-gallery-header p { text-align: right; }
  .tourism-photo-gallery--listing .tourism-photo-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 7px; }
  .tourism-hero-copy, .tourism-detail-copy { min-height: 0; padding: 28px; }
  .tourism-hero .tourism-hero-copy { width: 100%; padding: 28px; }
  .tourism-hero h1 { font-size: clamp(38px, 10vw, 56px); }
  .tourism-sangyaw-hero-logo { width: min(250px, 72vw); margin: 13px 0 -2px; }
  .tourism-content-grid, .tourism-detail-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .tourism-feedback-hero { align-items: flex-start; gap: 14px; margin-top: 2px; border-radius: 22px; }
  .tourism-feedback-layout { gap: 14px; margin-top: 14px; }
  .tourism-feedback-card { padding: 20px; border-radius: 22px; }
  .tourism-feedback-card-header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .tourism-feedback-fields-row { grid-template-columns: 1fr; gap: 17px; }
  .tourism-feedback-rating { gap: 6px; }
  .tourism-feedback-rating-option { min-height: 52px; }
  .tourism-feedback-submit { width: 100%; }
  .tourism-home-billboard { border-radius: 22px; }
  .tourism-home-waterfront { grid-template-columns: 1fr; min-height: clamp(560px, 132vw, 700px); margin-top: 14px; border-radius: 22px; }
  .tourism-home-waterfront::before { background: linear-gradient(0deg, rgba(5,34,78,.94) 0%, rgba(5,34,78,.75) 42%, rgba(5,34,78,.18) 77%, rgba(5,34,78,.06) 100%), linear-gradient(90deg, rgba(3,22,54,.23), transparent 70%); }
  .tourism-home-waterfront-media { position: absolute; inset: 0; min-height: 0; }
  .tourism-home-waterfront-copy { align-self: end; justify-self: stretch; width: 100%; padding: 28px 22px; }
  .tourism-home-waterfront-copy h1 { font-size: clamp(36px, 10vw, 54px); }
  .tourism-home-featured-event { grid-template-columns: 1fr; margin-top: 14px; border-radius: 22px; }
  .tourism-home-featured-event-media { min-height: 0; max-height: min(650px, 150vw); aspect-ratio: 905 / 1280; }
  .tourism-home-featured-event-copy { padding: 24px 22px 26px; }
  .tourism-home-featured-event-copy h2 { font-size: clamp(27px, 8vw, 38px); }
  .tourism-home-featured-event-description { -webkit-line-clamp: 5; }
  .tourism-home-featured-event-actions { width: 100%; }
  .tourism-home-featured-event-actions .tourism-button, .tourism-home-featured-event-actions .tourism-subtle-button { flex: 1 1 160px; }
  .tourism-home-intro { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .tourism-home-status { border-radius: 20px; padding: 22px; }
  .tourism-plan { margin-top: 24px; }
  .tourism-plan-header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 0 2px; }
  .tourism-plan-header p { text-align: left; }
  .tourism-plan-grid { grid-template-columns: 1fr; gap: 14px; }
  .tourism-card { border-radius: 20px; padding: 20px; }
  .tourism-detail-grid > .tourism-side { grid-template-columns: 1fr; }
  .tourism-airport-guide-grid { grid-template-columns: 1fr; }
  .tourism-schedule-footer { flex-direction: column; gap: 4px; }
  .tourism-schedule-note { text-align: left; }
  .tourism-showcase { margin-top: 14px; }
  .tourism-showcase-header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 0 2px; }
  .tourism-showcase-header p { text-align: left; }
  .tourism-events-calendar { margin-top: 14px; padding: 18px 14px; border-radius: 22px; }
  .tourism-calendar-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tourism-calendar-today { align-self: stretch; }
  .tourism-calendar-toolbar { grid-template-columns: 42px minmax(0, 1fr) 42px; margin-top: 16px; }
  .tourism-calendar-toolbar button { width: 42px; height: 40px; }
  .tourism-calendar-toolbar strong { font-size: 15px; }
  .tourism-calendar-weekdays, .tourism-calendar-grid { gap: 3px; }
  .tourism-calendar-weekdays { margin-top: 13px; }
  .tourism-calendar-weekdays span { font-size: 9px; letter-spacing: 0; }
  .tourism-calendar-day { min-height: 62px; gap: 5px; padding: 5px; border-radius: 10px; }
  .tourism-calendar-day-number { width: 24px; height: 24px; font-size: 11px; }
  .tourism-calendar-day-events { display: flex; flex-wrap: wrap; gap: 3px; }
  .tourism-calendar-event-marker { gap: 0; }
  .tourism-calendar-event-marker > span:first-child { flex-basis: 7px; width: 7px; height: 7px; }
  .tourism-calendar-event-name, .tourism-calendar-more { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .tourism-calendar-agenda { margin-top: 16px; padding-top: 16px; }
  .tourism-calendar-agenda-header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .tourism-calendar-agenda-list { grid-template-columns: 1fr; }
  .tourism-values { margin-top: 14px; }
  .tourism-values-header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 0 2px; }
  .tourism-values-header p { text-align: left; }
  .tourism-values-grid { grid-template-columns: 1fr; gap: 14px; }
  .tourism-photo-gallery { margin-top: 24px; }
  .tourism-photo-gallery-header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 0 2px; }
  .tourism-photo-gallery-header p { text-align: left; }
  .tourism-photo-grid { grid-template-columns: 1fr; gap: 16px; }
  .tourism-photo-grid--page-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .tourism-photo-grid--page-preview .tourism-photo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tourism-photo:only-child { grid-column: 1 / -1; }
  .tourism-gallery-page-header { border-radius: 20px; padding: 20px; }
  .tourism-gallery-page h1 { font-size: 28px; }
  .tourism-gallery-page p { font-size: 14px; }
  .tourism-photo-viewer { padding: 12px; }
  .tourism-photo-viewer-dialog { padding-top: 52px; }
  .tourism-photo-viewer-stage { display: block; }
  .tourism-photo-viewer-image { max-height: calc(100dvh - 138px); border-radius: 18px; }
  .tourism-photo-viewer-control { position: absolute; z-index: 1; top: calc(50% - 22px); width: 44px; height: 44px; font-size: 21px; }
  .tourism-photo-viewer-previous { left: 10px; }
  .tourism-photo-viewer-next { right: 10px; }
  .tourism-footer { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 30px; padding-top: 20px; }
  .tourism-footer-partner { justify-items: start; text-align: left; }
  .tourism-footer-partner-logos { justify-content: flex-start; }
  .tourism-pattern-band {
    height: clamp(40px, 6.5vw, 48px);
    margin-top: 18px;
    margin-right: calc(-1 * var(--tourism-shell-gutter));
    margin-bottom: -28px;
    margin-left: calc(-1 * var(--tourism-shell-gutter));
  }
}

@media (max-width: 420px) {
  .tourism-shell { --tourism-shell-gutter: 12px; padding: 12px; }
  .tourism-nav { padding: 12px; border-radius: 18px; }
  .tourism-brand { gap: 10px; }
  .tourism-brand-mark { flex-basis: 48px; width: 48px; height: 48px; border-radius: 0; }
  .tourism-brand-copy { max-width: calc(100% - 122px); }
  .tourism-brand-title { font-size: 15px; }
  .tourism-menu-trigger { width: 44px; min-height: 44px; padding: 0; }
  .tourism-menu-label { display: none; }
  .tourism-drawer-panel { width: min(360px, calc(100% - 18px)); padding: 20px; }
  .tourism-drawer-header { top: -20px; gap: 10px; margin: -20px -20px 0; padding: 20px 20px 12px; }
  .tourism-drawer-header strong { font-size: 18px; }
  .tourism-drawer-actions { gap: 6px !important; }
  .tourism-drawer-search-toggle, .tourism-drawer-close { width: 44px; height: 44px; border-radius: 12px; }
  .tourism-drawer-search { margin-top: 16px; }
  .tourism-drawer-links { margin-top: 22px; }
  .tourism-hero, .tourism-detail-intro { border-radius: 20px; }
  .tourism-hero-copy, .tourism-detail-copy { padding: 20px; }
  .tourism-hero .tourism-hero-copy { padding: 20px; }
  .tourism-hero h1, .tourism-detail-intro h1 { font-size: 31px; }
  .tourism-hero p { font-size: 14px; }
  .tourism-hero-actions { align-items: stretch; flex-direction: column; margin-top: 20px; width: 100%; }
  .tourism-hero-actions .tourism-button, .tourism-hero-link { width: 100%; }
  .tourism-hero-link { justify-content: center; }
  .tourism-plan-link { border-radius: 20px; padding: 0; }
  .tourism-plan-link > span:not(.tourism-plan-thumbnail) { padding-block: 16px; }
  .tourism-plan-link > b { padding-right: 16px; }
  .tourism-grid { grid-template-columns: 1fr; gap: 14px; }
  .tourism-listing-image { height: 220px; }
  .tourism-listing--church .tourism-listing-image { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .tourism-listing--church .tourism-listing-image img { object-fit: cover; object-position: center; }
  .tourism-listing-actions { align-items: center; flex-direction: row; flex-wrap: nowrap; }
  .tourism-listing-actions > .tourism-button { width: auto; }
  .tourism-listing-more-menu a, .tourism-listing-more-menu button { width: 100%; }
  .tourism-detail-copy .tourism-share-button { width: 100%; }
  .tourism-contact-action { justify-content: center; width: 100%; }
  .tourism-photo-gallery--listing { padding: 14px 12px 16px; }
  .tourism-photo-gallery--listing .tourism-photo-gallery-header { flex-direction: column; gap: 4px; }
  .tourism-photo-gallery--listing .tourism-photo-gallery-header p { text-align: left; }
  .tourism-photo-gallery--listing .tourism-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tourism-photo { border-radius: 20px; }
  .tourism-gallery-page-header { gap: 12px; padding: 18px; }
  .tourism-gallery-page-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 14px; font-size: 21px; }
  .tourism-footer-tourism-logo { flex-basis: 64px; width: 64px; height: 56px; }
  .tourism-footer-office strong { font-size: 14px; }
  .tourism-footer-city-partner-logo { width: 64px; height: 64px; }
  .tourism-footer-pdot-logo { width: auto; height: 54px; }
  .tourism-pattern-band { margin-top: 16px; margin-bottom: -12px; }
}

@media (max-width: 340px) {
  .tourism-drawer-panel { width: calc(100% - 12px); padding: 16px; scroll-padding-top: 82px; }
  .tourism-drawer-header { top: -16px; gap: 8px; margin: -16px -16px 0; padding: 16px 16px 10px; }
  .tourism-drawer-header strong { font-size: 17px; }
  .tourism-drawer-actions { gap: 5px !important; }
  .tourism-drawer-search-toggle, .tourism-drawer-close { width: 44px; height: 44px; }
  .tourism-drawer-search { margin-top: 14px; scroll-margin-top: 82px; }
  .tourism-drawer-search-field { grid-template-columns: 20px minmax(0, 1fr) 44px; gap: 7px; padding-right: 4px; padding-left: 11px; }
  .tourism-drawer-search-field button { width: 44px; height: 44px; }
}

/* These media sections meet the viewport, so their outer corners must stay
   square at every breakpoint. Kept after the responsive rules on purpose. */
.tourism-hero, .tourism-detail-intro, .tourism-home-billboard, .tourism-home-waterfront { width: calc(100% + (2 * var(--tourism-shell-gutter))); margin-inline: calc(-1 * var(--tourism-shell-gutter)); border-inline-width: 0; border-radius: 0; }
.tourism-home-waterfront { margin-top: 0; }

/* The primary navigation follows the same full-bleed treatment, while its
   own padding keeps the brand and menu controls comfortably aligned. */
.tourism-nav { width: calc(100% + (2 * var(--tourism-shell-gutter))); margin-top: clamp(-30px, -2vw, -16px); margin-inline: calc(-1 * var(--tourism-shell-gutter)); border: 0; border-bottom: 1px solid rgba(219,229,242,.92); border-radius: 0; box-shadow: 0 5px 16px rgba(25,50,82,.05); }
.tourism-home-shell .tourism-nav { margin-bottom: 0; }

@media (max-width: 420px) {
  .tourism-nav { margin-top: -12px; }
}

/* Tacloban Guide is a lightweight, official-content search surface. It keeps
   the familiar floating guide available without bringing back a remote AI
   dependency or taking visitors away from the public site. */
body.tourism-assistant-open { position: fixed; right: 0; left: 0; width: 100%; overflow: hidden; }
.tourism-assistant-launcher:focus-visible, .tourism-assistant-close:focus-visible, .tourism-assistant-suggestions button:focus-visible, .tourism-assistant-clear:focus-visible, .tourism-assistant-submit:focus-visible, .tourism-assistant-result:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 3px; }
.tourism-assistant-launcher { position: fixed; z-index: 1100; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2f7df0, #0f4d93); box-shadow: 0 18px 38px rgba(15,77,147,.34), 0 0 0 7px rgba(255,255,255,.74); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .16s ease; }
.tourism-assistant-launcher:hover { box-shadow: 0 22px 44px rgba(15,77,147,.4), 0 0 0 8px rgba(255,255,255,.86); transform: translateY(-3px) scale(1.02); }
.tourism-assistant-launcher svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.tourism-assistant-launcher > span { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: #22c55e; }
.tourism-assistant-launcher::after { position: absolute; right: calc(100% + 13px); padding: 8px 11px; border: 1px solid #dbe5f2; border-radius: 11px; color: #0f172a; background: rgba(255,255,255,.98); box-shadow: 0 8px 22px rgba(15,23,42,.12); content: attr(data-label); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .16s ease, transform .16s ease; white-space: nowrap; }
.tourism-assistant-launcher:hover::after, .tourism-assistant-launcher:focus-visible::after { opacity: 1; transform: translateX(0); }
.tourism-assistant-launcher[aria-expanded="true"] { opacity: 0; pointer-events: none; transform: scale(.82); }
.tourism-assistant[hidden] { display: none; }
.tourism-assistant { position: fixed; z-index: 1300; inset: 0; visibility: hidden; pointer-events: none; }
.tourism-assistant.is-open { visibility: visible; pointer-events: auto; }
.tourism-assistant-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15,23,42,.36); cursor: default; opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(3px); }
.tourism-assistant.is-open .tourism-assistant-backdrop { opacity: 1; }
.tourism-assistant-panel { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; width: min(410px, calc(100% - 48px)); height: min(660px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid rgba(203,217,234,.94); border-radius: 28px; background: #fff; box-shadow: 0 26px 72px rgba(15,23,42,.3); opacity: 0; transform: translateY(18px) scale(.97); transform-origin: bottom right; transition: opacity .2s ease, transform .22s ease; }
.tourism-assistant.is-open .tourism-assistant-panel { opacity: 1; transform: translateY(0) scale(1); }
.tourism-assistant-header { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 18px 18px 15px; border-bottom: 1px solid #e4ebf4; background: linear-gradient(145deg, #f8fbff, #eef5ff); }
.tourism-assistant-avatar, .tourism-assistant-message-avatar { display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(145deg, #3b82f6, #0f4d93); box-shadow: 0 8px 18px rgba(37,99,235,.2); }
.tourism-assistant-avatar { width: 48px; height: 48px; border-radius: 16px; font-size: 17px; font-weight: 900; }
.tourism-assistant-heading { display: grid; min-width: 0; gap: 2px; }
.tourism-assistant-kicker { color: #2563eb; font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.tourism-assistant-heading strong { overflow: hidden; color: #0f172a; font-size: 20px; letter-spacing: -.35px; text-overflow: ellipsis; white-space: nowrap; }
.tourism-assistant-heading small { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 10px; font-weight: 750; }
.tourism-assistant-heading small i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.tourism-assistant-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dbe5f2; border-radius: 14px; color: #475569; background: rgba(255,255,255,.84); cursor: pointer; font-size: 26px; line-height: 1; transition: color .18s ease, background-color .18s ease; }
.tourism-assistant-close:hover { color: #fff; background: #0f4d93; }
.tourism-assistant-conversation { display: grid; align-content: start; min-height: 0; gap: 15px; overflow-y: auto; overscroll-behavior: contain; padding: 20px 18px 16px; background: linear-gradient(180deg, #f8fbff, #fff 42%); scrollbar-width: thin; }
.tourism-assistant-message { display: flex; align-items: flex-end; gap: 9px; min-width: 0; }
.tourism-assistant-message-avatar { width: 30px; height: 30px; border-radius: 11px; font-size: 12px; font-weight: 900; }
.tourism-assistant-message > p, .tourism-assistant-response > div { min-width: 0; max-width: calc(100% - 39px); margin: 0; padding: 12px 13px; border: 1px solid #e4ebf4; border-radius: 17px 17px 17px 5px; color: #334155; background: #fff; box-shadow: 0 7px 18px rgba(15,23,42,.05); font-size: 13px; font-weight: 650; line-height: 1.5; }
.tourism-assistant-response > div { display: grid; width: calc(100% - 39px); max-width: none; gap: 10px; }
.tourism-assistant-search-status { margin: 0; color: #475569; font-size: 12px; font-weight: 750; line-height: 1.45; }
.tourism-assistant-results[hidden] { display: none; }
.tourism-assistant-results { display: grid; min-width: 0; gap: 7px; }
.tourism-assistant-result { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 9px 10px; border: 1px solid #e4ebf4; border-radius: 14px; color: #334155; background: #f8fbff; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.tourism-assistant-result:hover, .tourism-assistant-result:focus-visible { border-color: #93c5fd; color: #1d4ed8; background: #eff6ff; transform: translateX(2px); }
.tourism-assistant-result-icon { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 12px; color: #2563eb; background: #e5efff; font-size: 15px; }
.tourism-assistant-result > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.tourism-assistant-result strong { overflow: hidden; color: #0f172a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tourism-assistant-result small { display: -webkit-box; overflow: hidden; color: #64748b; font-size: 10px; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tourism-assistant-result > span:last-child { color: #94a3b8; font-weight: 900; }
.tourism-assistant-suggestions { display: grid; gap: 8px; padding: 10px 18px 12px; border-top: 1px solid #edf2f7; background: #fff; }
.tourism-assistant-suggestions-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.tourism-assistant-suggestions-head > span { color: #64748b; font-size: 9px; font-weight: 850; letter-spacing: .65px; text-transform: uppercase; }
.tourism-assistant-suggestion-list { display: flex; gap: 7px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.tourism-assistant-suggestion-list::-webkit-scrollbar { display: none; }
.tourism-assistant-suggestion-list button { flex: 0 0 auto; min-height: 36px; padding: 7px 11px; border: 1px solid #cbd9ea; border-radius: 999px; color: #1d4ed8; background: #f8fbff; cursor: pointer; font-size: 11px; font-weight: 800; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.tourism-assistant-suggestion-list button:hover { border-color: #2563eb; color: #fff; background: #2563eb; }
.tourism-assistant-composer { display: grid; gap: 7px; padding: 13px 18px max(15px, env(safe-area-inset-bottom)); border-top: 1px solid #e4ebf4; background: #fff; }
.tourism-assistant-composer > label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tourism-assistant-search-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 5px; min-width: 0; min-height: 54px; padding: 4px; overflow: hidden; border: 1px solid #cbd9ea; border-radius: 17px; background: #f8fbff; transition: border-color .18s ease, box-shadow .18s ease; }
.tourism-assistant-search-field:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.11); }
.tourism-assistant-search-field input { display: block; width: 100%; min-width: 0; max-width: 100%; height: 44px; padding: 0 8px 0 11px; border: 0; outline: 0; color: #0f172a; background: transparent; font-size: 16px; font-weight: 700; }
.tourism-assistant-search-field input::-webkit-search-decoration, .tourism-assistant-search-field input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.tourism-assistant-search-field input::placeholder { color: #94a3b8; font-weight: 650; }
.tourism-assistant-clear, .tourism-assistant-submit { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; cursor: pointer; }
.tourism-assistant-clear { color: #64748b; background: transparent; font-size: 21px; }
.tourism-assistant-clear:hover { color: #fff; background: #64748b; }
.tourism-assistant-search-field input:placeholder-shown + .tourism-assistant-clear { visibility: hidden; }
.tourism-assistant-submit { color: #fff; background: #2563eb; }
.tourism-assistant-submit:hover { background: #1d4ed8; }
.tourism-assistant-submit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

@media (max-width: 720px) {
  .tourism-assistant-launcher { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 58px; height: 58px; box-shadow: 0 16px 32px rgba(15,77,147,.32), 0 0 0 6px rgba(255,255,255,.78); }
  .tourism-assistant-launcher::after { display: none; }
  .tourism-assistant-launcher svg { width: 28px; height: 28px; }
  .tourism-assistant-panel { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; width: auto; height: min(720px, calc(100dvh - max(20px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))); max-height: none; border-radius: 25px; transform-origin: bottom center; }
  .tourism-assistant-header { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; padding: 14px 14px 12px; }
  .tourism-assistant-avatar { width: 44px; height: 44px; border-radius: 14px; }
  .tourism-assistant-heading strong { font-size: 18px; }
  .tourism-assistant-conversation { gap: 13px; padding: 16px 14px 13px; }
  .tourism-assistant-suggestions { padding: 9px 14px 10px; }
  .tourism-assistant-composer { padding: 11px 14px max(12px, env(safe-area-inset-bottom)); }
}

@media (max-width: 340px) {
  .tourism-assistant-panel { right: 4px; bottom: max(4px, env(safe-area-inset-bottom)); left: 4px; height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(4px, env(safe-area-inset-bottom))); border-radius: 18px; }
  .tourism-assistant-header { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 8px; padding: 11px 10px; }
  .tourism-assistant-avatar { width: 40px; height: 40px; border-radius: 13px; }
  .tourism-assistant-kicker { font-size: 8px; }
  .tourism-assistant-heading strong { font-size: 16px; }
  .tourism-assistant-heading small { font-size: 9px; }
  .tourism-assistant-conversation { padding: 13px 10px; }
  .tourism-assistant-suggestions { padding: 8px 10px; }
  .tourism-assistant-composer { padding: 9px 10px max(10px, env(safe-area-inset-bottom)); }
  .tourism-assistant-search-field { grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}