/* ==========================================================================
   responsive.css — device adjustments, loaded LAST on every page

   Each block says which devices it targets. Breakpoints used site-wide:

     up to  480px   small phones
     up to  700px   phones
     up to  900px   tablets (portrait)
     up to 1199px   tablets (landscape) and small laptops
                    → the nav switches to the hamburger menu here
     1200px+        laptops and desktops

   Plus two special cases that width alone doesn't catch:
     (max-height: 500px) and (orientation: landscape)  phones held sideways
     (hover: none)                                     touch screens
   ========================================================================== */


/* ---------- ALL DEVICES: text never pushes the page sideways ---------- */
/* Long e-mail addresses and URLs wrap instead of overflowing narrow cards */
p, li, h1, h2, h3, h4, a, span, small, strong {
    overflow-wrap: break-word;
}

/* iPhone notch / home-bar: keep footer and floating button clear of it */
.site-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.scroll-top {
    bottom: max(24px, env(safe-area-inset-bottom));
    right: max(24px, env(safe-area-inset-right));
}


/* ---------- TOUCH SCREENS (phones, tablets) ---------- */
@media (hover: none) {
    /* Hover "lift" effects stick after a tap on touch screens and look
       like a glitch, so turn them off where there is no mouse */
    .service-box:hover,
    .stats-box:hover,
    .vertical-card:hover,
    .ecosystem-card:hover,
    .policy-card:hover,
    .policy-box:hover,
    .terms-block:hover,
    .value-card:hover,
    .hero-stat:hover {
        transform: none;
    }

    /* Dots are 12px visually; give fingers a 40px hit area around them */
    .gallery-dot,
    .indicator {
        position: relative;
    }

    .gallery-dot::before,
    .indicator::before {
        content: "";
        position: absolute;
        inset: -14px;
    }
}


/* ---------- TABLETS AND BELOW (up to 900px) ---------- */
@media (max-width: 900px) {
    /* Contact page: links in the details column become comfortable tap targets */
    .contact-detail a {
        display: inline-block;
        padding: 8px 0;
    }

    .page-body {
        padding-top: 50px;
        padding-bottom: 60px;
    }
}


/* ---------- PHONES (up to 700px) ---------- */
@media (max-width: 700px) {
    /* iPhones zoom the whole page when you tap a field whose text is under
       16px. Keeping form fields at 16px stops that. */
    .field input,
    .field select,
    .field textarea {
        font-size: 16px;
    }

    .contact-form {
        padding: 22px;
    }

    /* Homepage: the floating "Years of Maritime Excellence" badge label
       was shrinking to 11px on phones */
    .about-floating-card p {
        font-size: 0.8rem;
    }

    /* Vertical pages: less padding so content starts sooner */
    .vertical-page section {
        padding: 56px 0;
    }

    .hero-section {
        padding: 120px 0 80px;
    }

    .hero-logo {
        margin-bottom: 32px;
    }

    .service-box {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .stats-box {
        padding: 26px 12px;
        border-radius: 20px;
    }

    .stats-box p {
        font-size: 0.95rem;
    }

    .hero-btn {
        padding: 13px 26px;
    }

    .page-hero {
        padding: 120px 20px 56px;
    }
}


/* ---------- SMALL PHONES (up to 480px) ---------- */
@media (max-width: 480px) {
    .hero-btns {
        flex-direction: column;
        align-items: stretch;
        max-width: 300px;
        margin-inline: auto;
    }

    .hero-btn {
        text-align: center;
    }

    .service-box h3 {
        font-size: 1.3rem;
    }
}


/* ---------- PHONES HELD SIDEWAYS (landscape, short screen) ---------- */
/* Width looks like a tablet, but there's only ~360px of height. Without this
   the hero padding and logo push the page title off the first screen. */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 90px 0 50px;
    }

    .hero-logo {
        margin-bottom: 18px;
    }

    .hero-logo img {
        max-height: 80px;
        width: auto;
    }

    .vertical-page .hero-content h1 {
        font-size: 1.9rem;
        margin-bottom: 12px;
    }

    .vertical-page .hero-content p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .hero-btns {
        margin-top: 20px;
    }

    .page-hero {
        padding: 90px 20px 40px;
    }

    /* Policies and Terms heroes */
    .policies-hero,
    .terms-hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 90px 0 70px;
    }

    .hero-scroll-indicator,
    .hero-icon {
        display: none;
    }

    .carousel-section {
        margin-top: -40px;
    }
}

@media (max-width: 991px) {
    .verticals-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns on tablet */
    }
}

@media (max-width: 640px) {
    .verticals-grid {
        grid-template-columns: 1fr;             /* stack on mobile */
        gap: 20px;
    }
    .verticals-section {
        margin-top: -40px;                      /* less overlap on mobile */
    }
}