/* Road to Hana guide (road-to-hana.aspx), Oct 2026: the landing-page look for a stop-by-stop guide.
   Builds on hg-landing.css (hero, lede, intro box, area titles, bridge and cards are the landing
   classes as they are). New here, rg- prefix: the stretch tiles in the hero card, sticky stretch
   tabs, stop cards (video on top, text below), the "Stay the night in Hana" band and the deals cards.
   The stop markup comes from _tools/road-to-hana/sync_road_to_hana.py. */

/* Fraunces (Google build) misplaces the macron on a e i o u - the bar lands on the next letter, so
   "Pa'ia" headings come out garbled. Same-descriptor faces defined later win for overlapping unicode
   ranges, so these send only the macron vowels in Fraunces text to Georgia. The okina stays Fraunces. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 600;
    src: local('Georgia');
    unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B;
}

@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 300 500;
    src: local('Georgia Italic');
    unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B;
}

html {
    scroll-padding-top: calc(var(--hgx-pinned) + 62px); /* pinned menu row + stretch tabs */
}

.rg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.rg-ico {
    width: 14px;
    height: 14px;
    flex: none;
}

.bf-chip-ico {
    color: var(--hgx-gold);
}

/* ---------- Hero: stretch tiles in place of the landing search fields ---------- */

.rg-hero {
    background-position: center 62%;
}

.rg-legs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.rg-leg {
    display: block;
    padding: 9px 12px 10px 12px;
    background: #fff;
    border: 1px solid rgba(168,154,133,0.45);
    border-top: 3px solid var(--rc);
    border-radius: 6px;
    color: var(--hgx-ink);
}

    .rg-leg:hover, .rg-leg:focus {
        background: #f0e7c0;
        color: var(--hgx-ink);
        text-decoration: none;
    }

.rg-leg-idx {
    font-family: var(--hgx-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    color: var(--rc);
    margin-right: 6px;
}

.rg-leg-name {
    font-family: var(--hgx-serif);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.2;
}

.rg-leg-meta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--hgx-muted);
}

.rg-legend .rg-badge {
    margin: 2px 2px;
}

/* ---------- Sticky stretch tabs (under the pinned menu row) ---------- */

.rg-tabs {
    position: sticky;
    top: var(--hgx-pinned);
    z-index: 900; /* under the site header (1020) and its menus */
    margin: 30px -15px 6px -15px; /* full window width: the content area has 15px side padding */
    background: rgba(255,253,243,0.97);
    border-top: 1px solid var(--hgx-line);
    border-bottom: 1px solid var(--hgx-line);
    box-shadow: 0 6px 12px -10px rgba(60,50,30,0.45);
}

.rg-tabs-in {
    display: flex;
    gap: 4px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .rg-tabs-in::-webkit-scrollbar {
        display: none;
    }

.rg-tab {
    flex: none;
    padding: 12px 12px 9px 12px;
    border-bottom: 3px solid transparent;
    color: var(--hgx-brown);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

    .rg-tab:hover, .rg-tab:focus {
        color: var(--hgx-ink);
        text-decoration: none;
        border-bottom-color: var(--hgx-line);
    }

    .rg-tab.is-on {
        color: var(--hgx-ink);
        border-bottom-color: var(--rc);
    }

.rg-tab-idx {
    font-family: var(--hgx-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    color: var(--rc);
    margin-right: 6px;
}

.rg-tab-stay {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hgx-blue);
}

/* ---------- Stop cards: the video across the top, text below ---------- */

.rg-stops {
    margin-top: 14px;
}

.rg-stop {
    margin: 0 0 24px 0;
    background: #fffdf3;
    border: 1px solid rgba(168,154,133,0.5);
    border-radius: 8px;
    box-shadow: 3px 3px 5px -2px rgba(18,18,18,0.25);
    overflow: hidden;
}

.rg-media {
    position: relative;
}

.rg-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.rg-num {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--rc);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Cards without a photo or video on top (the quiet ones) carry the number in the heading. */
.rg-name-num {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .rg-name-num .rg-num {
        position: static;
        flex: none;
        width: 26px;
        height: 26px;
        line-height: 26px;
        font-family: var(--hgx-sans);
        font-size: 13px;
        box-shadow: none;
    }

.rg-body {
    padding: 18px 28px 22px 28px;
}

    /* A comfortable line length under a full-width video. */
    .rg-body > * {
        max-width: 820px;
    }

.rg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--hgx-muted);
}

.rg-mile, .rg-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rg-mile {
    color: var(--hgx-gold-text);
    font-weight: 600;
}

.rg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px 2px 8px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

    .rg-badge .rg-ico {
        width: 13px;
        height: 13px;
    }

.rg-badge-rec {
    color: #3f6a2a;
    background: #edf3e5;
    border-color: rgba(84,127,55,0.35);
}

    .rg-badge-rec .rg-ico {
        fill: currentColor;
    }

.rg-badge-note {
    color: var(--hgx-gold-text);
    background: #f7f0d8;
    border-color: rgba(168,135,77,0.4);
}

.rg-badge-skip, .rg-badge-private {
    color: #6b6352;
    background: #efeae0;
    border-color: rgba(107,99,82,0.3);
}

.rg-badge-danger {
    color: var(--hgx-red);
    background: #f8e9e6;
    border-color: rgba(136,36,39,0.35);
}

.rg-name {
    margin: 0 0 10px 0;
    font-family: var(--hgx-serif);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--hgx-ink);
}

.rg-desc {
    font-size: 16px;
    line-height: 1.65;
    color: var(--hgx-ink);
}

    .rg-desc p {
        margin: 0 0 10px 0;
    }

        .rg-desc p:last-child {
            margin-bottom: 0;
        }

.rg-tip {
    margin: 14px 0 0 0;
    padding: 9px 14px;
    background: #f7f0d8;
    border-left: 3px solid #c9b48a;
    border-radius: 0 6px 6px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #5c5340;
}

    .rg-tip b {
        color: var(--hgx-gold-text);
    }

.rg-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
}

/* Skip, private and dangerous stops: quieter colors. Most still show their video; a few keep it
   behind a "Watch the video" button (HIDDEN_VIDEOS in the sync script), and it opens below the text. */
.rg-quiet {
    background: #f8f4e8;
    border-left: 4px solid #b5aa92;
    box-shadow: none;
}

    .rg-quiet.rg-danger {
        border-left-color: var(--hgx-red);
    }

    .rg-quiet .rg-body {
        padding: 14px 22px 16px 20px;
    }

    .rg-quiet .rg-name {
        font-size: 24px;
        color: #5c5340;
    }

    .rg-quiet .rg-num {
        background: #a59a82;
    }

    .rg-quiet.rg-danger .rg-num {
        background: var(--hgx-red);
    }

    .rg-quiet .rg-desc {
        font-size: 15px;
        color: #5c5340;
    }

    .rg-quiet .rg-tip {
        background: #f1ead5;
    }

    .rg-quiet .rg-more {
        margin-right: 18px;
    }

.rg-media-below {
    padding: 0 20px 20px 20px;
}

    .rg-media-below .mh-video {
        border-radius: 6px;
    }

.rg-watch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 5px 13px 5px 11px;
    background: #fffdf3;
    border: 1px solid #d3c6a4;
    border-radius: 4px;
    color: var(--hgx-brown);
    font-size: 13px;
    font-weight: 600;
}

    .rg-watch:hover, .rg-watch:focus {
        background: #f0e7c0;
    }

    .rg-watch .rg-ico {
        width: 12px;
        height: 12px;
    }

.rg-alert {
    display: flex;
    gap: 9px;
    margin: 0 0 14px 0;
    padding: 10px 14px;
    background: #f8e9e6;
    border-left: 4px solid var(--hgx-red);
    border-radius: 0 6px 6px 0;
    color: #5c2a24;
    font-size: 14.5px;
    line-height: 1.5;
}

    .rg-alert .rg-ico {
        margin-top: 3px;
        color: var(--hgx-red);
    }

/* ---------- "Stay the night in Hana" band, after chapter 2 ---------- */

.rg-stay {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    margin: 40px 0 18px 0;
    background: #2f4a46;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(60,50,30,0.08), 0 10px 24px -10px rgba(30,40,38,0.45);
    color: #e9efe9;
}

.rg-stay-photo {
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

.rg-stay-body {
    padding: 30px 34px 28px 34px;
}

.rg-stay-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c8b188;
}

.rg-stay-h {
    margin: 8px 0 12px 0;
    font-family: var(--hgx-serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    color: #fff;
}

.rg-stay-body p {
    font-size: 15.5px;
    line-height: 1.6;
}

.rg-stay-body .rg-stay-facts {
    color: #c8d6d2;
    font-size: 14px;
    margin-bottom: 18px;
}

.rg-stay-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

    .rg-stay-link:hover, .rg-stay-link:focus {
        color: #f0e7c0;
    }

/* ---------- Where to stay, credit, deals ---------- */

.rg-h2 {
    margin: 8px 0 18px 0;
    font-family: var(--hgx-serif);
    font-weight: 400;
    font-size: 32px;
    color: var(--hgx-ink);
}

.rg-credit {
    margin: 22px 0 10px 0;
    padding: 14px 18px;
    border-top: 1px solid var(--hgx-line);
    font-size: 14px;
    line-height: 1.6;
    color: #6b6352;
    text-align: center;
}

.rg-deals {
    max-width: 1080px;
    margin: 44px auto 40px auto;
    padding: 0 15px;
    text-align: center;
}

.rg-deals-h {
    margin-bottom: 16px;
}

.rg-deals-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    text-align: left;
}

/* Same card as the landing directory: photo on top (the ad images are about 3:2), text below.
   Three ads fill a row; four fit four across; phones get one per row. */
.rg-deal {
    display: flex;
    flex-direction: column;
    flex: 1 1 240px;
    max-width: 350px;
    background: #fffdf3;
    border: 1px solid rgba(168,154,133,0.5);
    border-radius: 8px;
    box-shadow: 3px 3px 5px -2px rgba(18,18,18,0.25);
    overflow: hidden;
}

    .rg-deal img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

.rg-deal-body {
    padding: 12px 16px 14px 16px;
}

.rg-deal-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hgx-gold-text);
}

.rg-deal-title {
    margin: 4px 0 6px 0;
    font-family: var(--hgx-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.2;
}

    .rg-deal-title a {
        color: var(--hgx-brown);
    }

.rg-deal-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5c5340;
}

/* ---------- Video player (script at the bottom of road-to-hana.aspx) ---------- */

.mh-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1C1815; }
.mh-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mh-play { position: absolute; left: 14px; bottom: 14px; padding: 12px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; line-height: 0; cursor: pointer; }
.mh-play svg { width: 20px; height: 20px; }
.mh-spin { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: mh-spin 1s linear infinite; pointer-events: none; }
@keyframes mh-spin { to { transform: rotate(360deg); } }
.mh-problem { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; background: rgba(0, 0, 0, .8); color: #fff; text-align: center; font-size: 15px; }
.mh-problem[hidden], .mh-spin[hidden], .mh-play[hidden], .mh-blocked[hidden] { display: none; }
.mh-problem button { margin: 0 4px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 4px; background: transparent; color: #fff; font-size: 14px; }
.mh-problem button.mh-low { border-color: #fff; background: #fff; color: #000; }
.mh-blocked { position: absolute; top: 12px; left: 12px; right: 12px; padding: 8px; background: rgba(0, 0, 0, .7); color: #fff; text-align: center; font-size: 14px; }

/* ---------- Tablet and phone ---------- */

@media (max-width: 900px) {
    .rg-legs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .rg-stay {
        display: block;
    }

    .rg-num {
        top: 10px;
        left: 10px;
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
    }

    .rg-body {
        padding: 14px 16px 16px 16px;
    }

    .rg-quiet .rg-body {
        padding: 13px 16px 15px 14px;
    }

    .rg-media-below {
        padding: 0 14px 14px 14px;
    }

    .rg-name {
        font-size: 24px;
    }

    .rg-quiet .rg-name {
        font-size: 20px;
    }

    .rg-desc {
        font-size: 15px;
    }

    .rg-stay-photo {
        min-height: 190px;
    }

    .rg-stay-body {
        padding: 22px 20px 22px 20px;
    }

    .rg-stay-h {
        font-size: 28px;
    }

    .rg-stay-link {
        margin: 14px 0 0 0;
    }

    .rg-h2 {
        font-size: 26px;
    }

    .rg-tab {
        padding: 11px 9px 8px 9px;
        font-size: 13.5px;
    }
}

@media (max-width: 480px) {
    .rg-leg {
        padding: 7px 9px 8px 9px;
    }

    .rg-leg-name {
        font-size: 15px;
    }

    .rg-leg-meta {
        font-size: 12px;
    }
}