/* ===========================================================================
   CAPTAIN JACKS — RESPONSIVE
   Mobile-first. This file only ever scales up with min-width queries.
   Breakpoints:  560 · 760 · 1000 · 1280
   =========================================================================== */

/* ---------------------------------------------------------------------------
   MOBILE — switch off what doesn't fit
   --------------------------------------------------------------------------- */
@media (max-width: 999px) {

    .nav,
    .header__phone { display: none; }

    .burger { display: block; }

    .header__book { padding: 0.6875rem 1.125rem; font-size: 0.75rem; }
}

/* Laptop widths: the centred links need the room the brand name takes */
@media (min-width: 1000px) and (max-width: 1179px) {

    .brand__text { display: none; }
}

@media (max-width: 759px), (max-height: 720px) {

    .scroll-cue { display: none; }
}

@media (max-width: 559px) {

    /* Header must fit logo, name, Book and the burger on a 360px phone */
    .site-header__inner { gap: 0.75rem; padding: 0.375rem 0.375rem 0.375rem 0.4375rem; }
    .brand { gap: 0.5rem; min-width: 0; }
    .brand__disc,
    .site-header.is-stuck .brand__disc { width: 42px; height: 42px; }
    .brand__name { font-size: clamp(0.8125rem, 3.8vw, 1rem); letter-spacing: 0.02em; }
    .header__actions { gap: 0.25rem; }
    .header__book { padding: 0.625rem 0.875rem; }
    .header__book-long { display: none; }

    .hero { padding-top: calc(var(--header-h) + 1.25rem); }

    .hero__title { --hero-base: clamp(2.75rem, 14vw, 4rem); }

    .gallery__wall { --tile: 74px; gap: 4px; }

    .cta__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   560px+
   --------------------------------------------------------------------------- */
@media (min-width: 560px) {

    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }

    .gallery__wall { --tile: 86px; }
}

/* ---------------------------------------------------------------------------
   760px+  —  tablets
   --------------------------------------------------------------------------- */
@media (min-width: 760px) {

    .intro__grid { grid-template-columns: 1.4fr 1fr; align-items: start; }

    /* Photography band goes full four-across */
    .intro__band { grid-template-columns: repeat(4, 1fr); }

    .wildlife__head,
    .gallery__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 2.5rem; }

    /* Seasonality: species and bars side by side */
    .calendar__row,
    .calendar__header { grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: center; }

    .calendar__header { align-items: end; }

    .calendar__corner { display: block; }

    .reviews__list { grid-template-columns: repeat(2, 1fr); }

    /* Vessel highlight cards go four-across */
    .vessel__panels { grid-template-columns: repeat(4, 1fr); }

    .gallery__wall { --tile: 92px; }
}

/* ---------------------------------------------------------------------------
   1000px+  —  laptops. Desktop nav appears here.
   --------------------------------------------------------------------------- */
@media (min-width: 1000px) {

    .nav-drawer { display: none; }

    .vessel__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }

    .faq__grid { grid-template-columns: 0.8fr 1.2fr; }

    .faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); }

    .site-footer__grid {
        grid-template-columns: 1.7fr 1fr 0.7fr 1fr;
        gap: clamp(2rem, 4vw, 4rem);
    }

    .footer__contact {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-top: 1.5rem;
        font-family: var(--font-ui);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .footer__contact-link {
        width: fit-content;
        color: var(--white);
        transition: color 0.3s var(--ease);
    }
    .footer__contact-link:hover { color: var(--turq); }

    .gallery__wall { --tile: 98px; }

    /* These headings are trimmed so they sit on a tidy line count on desktop */
    .intro__lead .h2,
    .wildlife__head .h2,
    .vessel__copy .h2 { font-size: clamp(1.6rem, 0.1rem + 2.4vw, 2.55rem); }
}

/* ---------------------------------------------------------------------------
   1280px+  —  desktop
   --------------------------------------------------------------------------- */
@media (min-width: 1280px) {

    .reviews__list { grid-template-columns: repeat(3, 1fr); }

    .calendar__row,
    .calendar__header { grid-template-columns: 240px 1fr; gap: 2rem; }

    .gallery__wall { --tile: 100px; }

    /* Left column is now wide enough to hold the phrase on one line. Size is
       fitted so it clears the body column beside it. */
    .intro__nowrap { white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Landscape phones — the hero must not swallow the screen
   --------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {

    .hero { min-height: 0; padding-block: calc(var(--header-h) + 1.5rem) 5rem; }

    .hero__title { --hero-base: clamp(2rem, 8vw, 3rem); }

    .hero__lead { display: none; }
}

/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */
@media print {

    .site-header, .nav-drawer, .scroll-cue, .hero__media,
    .book-trigger, .book-modal, .floats, .wave, .gallery__wall {
        display: none !important;
    }

    body { background: #fff; color: #000; font-size: 11pt; }

    .section, .hero { padding-block: 1.5rem; min-height: 0; }

    .section--navy, .section--deep, .cta, .hero, .site-footer {
        background: #fff !important;
        color: #000 !important;
    }

    .section--navy h2, .section--deep h2, .cta h2, .hero h1 { color: #000 !important; }

    .trip-card { break-inside: avoid; border: 1px solid #ccc; margin-bottom: 0.5rem; }

    a[href^="http"]::after,
    a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}