/* ─────────────────────────────────────────────────────────────────────
 * SOT Blocks — front-end styles.
 *
 * Every chrome value reads from the theme's brand tokens (tokens.css).
 * No hex literals. Drop in any SOT-family site running stot-main and
 * the block re-skins to that site's anchor automatically.
 *
 * Naming: .sotb (root) + BEM-ish modifiers.
 * ─────────────────────────────────────────────────────────────────── */

.sotb { box-sizing: border-box; }
.sotb *, .sotb *::before, .sotb *::after { box-sizing: inherit; }

/* ─────────────────────────────────────────────────────────────────────
 * Full-bleed escape: any block with .sotb-bleed breaks out of its parent
 * and spans the full viewport width. Works inside .stot-shell, .stot-page,
 * core/group blocks — anything that's centered with auto margins.
 * ─────────────────────────────────────────────────────────────── */
.sotb-bleed,
.stot-search-page > .stot-hero-map,
.stot-search-page .stot-shell > .stot-hero-map {
    width: 100vw;
    max-width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* The bleed escape is visible only when no ancestor clips horizontally.
   Theme wrappers on pages composed with SOT blocks must allow visible
   overflow so the bleed actually shows. */
.stot-page,
.stot-search-page,
.stot-search-page .stot-shell,
.stot-page .stot-shell {
    overflow: visible;
}
/* The body still gets overflow-x clip so the bleed never produces a
   horizontal scrollbar on narrow viewports. clip preserves sticky pos
   (overflow:hidden would break sticky headers). */
body { overflow-x: clip; }

/* ─────────────────────────────────────────────────────────────────────
 * .sotb-section — flexible layout container.
 * Width, background, columns, ratio, padding, vertical alignment all
 * driven by class names. No inline magic.
 * ─────────────────────────────────────────────────────────────────── */

.sotb-section { width: 100%; margin: 0; }
.sotb-section__inner {
    width: 100%;
    margin-inline: auto;
    display: flex; flex-direction: column;
}

/* — width presets — */
.sotb-section--w-default .sotb-section__inner { max-width: 1280px; padding-inline: clamp(1rem, 3vw, 2rem); }
.sotb-section--w-wide    .sotb-section__inner { max-width: 1600px; padding-inline: clamp(1rem, 3vw, 2rem); }
.sotb-section--w-full    .sotb-section__inner { max-width: none;   padding-inline: clamp(1rem, 3vw, 2rem); }

/* Full-bleed escape from a constrained parent (e.g. .stot-shell at 1280) */
.sotb-section--w-full {
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

/* — padding presets (top + bottom) — */
.sotb-section--p-none { padding-block: 0; }
.sotb-section--p-sm   { padding-block: clamp(0.75rem, 1.5vw, 1.25rem); }
.sotb-section--p-md   { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.sotb-section--p-lg   { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sotb-section--p-xl   { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* — backgrounds — */
.sotb-section--bg-none    { background: transparent; }
.sotb-section--bg-paper   { background: var(--paper, #FBF8F2); }
.sotb-section--bg-paper-2 { background: var(--paper-2, #F3EFE6); }
.sotb-section--bg-ocean   { background: var(--ocean, #0A4D6E); color: var(--paper, #FBF8F2); }
.sotb-section--bg-forest  { background: var(--forest, #1F5A36); color: var(--paper, #FBF8F2); }
.sotb-section--bg-image   { color: var(--paper, #FBF8F2); }

.sotb-section--bg-ocean,
.sotb-section--bg-forest,
.sotb-section--bg-image {
    --brand:      var(--paper);
    --brand-deep: var(--paper-2);
}
.sotb-section--bg-ocean h1, .sotb-section--bg-ocean h2, .sotb-section--bg-ocean h3,
.sotb-section--bg-forest h1, .sotb-section--bg-forest h2, .sotb-section--bg-forest h3,
.sotb-section--bg-image h1, .sotb-section--bg-image h2, .sotb-section--bg-image h3 { color: inherit; }

.sotb-section--rounded { border-radius: var(--r-xl, 24px); overflow: hidden; }
.sotb-section--rounded.sotb-section--w-full { border-radius: 0; }

/* — column layouts (children flow into N columns) — */
.sotb-section--cols-1 .sotb-section__inner { display: flex; flex-direction: column; }
.sotb-section--cols-2 .sotb-section__inner,
.sotb-section--cols-3 .sotb-section__inner,
.sotb-section--cols-4 .sotb-section__inner {
    display: grid;
    align-items: start;
}
.sotb-section--cols-2 .sotb-section__inner { grid-template-columns: 1fr 1fr; }
.sotb-section--cols-3 .sotb-section__inner { grid-template-columns: 1fr 1fr 1fr; }
.sotb-section--cols-4 .sotb-section__inner { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* — 2-column ratios — */
.sotb-section--cols-2.sotb-section--ratio-60-40 .sotb-section__inner { grid-template-columns: 60fr 40fr; }
.sotb-section--cols-2.sotb-section--ratio-40-60 .sotb-section__inner { grid-template-columns: 40fr 60fr; }
.sotb-section--cols-2.sotb-section--ratio-67-33 .sotb-section__inner { grid-template-columns: 2fr 1fr; }
.sotb-section--cols-2.sotb-section--ratio-33-67 .sotb-section__inner { grid-template-columns: 1fr 2fr; }
.sotb-section--cols-2.sotb-section--ratio-70-30 .sotb-section__inner { grid-template-columns: 70fr 30fr; }
.sotb-section--cols-2.sotb-section--ratio-30-70 .sotb-section__inner { grid-template-columns: 30fr 70fr; }

/* — gap presets — */
.sotb-section--gap-sm .sotb-section__inner { gap: 1rem; }
.sotb-section--gap-md .sotb-section__inner { gap: 2rem; }
.sotb-section--gap-lg .sotb-section__inner { gap: 3.5rem; }

/* — vertical alignment of children — */
.sotb-section--v-top    .sotb-section__inner { align-items: start; }
.sotb-section--v-center .sotb-section__inner { align-items: center; }
.sotb-section--v-bottom .sotb-section__inner { align-items: end; }

/* — mobile: collapse multi-col to single col, optional reverse — */
@media (max-width: 760px) {
    .sotb-section--cols-2 .sotb-section__inner,
    .sotb-section--cols-3 .sotb-section__inner,
    .sotb-section--cols-4 .sotb-section__inner {
        grid-template-columns: 1fr;
    }
    .sotb-section--rev-mobile .sotb-section__inner { direction: rtl; }
    .sotb-section--rev-mobile .sotb-section__inner > * { direction: ltr; }
}

/* — child blocks inside a section: kill their own outer margin so the
     section's gap controls everything cleanly — */
.sotb-section .sotb { margin: 0; }

.sotb-section__head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 0 0 1.25rem; gap: 1rem; flex-wrap: wrap;
}
.sotb-section__title {
    font-family: var(--serif, Georgia, serif);
    font-weight: 400; letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0; color: var(--ink, #0F1F24);
}
.sotb-section__link {
    color: var(--brand, var(--ocean, #0A4D6E));
    text-decoration: none; font-weight: 600; font-size: .9rem;
}
.sotb-section__link:hover { color: var(--brand-deep, var(--ocean-deep, #063349)); }

/* ─── Hero Header (full-bleed, taller, editorial) ─── */
.sotb-hero-header {
    position: relative;
    color: var(--paper, #FBF8F2);
    isolation: isolate;
    display: flex;
    align-items: center;
}
.sotb-hero-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--brand, var(--ocean, #0A4D6E));
}
.sotb-hero-header[style*="background-image"]::before {
    background: transparent;
}
.sotb-hero-header--ocean  { --brand: var(--ocean);  --brand-deep: var(--ocean-deep); }
.sotb-hero-header--forest { --brand: var(--forest); --brand-deep: var(--forest-deep); }
.sotb-hero-header--paper  { --brand: var(--paper-2, #F3EFE6); --brand-deep: var(--paper-3, #E7E0D2); color: var(--ink); }
.sotb-hero-header--ink    { --brand: var(--ink-2, #2B3D44); --brand-deep: var(--ink, #0F1F24); }

.sotb-hero-header__inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
}
.sotb-hero-header--align-center { text-align: center; }
.sotb-hero-header--align-center .sotb-hero-header__inner > * { margin-inline: auto; }

.sotb-hero-header__eyebrow {
    text-transform: uppercase; letter-spacing: .18em;
    font-size: .78rem; font-weight: 600; opacity: .85;
    margin: 0 0 1rem;
}
.sotb-hero-header__title {
    font-family: var(--serif, Georgia, serif);
    font-weight: 500; letter-spacing: -0.012em; line-height: 1.15;
    /* Was clamp(2.4rem, 6vw, 4.5rem) — 4.5rem = 72px on desktop, billboard
       scale. Restrained to 24–32 px which is the OTA / destination-board
       norm and keeps the imagery + CTA dominant. */
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    margin: 0 0 0.75rem; color: inherit;
    max-width: 22ch;
    text-wrap: balance;
}
.sotb-hero-header--align-center .sotb-hero-header__title { max-width: 24ch; }
.sotb-hero-header__lead {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem); line-height: 1.5;
    margin: 0 0 1.25rem; opacity: .92; max-width: 50ch;
}
.sotb-hero-header__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 1rem 1.75rem; border-radius: var(--r-md, 10px);
    background: var(--paper, #fff); color: var(--brand-deep, var(--ocean-deep));
    font-weight: 700; text-decoration: none; font-size: 1rem;
    transition: background .15s, color .15s, transform .15s;
}
.sotb-hero-header__cta:hover {
    background: var(--brand-soft, var(--ocean-soft, #D3E3EC));
    color: var(--brand-deep, var(--ocean-deep));
}

/* ─── Hero ─── */
.sotb-hero {
    position: relative;
    border-radius: var(--r-xl, 24px);
    overflow: hidden;
    margin: 1rem 0 1.5rem;
    background-size: cover; background-position: center;
    color: var(--paper, #FBF8F2);
    isolation: isolate;
}
.sotb-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--brand, var(--ocean));
    opacity: 1;
}
.sotb-hero[style*="background-image"]::before {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--brand-deep, var(--ocean-deep)) 80%, transparent) 0%,
        color-mix(in srgb, var(--brand-deep, var(--ocean-deep)) 30%, transparent) 60%,
        transparent 100%);
}
.sotb-hero--forest { --brand: var(--forest); --brand-deep: var(--forest-deep); }
.sotb-hero--paper  { --brand: var(--paper-2, #F3EFE6); --brand-deep: var(--paper-3, #E7E0D2); color: var(--ink); }
.sotb-hero__inner {
    position: relative; z-index: 2;
    padding: clamp(2rem, 5vw, 4rem);
    max-width: 720px;
    display: flex; flex-direction: column; justify-content: center;
    height: 100%;
    min-height: inherit;
}
.sotb-hero--align-center { text-align: center; }
.sotb-hero--align-center .sotb-hero__inner { margin-inline: auto; align-items: center; }
.sotb-hero__eyebrow {
    text-transform: uppercase; letter-spacing: .16em;
    font-size: .72rem; font-weight: 600; opacity: .85;
    margin: 0 0 .75rem;
}
.sotb-hero__title {
    font-family: var(--serif, Georgia, serif);
    font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
    /* Drastically smaller than the old clamp(2rem, 5vw, 3.5rem) which
       produced billboard-sized 56 px headlines on desktop. OTAs and
       destination-marketing sites keep hero headlines in the 24–32 px
       range so the image and the search/CTA do the heavy lifting. */
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    margin: 0 0 0.6rem; color: inherit;
    max-width: 24ch;
    text-wrap: balance;
}
.sotb-hero__lead {
    font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5;
    margin: 0 0 1.5rem; opacity: .92;
}
.sotb-hero__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.5rem; border-radius: var(--r-md, 10px);
    background: var(--paper, #fff); color: var(--brand-deep, var(--ocean-deep));
    font-weight: 700; text-decoration: none;
    transition: background .15s, color .15s;
    align-self: flex-start;
}
.sotb-hero--align-center .sotb-hero__cta { align-self: center; }
.sotb-hero__cta:hover { background: var(--brand-soft, var(--ocean-soft, #D3E3EC)); color: var(--brand-deep, var(--ocean-deep)); }

/* ─── Hero Slider ─── */
.sotb-slider { /* shares hero anchors via .sotb-hero--* */ position: relative; border-radius: var(--r-xl, 24px); overflow: hidden; margin: 1rem 0 1.5rem; color: var(--paper); isolation: isolate; }
/* When the slider is used as the top-of-page hero, drop the card-style
   chrome — full-bleed only works without rounded corners + margins. The
   .sotb-bleed class is set by the `fullBleed` attribute; the :first-child
   rule catches sliders pinned to the very top of <main> even without the
   attribute being toggled in the editor. */
.sotb-slider.sotb-bleed,
main > .sotb-slider:first-child,
main > .wp-block-sot-hero-slider:first-child > .sotb-slider {
    border-radius: 0;
    margin: 0;
}
.sotb-slider__slides { position: absolute; inset: 0; z-index: 1; }
.sotb-slider__slide  { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.sotb-slider__slide.is-active { opacity: 1; }
.sotb-slider__slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--brand-deep, var(--ocean-deep)) 78%, transparent) 0%,
        color-mix(in srgb, var(--brand-deep, var(--ocean-deep)) 30%, transparent) 60%,
        transparent 100%);
}
.sotb-slider::before { content: ""; position: absolute; inset: 0; background: var(--brand, var(--ocean)); z-index: 0; }
.sotb-slider__inner {
    position: relative; z-index: 2;
    padding: clamp(2rem, 5vw, 4rem);
    /* On full-bleed sliders, align the text rail to the page shell instead
       of hugging the absolute viewport edge on wide screens. The inner
       still wraps its own max-width via the text column below. */
    max-width: min(1280px, 100%);
    margin-inline: auto;
    width: 100%;
    display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: inherit;
}
.sotb-slider__title,
.sotb-slider__lead,
.sotb-slider__cta { max-width: 36rem; }
.sotb-slider__title {
    font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
    /* Match the standalone hero — billboard headlines are out, working
       OTA hero text is in. The serif is still the heading typeface but
       restrained to 22–28 px so the imagery and CTA read first. */
    font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0 0 0.6rem;
    text-wrap: balance;
}
.sotb-slider__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5; margin: 0 0 1.5rem; opacity: .92; }
.sotb-slider__cta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.5rem; border-radius: var(--r-md, 10px);
    background: var(--paper); color: var(--brand-deep, var(--ocean-deep));
    font-weight: 700; text-decoration: none; align-self: flex-start;
    transition: background .15s, color .15s;
}
.sotb-slider__cta:hover { background: var(--brand-soft, var(--ocean-soft)); }
.sotb-slider__dots { position: absolute; bottom: 1.25rem; left: 1.5rem; z-index: 3; display: flex; gap: .5rem; }
.sotb-slider__dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
    background: rgba(251, 248, 242, .4); transition: background .15s;
}
.sotb-slider__dot.is-active,
.sotb-slider__dot:hover { background: var(--paper); }

/* ─── Stats Grid ─── */
.sotb-stats {
    display: grid; gap: 1rem; margin: 1rem 0 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
}
.sotb-stat {
    background: var(--paper-2, #F3EFE6);
    border: 1px solid var(--line, #DDD3BE);
    border-radius: var(--r-lg, 16px);
    padding: 1.25rem; text-align: center;
}
.sotb-stat__value {
    font-family: var(--serif); font-weight: 500; line-height: 1; margin: 0 0 .25rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--brand-deep, var(--ocean-deep, #063349));
}
.sotb-stat__label {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-3, #546870); font-weight: 600; margin: 0;
}

/* ─── Welcome Strip ─── */
.sotb-welcome {
    text-align: center; padding: 1rem 0; margin: 0;
    font-family: var(--serif); font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    color: var(--ink-2, #2B3D44); letter-spacing: -0.005em;
}

/* ─── News + POI shared cards ─── */
.sotb-cards {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.sotb-card {
    background: #fff;
    border: 1px solid var(--line, #DDD3BE);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    transition: box-shadow .2s;
}
.sotb-card:hover { box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12)); }
.sotb-card__cover {
    aspect-ratio: 16 / 10; display: block;
    background: var(--paper-2, #F3EFE6); overflow: hidden;
}
.sotb-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sotb-card__body { padding: 1rem; }
.sotb-card__kicker {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--ink-3, #546870); font-weight: 600; margin: 0 0 .25rem;
}
.sotb-card__title {
    font-family: var(--serif); font-weight: 500; font-size: 1rem;
    margin: 0 0 .25rem; letter-spacing: -0.01em; line-height: 1.25;
}
.sotb-card__title a { color: inherit; text-decoration: none; }
.sotb-card__title a:hover { color: var(--brand, var(--ocean)); }
.sotb-card__meta { font-size: .82rem; color: var(--ink-3, #546870); margin: 0; }

/* ─── Weather ─── */
.sotb-weather { margin: 1rem 0 1.5rem; }
.sotb-weather__head { margin: 0 0 1rem; }
.sotb-weather__loc {
    font-size: .85rem; color: var(--ink-3, #546870); margin: .25rem 0 0;
}
.sotb-weather__row {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.sotb-weather__day {
    background: var(--paper-2, #F3EFE6);
    border: 1px solid var(--line, #DDD3BE);
    border-radius: var(--r-md, 10px);
    padding: .75rem .5rem; text-align: center;
    display: flex; flex-direction: column; gap: .25rem;
    min-width: 0;
}
.sotb-weather__day.is-today {
    background: var(--brand-soft, var(--ocean-soft, #D3E3EC));
    border-color: var(--brand, var(--ocean));
}
.sotb-weather__weekday {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-3, #546870); font-weight: 700; margin: 0;
}
.sotb-weather__date { font-size: .7rem; color: var(--ink-3, #546870); margin: 0; }
.sotb-weather__icon { font-size: 1.5rem; line-height: 1; margin: .25rem 0; }
.sotb-weather__label { font-size: .7rem; color: var(--ink-2, #2B3D44); margin: 0; }
.sotb-weather__temp {
    margin: .25rem 0 0; font-size: .85rem; font-weight: 700;
    color: var(--brand-deep, var(--ocean-deep)); display: flex; gap: .35rem; justify-content: center;
}
.sotb-weather__min { color: var(--ink-3, #546870); font-weight: 500; }

@media (max-width: 760px) {
    .sotb-weather__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sotb-weather__day:nth-child(n+5) { grid-column: span 1; }
}
@media (max-width: 480px) {
    .sotb-weather__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sotb-weather--empty {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1rem; text-align: center;
    color: var(--ink-3); font-size: .9rem;
}

/* ─────────────────────── Sister Sites ─────────────────────── */
.sotb-sister-sites { margin: 1.5rem 0; }
.sotb-sister-sites__head { margin-bottom: 1.25rem; }
.sotb-sister-sites__lead {
    margin: .5rem 0 0; max-width: 60ch;
    color: var(--ink-3, #546870); font-size: .95rem;
}
.sotb-sister-sites__grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}
.sotb-sister-card {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: var(--r-lg, 16px);
    background: var(--paper-2, #F3EFE6);
    border: 1px solid var(--line, #DDD3BE);
    color: var(--ink, #0F1F24);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    aspect-ratio: 5 / 3;
}
.sotb-sister-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12));
    border-color: var(--ink-4, #8B9CA3);
}
.sotb-sister-card--ocean  { --accent: var(--ocean,  #0A4D6E); }
.sotb-sister-card--forest { --accent: var(--forest, #1F5A36); }
.sotb-sister-card__mark {
    display: flex; flex-direction: column; gap: .15rem;
}
.sotb-sister-card__wordmark {
    font-family: var(--glamore, var(--serif, Georgia, serif));
    font-size: 1.65rem; line-height: 1;
    color: var(--accent, var(--ocean));
    text-transform: lowercase; letter-spacing: .02em;
}
.sotb-sister-card__subline {
    font-family: var(--serif, Georgia, serif);
    font-size: .8rem; letter-spacing: .14em;
    text-transform: lowercase; color: var(--ink-2, #2B3D44);
}
.sotb-sister-card__role {
    align-self: flex-start;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--accent, var(--ocean));
    background: rgba(255,255,255,.6);
    padding: .25rem .55rem; border-radius: 999px;
    border: 1px solid currentColor;
}
.sotb-sister-card__cta {
    font-size: .9rem; font-weight: 700;
    color: var(--accent, var(--ocean));
}

/* ─────────────────────── Apps ─────────────────────── */
.sotb-apps { margin: 1.5rem 0; }
.sotb-apps__head { margin-bottom: 1.5rem; }
.sotb-apps__title {
    font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 3vw, 2rem); margin: 0;
}
.sotb-apps__lead {
    margin: .5rem 0 0; max-width: 60ch;
    color: var(--ink-3, #546870); font-size: .95rem;
}
.sotb-apps--ocean  { --apps-accent: var(--ocean);  --apps-accent-deep: var(--ocean-deep); }
.sotb-apps--forest { --apps-accent: var(--forest); --apps-accent-deep: var(--forest-deep); }
.sotb-apps--paper  { --apps-accent: var(--ink);    --apps-accent-deep: var(--ink-2); }

.sotb-apps__grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.sotb-apps--strip .sotb-apps__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.sotb-app {
    display: flex; gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--line, #DDD3BE);
    border-radius: var(--r-lg, 16px);
    transition: box-shadow .15s, border-color .15s;
}
.sotb-app:hover {
    border-color: var(--apps-accent, var(--ocean));
    box-shadow: var(--shadow-card);
}
.sotb-apps--strip .sotb-app { flex-direction: column; }

.sotb-app__icon {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 14px; overflow: hidden;
    background: var(--apps-accent-deep, var(--ocean-deep));
}
.sotb-app__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sotb-app__body { flex: 1; min-width: 0; }
.sotb-app__name {
    font-family: var(--serif); font-weight: 500;
    letter-spacing: -0.01em; font-size: 1.2rem; line-height: 1.15;
    margin: 0 0 .25rem; color: var(--apps-accent-deep, var(--ocean-deep));
}
.sotb-app__tagline {
    font-size: .9rem; line-height: 1.4;
    color: var(--ink-3, #546870); margin: 0 0 .9rem;
}

.sotb-app__badges {
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.sotb-app__cta {
    text-decoration: none; display: inline-flex;
    transition: opacity .15s;
}
.sotb-app__cta:hover { opacity: .85; }

.sotb-app__badge {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--ink, #0F1F24); color: #fff;
    border-radius: 10px;
    padding: .5rem .9rem .5rem .75rem;
    font-family: var(--sans, system-ui, sans-serif);
    line-height: 1;
}
.sotb-app__badge svg { display: block; }
.sotb-app__badge-text { display: flex; flex-direction: column; line-height: 1; }
.sotb-app__badge-pre  { font-size: .58rem; opacity: .85; letter-spacing: .04em; }
.sotb-app__badge strong { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 1px; }

@media (max-width: 600px) {
    .sotb-app { flex-direction: column; }
    .sotb-app__icon { width: 56px; height: 56px; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Travel-destination blocks: Why-Timor / Travel Tips / Experience Grid
 * / Stories. All use the brand tokens defined by stot-main so the
 * blocks re-skin per subsite automatically.
 *
 * Shared head pattern (eyebrow + heading + intro) — small caps eyebrow,
 * Glamore serif heading, narrow body lead.
 * ─────────────────────────────────────────────────────────────────── */

.sotb-why,
.sotb-tips,
.sotb-exp,
.sotb-stories {
    width: 100%;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

.sotb-why__head,
.sotb-tips__head,
.sotb-exp__head,
.sotb-stories__head {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}

.sotb-why__eyebrow,
.sotb-tips__eyebrow,
.sotb-exp__eyebrow,
.sotb-stories__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ocean, #0A4D6E);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.sotb-why__heading,
.sotb-tips__heading,
.sotb-exp__heading,
.sotb-stories__heading {
    font-family: var(--glamore, var(--serif, Georgia, "Times New Roman", serif));
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 0.8rem;
    color: var(--ink, #0F1F24);
}

.sotb-why__intro,
.sotb-tips__intro,
.sotb-exp__intro,
.sotb-stories__intro {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--ink-2, #2C4751);
    line-height: 1.55;
    margin: 0;
}

/* ─── Why Timor ───────────────────────────────────────────── */
.sotb-why {
    background: var(--paper, #FBF8F2);
}
/* Explicit 3-column grid on desktop — the previous `auto-fill minmax(280px,1fr)`
   rule fitted 4 columns on a 1200px shell, so 6 items rendered 4 + 2 with
   visible dead space to the right of the second row. With 6 items this
   pattern gives perfect 3 + 3 symmetry; 2-up on tablets and 1-up on phones
   keeps it readable down the breakpoints. */
.sotb-why__grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 960px) {
    .sotb-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .sotb-why__grid { grid-template-columns: 1fr; }
}
.sotb-why__item {
    display: flex;
    gap: 1rem;
    padding: 1.4rem 1.3rem;
    background: #fff;
    border: 1px solid var(--line, #DDD3BE);
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sotb-why__item:hover {
    transform: translateY(-2px);
    border-color: var(--ocean, #0A4D6E);
    box-shadow: 0 10px 28px -10px rgba(10, 77, 110, 0.22);
}
/* Icon slot — accepts an emoji string OR an inline SVG. We deliberately
   rendered the emoji as text in the past but the cartoon glyphs (🐠 ☕ ⛰
   etc.) clashed with the Fraunces serif headings. The new render.php
   prefers an SVG/iconKey attribute and falls back to the emoji string
   only as a last resort, so legacy block instances don't break. */
.sotb-why__emoji,
.sotb-why__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-2, #F3EFE6);
    border-radius: 12px;
    color: var(--ocean, #0A4D6E);
    line-height: 1;
}
.sotb-why__emoji  { font-size: 2rem; }
.sotb-why__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sotb-why__body { flex: 1; min-width: 0; }
/* Card title — was Glamore at 1.15rem which rendered as small-caps-ish
   decorative type only 1px larger than body, collapsing hierarchy. Bump
   to 22 px Fraunces 600 sentence-case so the title actually reads as a
   title. */
.sotb-why__title {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: none;
    margin: 0 0 0.4rem;
    color: var(--ink, #0F1F24);
    max-width: 28ch; /* keep titles tight even when the card stretches */
}
.sotb-why__copy {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2, #2C4751);
    margin: 0;
    max-width: 60ch;
}

/* ── Why-Timor image variant ─────────────────────────────────
   When an item has an imageUrl, switch the card from horizontal
   (icon | text) to vertical (full-width image on top, text below).
   This is the OTA-style "discover" card pattern used by Booking,
   Airbnb, Tripadvisor — a real photo carries more weight than an
   illustrative icon. We keep the icon variant as the fallback for
   items the user hasn't generated AI imagery for yet.
   ────────────────────────────────────────────────────────── */
.sotb-why__item--has-image {
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.sotb-why__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-2, #F3EFE6);
    /* Pull the image flush to the card edge — the card border-radius
       on the parent already clips it via overflow:hidden. */
    border-radius: 0;
}
.sotb-why__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sotb-why__item--has-image .sotb-why__body {
    padding: 1.2rem 1.3rem 1.4rem;
}
/* Card-wide anchor — when linkUrl is set the whole card surface
   is clickable. We reset the anchor's text colour and decoration so
   the inner type styling wins, and add the OTA-style image-zoom on
   hover for tactile feedback. */
.sotb-why__item--linked .sotb-why__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.sotb-why__item--linked:hover .sotb-why__media img {
    transform: scale(1.04);
}
/* "Learn more →" CTA that appears under the body copy when the
   card is linked. Keeps the affordance explicit without needing a
   button (the whole card is the button). */
.sotb-why__cta {
    display: inline-block;
    margin-top: 0.85rem;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ocean, #0A4D6E);
    transition: transform 0.15s ease;
}
.sotb-why__item--linked:hover .sotb-why__cta {
    transform: translateX(3px);
}

/* ─── Travel Tips ─────────────────────────────────────────── */
.sotb-tips {
    background: var(--paper-2, #F3EFE6);
}
/* Same 3-col balance as Why-Timor — 6 tips on 4 cols rendered as an
   asymmetric 4 + 2 with dead space. 3 + 3 reads as a single coherent
   band of practical info. */
.sotb-tips__grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 880px) {
    .sotb-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sotb-tips__grid { grid-template-columns: 1fr; }
}
.sotb-tips__item {
    padding: 1.3rem 1.2rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(15, 31, 36, 0.06);
}
.sotb-tips__emoji,
.sotb-tips__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--paper-2, #F3EFE6);
    color: var(--ocean, #0A4D6E);
    margin-bottom: 0.6rem;
    line-height: 1;
}
.sotb-tips__emoji { font-size: 1.5rem; background: transparent; padding: 0; }
.sotb-tips__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sotb-tips__title {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: none;
    margin: 0 0 0.35rem;
    color: var(--ink, #0F1F24);
    max-width: 24ch;
}
.sotb-tips__copy {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-2, #2C4751);
    margin: 0;
    max-width: 60ch;
}

/* Linked tip card — when a linkUrl is set, the whole card becomes
   an <a> with a "Read more →" affordance. */
.sotb-tips__item--linked {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.sotb-tips__item--linked:hover {
    transform: translateY(-2px);
    border-color: var(--ocean, #0A4D6E);
    box-shadow: 0 14px 30px -14px rgba(15, 31, 36, 0.18);
}
.sotb-tips__cta {
    display: inline-block;
    margin-top: 0.65rem;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ocean, #0A4D6E);
    letter-spacing: 0.01em;
}
.sotb-tips__item--linked:hover .sotb-tips__cta {
    color: var(--ocean-deep, #063349);
}

/* ── Travel-tips image variant ─────────────────────────────────
   When an item has an imageUrl (or one is inferred from iconKey at
   render time and the file exists on disk), switch the card from
   "icon + text only" to "photo on top, text below". Same Booking/
   Airbnb discover-card pattern we use on the Why-Timor cards. */
.sotb-tips__item--has-image {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sotb-tips__item--has-image .sotb-tips__body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
}
.sotb-tips__media {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: var(--paper-2, #F3EFE6);
    border-radius: 0;
}
.sotb-tips__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sotb-tips__item--has-image.sotb-tips__item--linked:hover .sotb-tips__media img {
    transform: scale(1.04);
}
/* Tone down the icon chip when an image is present — the image
   does the visual work, the icon becomes a small accent. */
.sotb-tips__item--has-image .sotb-tips__emoji,
.sotb-tips__item--has-image .sotb-tips__icon {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
}
.sotb-tips__item--has-image .sotb-tips__icon svg {
    width: 18px;
    height: 18px;
}

/* ─── Experience Grid ─────────────────────────────────────── */
.sotb-exp { background: var(--paper, #FBF8F2); }
.sotb-exp__grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.5rem;
}
.sotb-exp--cols-3 .sotb-exp__grid { grid-template-columns: repeat(3, 1fr); }
.sotb-exp--cols-2 .sotb-exp__grid { grid-template-columns: repeat(2, 1fr); }
.sotb-exp--cols-3 .sotb-exp__card:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px)  {
    .sotb-exp--cols-3 .sotb-exp__grid,
    .sotb-exp--cols-2 .sotb-exp__grid { grid-template-columns: repeat(2, 1fr); }
    .sotb-exp--cols-3 .sotb-exp__card:first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px)  {
    .sotb-exp__grid { grid-template-columns: 1fr !important; }
    .sotb-exp--cols-3 .sotb-exp__card:first-child { grid-column: auto; }
}

.sotb-exp__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line, #DDD3BE);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sotb-exp__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px -16px rgba(10, 77, 110, 0.28);
}
.sotb-exp__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--paper-2, #F3EFE6), var(--paper, #FBF8F2));
    overflow: hidden;
}
.sotb-exp--cols-3 .sotb-exp__card:first-child .sotb-exp__media {
    aspect-ratio: 16 / 11;
}
.sotb-exp__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sotb-exp__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.18;
}
.sotb-exp__copy {
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.sotb-exp__kicker {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ocean, #0A4D6E);
    font-weight: 700;
}
.sotb-exp__title {
    font-family: var(--glamore, var(--serif, Georgia, serif));
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0;
    color: var(--ink, #0F1F24);
}
.sotb-exp__body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2, #2C4751);
    margin: 0;
    flex: 1;
}
.sotb-exp__cta {
    align-self: flex-start;
    font-weight: 700;
    color: var(--ocean, #0A4D6E);
    text-decoration: none;
    font-size: 0.92rem;
    transition: gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sotb-exp__cta:hover { gap: 10px; }

/* ─── Stories from Timor ──────────────────────────────────── */
.sotb-stories { background: var(--paper, #FBF8F2); }
.sotb-stories__grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}
.sotb-stories__card {
    background: transparent;
    border: 0;
}
.sotb-stories__cardLink {
    display: block;
    text-decoration: none;
    color: inherit;
}
.sotb-stories__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--paper-2, #F3EFE6), var(--paper, #FBF8F2));
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}
.sotb-stories__cardLink:hover .sotb-stories__media {
    transform: translateY(-3px);
}
.sotb-stories__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sotb-stories__placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; opacity: 0.18;
}
.sotb-stories__copy {
    padding: 0 0.5rem;
}
.sotb-stories__kicker {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--forest, #1F5A36);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.sotb-stories__title {
    font-family: var(--glamore, var(--serif, Georgia, serif));
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: var(--ink, #0F1F24);
}
.sotb-stories__cardLink:hover .sotb-stories__title {
    color: var(--ocean, #0A4D6E);
}
.sotb-stories__excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-2, #2C4751);
    margin: 0;
}

/* ─── Destination Tiles ───────────────────────────────────────────────
   Image tile grid of districts. Each tile has a darkening gradient
   overlay so the white label is readable even on bright photos. Tiles
   are uniform-aspect so the row reads as a clean grid; the first tile
   spans 2 cols on the widest breakpoint to break the rhythm Just enough.
   ──────────────────────────────────────────────────────────────────── */
.sotb-destinations {
    background: var(--paper, #FBF8F2);
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
}
.sotb-destinations__head {
    max-width: 1280px;
    margin: 0 auto 1.5rem;
    text-align: left;
}
.sotb-destinations__eyebrow {
    display: inline-block;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ocean, #0A4D6E);
    margin: 0 0 0.4rem;
}
.sotb-destinations__heading {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.15;
    color: var(--ink, #0F1F24);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.sotb-destinations__intro {
    margin: 0;
    color: var(--ink-2, #2C4751);
    font-size: 0.95rem;
    max-width: 60ch;
}
.sotb-destinations__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1280px;
    display: grid;
    gap: 1rem;
}
.sotb-destinations--cols-4 .sotb-destinations__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sotb-destinations--cols-3 .sotb-destinations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sotb-destinations--cols-2 .sotb-destinations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .sotb-destinations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px)  { .sotb-destinations__grid { grid-template-columns: 1fr !important; } }

.sotb-destinations__tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 5;
    background: var(--paper-2, #F3EFE6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sotb-destinations__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -12px rgba(15, 31, 36, 0.32);
}
.sotb-destinations__link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    color: var(--paper, #FBF8F2);
    text-decoration: none;
    padding: 1rem 1.1rem;
}
.sotb-destinations__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.sotb-destinations__tile:hover .sotb-destinations__media { transform: scale(1.04); }
.sotb-destinations__media--empty { background: linear-gradient(135deg, #1F5A36 0%, #0A4D6E 100%); }
.sotb-destinations__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 31, 36, 0.72) 0%, rgba(15, 31, 36, 0.18) 50%, transparent 100%);
}
.sotb-destinations__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 1;
}
.sotb-destinations__name {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.15;
}
.sotb-destinations__meta {
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.78rem;
    opacity: 0.92;
}
.sotb-destinations__sep { margin: 0 0.35rem; opacity: 0.6; }
.sotb-destinations__price { font-weight: 600; }

/* ─── Featured Properties ─────────────────────────────────────────────
   Real property cards on the homepage. Cleaner than the /stays/ results
   cards — homepage shows image, district, name, rating, price-from, CTA.
   No address line, no rooms-available chip — those belong on /stays/.
   ──────────────────────────────────────────────────────────────────── */
.sotb-featured {
    background: var(--paper, #FBF8F2);
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
}
.sotb-featured__head {
    max-width: 1280px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.sotb-featured__eyebrow {
    display: inline-block;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ocean, #0A4D6E);
    margin: 0 0 0.4rem;
}
.sotb-featured__heading {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.15;
    color: var(--ink, #0F1F24);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.sotb-featured__intro {
    margin: 0;
    color: var(--ink-2, #2C4751);
    font-size: 0.95rem;
    max-width: 60ch;
}
.sotb-featured__view-all {
    color: var(--ocean, #0A4D6E);
    text-decoration: none;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.9rem;
}
.sotb-featured__view-all:hover { text-decoration: underline; }
.sotb-featured__grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1280px;
    display: grid;
    gap: 1.25rem;
}
.sotb-featured--cols-4 .sotb-featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sotb-featured--cols-3 .sotb-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sotb-featured--cols-2 .sotb-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .sotb-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px)  { .sotb-featured__grid { grid-template-columns: 1fr !important; } }

.sotb-featured__card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 31, 36, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sotb-featured__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(15, 31, 36, 0.22);
}
.sotb-featured__cover {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.sotb-featured__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.sotb-featured__card:hover .sotb-featured__cover img { transform: scale(1.04); }
.sotb-featured__verified {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 90, 54, 0.92);
    color: var(--paper, #FBF8F2);
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.sotb-featured__body {
    padding: 0.85rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.sotb-featured__loc {
    margin: 0;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ocean, #0A4D6E);
}
.sotb-featured__title {
    margin: 0;
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink, #0F1F24);
}
.sotb-featured__title a {
    color: inherit;
    text-decoration: none;
}
.sotb-featured__title a:hover { color: var(--ocean, #0A4D6E); }
.sotb-featured__rating {
    margin: 0;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--ink-2, #2C4751);
}
.sotb-featured__rating > span:first-child { color: #C28E1B; margin-right: 0.15rem; }
.sotb-featured__rcount { color: var(--ink-3, #6B7B82); margin-left: 0.25rem; font-size: 0.8rem; }
.sotb-featured__price {
    margin: auto 0 0;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    color: var(--ink, #0F1F24);
}
.sotb-featured__price-label { font-size: 0.75rem; color: var(--ink-2, #2C4751); margin-right: 0.25rem; }
.sotb-featured__price strong { font-size: 1.15rem; font-weight: 700; }
.sotb-featured__price-unit { font-size: 0.78rem; color: var(--ink-2, #2C4751); margin-left: 0.15rem; }
.sotb-featured__cta {
    margin-top: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--ocean, #0A4D6E);
    color: var(--paper, #FBF8F2);
    text-decoration: none;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.88rem;
    transition: background 0.15s ease;
}
.sotb-featured__cta:hover { background: var(--ocean-deep, #07344B); }

/* ─── Stay Type Chips ─────────────────────────────────────────────────
   Airbnb-pattern horizontally-scrolling category strip. On wide screens
   the row fits; on narrower viewports it scrolls horizontally with
   inertia.
   ──────────────────────────────────────────────────────────────────── */
.sotb-types {
    background: var(--paper, #FBF8F2);
    padding: clamp(1rem, 2vw, 1.5rem) 0;
}
.sotb-types__heading {
    max-width: 1280px;
    margin: 0 auto 0.75rem;
    padding: 0 clamp(1rem, 3vw, 2rem);
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--ink, #0F1F24);
}
.sotb-types__scroller {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 31, 36, 0.18) transparent;
    padding: 0.25rem 0 0.75rem;
}
.sotb-types__row {
    list-style: none;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    max-width: 1280px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: max-content;
}
.sotb-types__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15, 31, 36, 0.1);
    color: var(--ink, #0F1F24);
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.sotb-types__chip:hover {
    border-color: var(--ocean, #0A4D6E);
    background: var(--ocean-soft, #D3E3EC);
}
.sotb-types__icon {
    display: inline-flex;
    align-items: center;
    color: var(--ocean, #0A4D6E);
}
.sotb-types__icon svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sotb-types__emoji { font-size: 1rem; line-height: 1; }

/* ─── Host CTA Strip ──────────────────────────────────────────────────
   Single supply-side conversion band. Forest accent by default so it
   stands apart from the ocean-tinted consumer surfaces above.
   ──────────────────────────────────────────────────────────────────── */
.sotb-host {
    background: var(--forest-deep, #143A22);
    color: var(--paper, #FBF8F2);
}
.sotb-host--bg-forest { background: linear-gradient(135deg, #1F5A36 0%, #143A22 100%); color: var(--paper, #FBF8F2); }
.sotb-host--bg-ocean  { background: linear-gradient(135deg, #0A4D6E 0%, #07344B 100%); color: var(--paper, #FBF8F2); }
.sotb-host--bg-paper  { background: var(--paper-2, #F3EFE6); color: var(--ink, #0F1F24); }
.sotb-host--bg-ink    { background: #0F1F24; color: var(--paper, #FBF8F2); }

.sotb-host__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.sotb-host__text { flex: 1 1 30rem; min-width: 0; }
.sotb-host__eyebrow {
    display: inline-block;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 0.4rem;
}
.sotb-host__title {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.2;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
    text-wrap: balance;
    max-width: 26ch;
}
.sotb-host__body {
    margin: 0;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.92;
    max-width: 60ch;
}
.sotb-host__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1.4rem;
    border-radius: 10px;
    background: var(--paper, #FBF8F2);
    color: var(--forest-deep, #143A22);
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.sotb-host--bg-paper .sotb-host__cta { background: var(--forest-deep, #143A22); color: var(--paper, #FBF8F2); }
.sotb-host__cta:hover { transform: translateY(-1px); }

/* ─── Trust Strip ─────────────────────────────────────────────────────
   Single-row band of 4-6 icon+claim items. Lives between the search
   hero and the storytelling sections so visitors get fast reassurance
   without scrolling past the fold. On narrow viewports the row wraps to
   2 columns; on phones it collapses to 1.
   ──────────────────────────────────────────────────────────────────── */
.sotb-trust {
    background: var(--paper, #FBF8F2);
    border-top: 1px solid rgba(15, 31, 36, 0.06);
    border-bottom: 1px solid rgba(15, 31, 36, 0.06);
}
.sotb-trust--bg-paper-2     { background: var(--paper-2, #F3EFE6); }
.sotb-trust--bg-ocean-soft  { background: var(--ocean-soft, #D3E3EC); }
.sotb-trust--bg-white       { background: #fff; }

.sotb-trust__row {
    list-style: none;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 3vw, 2rem);
    max-width: 1280px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
}
.sotb-trust--compact .sotb-trust__row { padding-top: 0.85rem; padding-bottom: 0.85rem; }

.sotb-trust__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--ink-2, #2C4751);
}
.sotb-trust__icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: var(--ocean, #0A4D6E);
    align-items: center;
    justify-content: center;
}
.sotb-trust__icon svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sotb-trust__emoji { font-size: 1.1rem; flex-shrink: 0; line-height: 1; }
.sotb-trust__label { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) { .sotb-trust__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .sotb-trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .sotb-trust__row { grid-template-columns: 1fr; } }

/* ─── Search Hero ─────────────────────────────────────────────────────
   Compact image hero with overlaid Stays search form. Replaces the
   text-only slider as the top-of-homepage conversion surface. Pattern
   mirrors Booking/Expedia/Visit-Iceland — image hero + search card —
   tuned to the SOT brand (Fraunces serif title, ocean accent, paper
   chips). Always renders full-bleed; sized to leave room for §2 to
   peek above the scroll on a 900 px laptop.
   ──────────────────────────────────────────────────────────────────── */
.sotb-search-hero {
    position: relative;
    margin: 0;
    color: var(--paper, #FBF8F2);
    background-color: var(--ocean-deep, #07344B);
    background-size: cover;
    background-position: center;
    isolation: isolate;
}
.sotb-search-hero--forest { background-color: var(--forest-deep, #143A22); }
.sotb-search-hero--ink    { background-color: #0F1F24; }

.sotb-search-hero__inner {
    max-width: 1280px;
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: inherit;
    justify-content: flex-end;
}

.sotb-search-hero__eyebrow {
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.92;
    color: var(--paper, #FBF8F2);
}

.sotb-search-hero__title {
    font-family: var(--serif, 'Fraunces', Georgia, serif);
    /* Restrained working H1 — the search form is the hero on this surface,
       not the headline. Authors can hide the title entirely by leaving it
       blank in the editor (render.php only emits the <h1> when non-empty). */
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin: 0;
    max-width: 26ch;
    color: var(--paper, #FBF8F2);
    text-wrap: balance;
}

.sotb-search-hero__strapline {
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.92rem;
    line-height: 1.4;
    margin: -0.25rem 0 0;
    opacity: 0.88;
    max-width: 36rem;
    color: var(--paper, #FBF8F2);
}

/* ── Search form card overlaying the bottom of the image ── */
.sotb-search-hero__form {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1.3fr 1.6fr 1.1fr auto;
    gap: 0.5rem;
    align-items: stretch;
    background: var(--paper, #FBF8F2);
    color: var(--ink, #0F1F24);
    border-radius: 14px;
    padding: 0.55rem;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12);
}

.sotb-search-hero__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    transition: background 0.15s ease;
    min-width: 0;
}
.sotb-search-hero__field:hover { background: var(--paper-2, #F3EFE6); }
.sotb-search-hero__field + .sotb-search-hero__field {
    border-left: 1px solid rgba(15, 31, 36, 0.08);
}

.sotb-search-hero__field label {
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2, #2C4751);
    margin-bottom: 0.2rem;
}

.sotb-search-hero__field select,
.sotb-search-hero__field input[type="date"],
.sotb-search-hero__field input[type="number"],
.sotb-search-hero__field .stot-date-range,
.sotb-search-hero__field .stot-guests-rooms {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink, #0F1F24);
    width: 100%;
    min-width: 0;
}

.sotb-search-hero__field select:focus,
.sotb-search-hero__field input:focus { outline: none; }

.sotb-search-hero__dates-fallback,
.sotb-search-hero__guests-fallback {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.9rem;
}
.sotb-search-hero__dates-fallback input,
.sotb-search-hero__guests-fallback input {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    width: 100%;
    min-width: 0;
}

.sotb-search-hero__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 10px;
    padding: 0 1.4rem;
    min-height: 56px;
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    background: var(--ocean, #0A4D6E);
    color: var(--paper, #FBF8F2);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.sotb-search-hero__submit:hover  { background: var(--ocean-deep, #07344B); }
.sotb-search-hero__submit:active { transform: translateY(1px); }
.sotb-search-hero__submit svg    { flex-shrink: 0; }

/* ── Quick-filter chips ── */
.sotb-search-hero__chips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.sotb-search-hero__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(251, 248, 242, 0.14);
    border: 1px solid rgba(251, 248, 242, 0.3);
    color: var(--paper, #FBF8F2);
    font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    backdrop-filter: blur(6px);
}
.sotb-search-hero__chip:hover {
    background: rgba(251, 248, 242, 0.28);
    border-color: rgba(251, 248, 242, 0.55);
}

/* ── Responsive: stack the form on tablet+phone ── */
@media (max-width: 960px) {
    .sotb-search-hero__form {
        grid-template-columns: 1fr 1fr;
    }
    .sotb-search-hero__field + .sotb-search-hero__field {
        border-left: 0;
    }
    .sotb-search-hero__submit {
        grid-column: 1 / -1;
        min-height: 48px;
    }
}
@media (max-width: 560px) {
    .sotb-search-hero__form {
        grid-template-columns: 1fr;
        padding: 0.6rem;
    }
    .sotb-search-hero__field + .sotb-search-hero__field {
        border-top: 1px solid rgba(15, 31, 36, 0.08);
    }
    .sotb-search-hero__title { font-size: clamp(1.3rem, 5.5vw, 1.55rem); }
    /* Tight viewport: shrink the inner padding so the search card fits
       comfortably and the chips don't break onto 3+ rows. */
    .sotb-search-hero__inner {
        padding: 1.25rem 1rem 1.25rem;
        gap: 0.6rem;
    }
    .sotb-search-hero__chips { gap: 0.35rem; }
    .sotb-search-hero__chip {
        padding: 0.35rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* ── Round-5 mobile QA: trust strip, destination tiles, featured cards,
      stay-type chips and host CTA — keep the layouts comfortable at
      320 / 375 / 414 widths. The earlier sections already had per-block
      breakpoints; these are the polish bits I found while QA-ing. ── */
@media (max-width: 480px) {
    /* Trust strip — drop to single column on the smallest devices */
    .sotb-trust__row { grid-template-columns: 1fr !important; gap: 0.5rem; padding: 0.85rem 1rem; }
    .sotb-trust__item { font-size: 0.85rem; }

    /* Destination tile aspect — wider on phones so the label area has more
       room and the photo doesn't dominate. */
    .sotb-destinations__tile { aspect-ratio: 3 / 4; }
    .sotb-destinations__name { font-size: 1.05rem; }

    /* Featured properties — single-column with bigger images */
    .sotb-featured__head { gap: 0.5rem; }
    .sotb-featured__heading { font-size: 1.25rem; }

    /* Stay-type chips — slightly tighter */
    .sotb-types__chip { padding: 0.5rem 0.85rem; font-size: 0.84rem; }

    /* Host CTA — stack title above CTA, full-width button */
    .sotb-host__inner { gap: 1rem; padding: 1.5rem 1rem; }
    .sotb-host__title { font-size: 1.3rem; }
    .sotb-host__cta { width: 100%; justify-content: center; }
}

/* iPhone SE / very small (≤ 360 px) — give critical inputs even more
   room and stop the chip row scroll from feeling cramped. */
@media (max-width: 360px) {
    .sotb-search-hero__title { font-size: 1.2rem; }
    .sotb-search-hero__strapline { font-size: 0.85rem; }
    .sotb-search-hero__submit { font-size: 0.9rem; }
    .sotb-destinations__tile { aspect-ratio: 5 / 4; }
}