/* ============================================================================
   The home page's island-hopping section.

   Its own stylesheet, not part of island-hopping.css: the home page must not pull in 26 KB of
   map styling to render one band, and the map page must not pull in this.

   Palette from the Caribbean Connectivity Map banner — navy #003366 ground, orange #FF7F0E
   accents, pale blue for the network. The banner ARTWORK is deliberately not used: it reads
   "Find air and ferry connections between islands" over a picture of a ferry, and this feature
   has no ferry data. The colours are the half that is true.
   ========================================================================= */

.ih-teaser {
    --iht-navy: var(--navy, #003366);
    --iht-orange: var(--orange, #FF7F0E);
    --iht-pale: #CFE0F2;

    background: var(--iht-navy);
    color: #fff;
    padding: 28px 0 26px;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ih-teaser-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.ih-teaser-eyebrow {
    margin: 0 0 6px;
    font: 600 11px/1 "JetBrains Mono", ui-monospace, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iht-orange);
}

.ih-teaser h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    text-wrap: balance;
}

.ih-teaser-sub {
    margin: 10px 0 0;
    max-width: 54ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--iht-pale);
    text-wrap: pretty;
}

/* Figures: a 3-up grid so three numbers cannot wrap to 2 + 1. */
.ih-teaser-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 18px 0 0;
}

.ih-teaser-figures dd {
    margin: 0;
    font: 800 28px/1 inherit;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--iht-orange);
}

.ih-teaser-figures dt {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--iht-pale);
}

.ih-teaser-cta { margin: 20px 0 0; }

.ih-teaser-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--iht-orange);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.ih-teaser-cta a:hover { background: #fff; color: var(--iht-navy); }
.ih-teaser-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The generated network picture. The SVG frames its own content with a 6% margin, so it fills
   the box; `contain` rather than `cover` because cropping a network diagram cuts routes off at
   the edge and makes it look truncated rather than cropped. */
.ih-teaser-art {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
}

.ih-teaser-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Round-trip cards, only when the planner is public. */
.ih-teaser-cards {
    list-style: none;
    margin: 20px auto 0;
    padding: 0 16px;
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.ih-teaser-cards a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px 14px;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
}

.ih-teaser-cards a:hover { border-color: var(--iht-orange); background: rgba(255, 255, 255, .06); }
.ih-teaser-cards a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ih-teaser-card-hub {
    font: 700 16px/1 "JetBrains Mono", ui-monospace, Consolas, monospace;
    color: var(--iht-orange);
}

.ih-teaser-card-days { font-size: 14px; font-weight: 600; }

.ih-teaser-card-count {
    font-size: 12.5px;
    color: var(--iht-pale);
    white-space: nowrap;
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .ih-teaser { padding: 34px 0 32px; }
    .ih-teaser-inner { padding: 0 24px; }
    .ih-teaser h2 { font-size: 30px; }
    .ih-teaser-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 24px; }
    .ih-teaser-cards a { grid-template-columns: auto 1fr; }
    .ih-teaser-card-count { grid-column: 1 / -1; }
}

/* ── Desktop: copy beside the picture ────────────────────────────────────── */

@media (min-width: 1000px) {
    .ih-teaser { padding: 44px 0 40px; }
    .ih-teaser-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; padding: 0 32px; }
    .ih-teaser h2 { font-size: 36px; }
    .ih-teaser-figures { max-width: 440px; }
    .ih-teaser-art { aspect-ratio: 4 / 3; }
    .ih-teaser-cards { padding: 0 32px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ih-teaser * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}