/* ============================================================
   MARITIME WORLD - responsive.css
   Shared mobile + tablet layer, loaded AFTER styles1.css / mt.css
   on every page. Desktop (>1100px) stays untouched except pure
   safety guards. Design tokens follow styles1.css.
   ============================================================ */

/* ------------------------------------------------------------
   0. GLOBAL SAFETY GUARDS (all viewports, zero visual change
      on healthy layouts)
   ------------------------------------------------------------ */
/* NOTE: html overflow-x clip was removed on purpose. WebKit treats
   it as a scroll container and position sticky stops working on
   iPhone and iPad, which froze neither the topbar nor the anchor
   nav. Real overflow sources are fixed at the element level. */

iframe, video, embed, object { max-width: 100%; }

button, .pill, a.pill, .nav-mobile-toggle { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--lime-400, #E4C97A);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Backdrop for the mobile drawer, created by main.js. Hidden on desktop. */
.nav-backdrop { display: none; }

/* ------------------------------------------------------------
   1. TABLET BAND (721px - 1100px)
      Countdown glass leaves the absolute hero corner and flows
      under the CTAs, so it never covers hero copy on tablets.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cd-glass { position: static; margin-top: 30px; text-align: left; bottom: auto; right: auto; }
  .cd-glass .container { padding: 0; }
  .cd-glass-panel { display: block; transform: none; max-width: 620px; }
  .hero-inner { padding-bottom: 72px; }
}

/* ------------------------------------------------------------
   2. MOBILE NAVIGATION DRAWER (<= 860px)
   ------------------------------------------------------------ */
@media (max-width: 860px) {

  body.nav-open { overflow: hidden; }
  body.nav-open .topbar { z-index: 1300; }

  /* Backdrop */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 12, 38, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Drawer panel (overrides the desktop .nav-links and the old
     inline dropdown styles on event pages) */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(84vw, 380px);
    height: auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(86px + env(safe-area-inset-top, 0px)) 30px
             calc(30px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #06255B 0%, #001D4F 46%, #001226 100%);
    border: 0;
    border-left: 1px solid rgba(228, 201, 122, 0.30);
    border-radius: 0;
    box-shadow: -34px 0 90px -24px rgba(0, 12, 38, 0.85);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.44s cubic-bezier(0.22, 0.9, 0.24, 1),
                visibility 0s linear 0.44s;
    z-index: 1200;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .nav-links {
    transform: none;
    visibility: visible;
    transition: transform 0.44s cubic-bezier(0.22, 0.9, 0.24, 1),
                visibility 0s;
  }

  /* Small gold eyebrow at the top of the drawer */
  .nav-links::before {
    content: "Menu";
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold-400, #E4C97A);
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(228, 201, 122, 0.35);
  }

  /* Drawer links: big touch rows, always white (also beats the
     light-topbar rules from mt.css) */
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 14px 2px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .nav-links a::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid rgba(228, 201, 122, 0.8);
    border-right: 2px solid rgba(228, 201, 122, 0.8);
    transform: rotate(45deg);
    flex: none;
    opacity: 0.85;
  }
  body.nav-open .nav-links a { opacity: 1; transform: none; }
  body.nav-open .nav-links a:nth-child(1) { transition-delay: 0.04s; }
  body.nav-open .nav-links a:nth-child(2) { transition-delay: 0.08s; }
  body.nav-open .nav-links a:nth-child(3) { transition-delay: 0.12s; }
  body.nav-open .nav-links a:nth-child(4) { transition-delay: 0.16s; }
  body.nav-open .nav-links a:nth-child(5) { transition-delay: 0.20s; }
  body.nav-open .nav-links a:nth-child(6) { transition-delay: 0.24s; }
  body.nav-open .nav-links a:nth-child(7) { transition-delay: 0.28s; }
  body.nav-open .nav-links a:nth-child(8) { transition-delay: 0.32s; }

  /* Hamburger button: animated burger -> X (spans injected by main.js) */
  .nav-mobile-toggle { position: relative; z-index: 1310; }
  .nav-mobile-toggle .burger {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }
  .nav-mobile-toggle .burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
                opacity 0.2s ease, top 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .nav-mobile-toggle .burger span:nth-child(1) { top: 0; }
  .nav-mobile-toggle .burger span:nth-child(2) { top: 6px; }
  .nav-mobile-toggle .burger span:nth-child(3) { top: 12px; }
  .nav-mobile-toggle.is-open .burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav-mobile-toggle.is-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
  .nav-mobile-toggle.is-open .burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* While the drawer is open: bar always reads as dark-on-navy,
     also on the light-topbar event pages (mt.css) */
  body.nav-open .topbar:not(.past-banner) .nav-mobile-toggle,
  body.nav-open .nav-mobile-toggle {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }
  body.nav-open .topbar .brand .mw-logo-white { display: block !important; }
  body.nav-open .topbar .brand .mw-logo-navy { display: none !important; }
}

/* ------------------------------------------------------------
   3. GRID / FLEX MIN-CONTENT FIXES
      The whole "content wider than the phone" bug class:
      1fr tracks grow to a child's min-content. Force tracks to
      minmax(0, 1fr) and let children shrink.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .m26-hotel-wrap { grid-template-columns: minmax(0, 1fr); }
  .m26-hotel-wrap > * { min-width: 0; }
}
@media (max-width: 860px) {
  .stages-pillars,
  .format-wrap,
  .venue-wrap,
  .about-wrap,
  .startup-grid,
  .cta-final-wrap,
  .m25-hotel-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .stages-pillars > *,
  .format-wrap > *,
  .venue-wrap > *,
  .about-wrap > *,
  .startup-grid > *,
  .cta-final-wrap > *,
  .m25-hotel-wrap > div,
  .m25-hotel-wrap > div > * {
    min-width: 0;
  }
  .m25-hcar { max-width: 100%; }
  .m25-hotel-video:has(iframe) { max-width: 100%; }
  .m25-hotel-offer { max-width: 100%; }
}
@media (max-width: 720px) {
  .mwf-grid { grid-template-columns: minmax(0, 1fr); }
  .mwf-grid > * { min-width: 0; }
}

/* Newsletter form: let the input shrink instead of pushing the
   whole column past the viewport */
.newsletter-form input { min-width: 0; }

@media (max-width: 480px) {
  .newsletter-card { padding: 26px 22px; }
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }
  .newsletter-form input {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 15px 18px;
  }
  .newsletter-form button {
    width: 100%;
    padding: 15px 22px;
    border-radius: 14px;
  }
}

/* ------------------------------------------------------------
   4. COUNTDOWN GLASS PANEL, SMALL SCREENS
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .cd-glass-head { flex-wrap: wrap; gap: 4px 16px; }
  .cd-glass-meta { white-space: normal; font-size: 12px; opacity: 0.85; }
}
@media (max-width: 420px) {
  .cd-glass-panel { padding: 15px 16px 17px; }
  .cd-glass-tile .cd-n { font-size: clamp(27px, 8.4vw, 34px); }
  .cd-glass-tile .cd-t { font-size: 9px; letter-spacing: 0.16em; }
}

/* ------------------------------------------------------------
   5. TYPOGRAPHY + RHYTHM, MOBILE
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(35px, 9.8vw, 44px); line-height: 1.06; }
  .hero-sub { font-size: 16px; }
  .section-head { margin-bottom: 38px; }
  .section-head h2 { font-size: clamp(30px, 8.2vw, 34px); }
  .cta-final h2 { font-size: clamp(34px, 9.6vw, 40px); }
}
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .topbar .container { padding: 0 16px; }
  .nav-cta.pill-primary { padding: 11px 16px; font-size: 13.5px; gap: 7px; }
  .nav-cta .arrow { width: 15px; height: 15px; }
}

/* Long-label pills wrap instead of overflowing (Awards rules PDF
   etc.). Topbar CTA and countdown-finished button stay one line. */
@media (max-width: 640px) {
  .pill:not(.nav-cta):not(.cd-finish-btn) {
    white-space: normal;
    text-align: center;
    justify-content: center;
    max-width: 100%;
    line-height: 1.35;
  }
}

/* ------------------------------------------------------------
   6. FORMS + INPUTS ON TOUCH (no iOS auto-zoom, comfy targets)
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .newsletter-form input,
  .mwf input[type="text"],
  .mwf input[type="email"],
  .mwf input[type="tel"],
  .mwf input[type="url"],
  .mwf select,
  .mwf textarea {
    font-size: 16px;
  }
}
@media (pointer: coarse) {
  .m25lb-prev, .m25lb-next, .m25lb-x,
  #lbPrev, #lbNext, #lbClose, #smClose,
  .fp-modal-x, .agm-x {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   7. HERO ON PHONES: static poster instead of the 16 MB video
      (main.js removes the <video> element; this paints the
      same frame as a background so nothing flashes)
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  /* Poster stays as a painted fallback underneath the video, so
     the hero never flashes empty while the file loads. The video
     itself now plays on phones and tablets too. */
  .hero {
    background: var(--ocean-900, #002053) url("assets/hero-poster.jpg") center / cover no-repeat;
  }
}

/* ------------------------------------------------------------
   8. FOOTER + SAFE AREAS
   ------------------------------------------------------------ */
.footer-bottom {
  padding-bottom: max(26px, env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------
   9. REDUCED MOTION, GLOBAL
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .nav-links,
  .nav-links a,
  .nav-backdrop,
  .nav-mobile-toggle .burger span {
    transition: none !important;
  }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------
   10. EVENT SUB NAV (.evt-anchnav), PHONES + TABLETS
       The links row is a horizontal scroller. Original CSS
       centered it, which makes the left items unreachable once
       content overflows. Align to start, tighten the metrics,
       and show edge fades (classes toggled by main.js) so it
       clearly reads as scrollable instead of cut off.
   ------------------------------------------------------------ */
.evt-anchnav .container { position: relative; }
.evt-anchnav .container::before,
.evt-anchnav .container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.evt-anchnav .container::before {
  left: 0;
  background: linear-gradient(to right, #F5F7F9 42%, rgba(245, 247, 249, 0));
}
.evt-anchnav .container::after {
  right: 0;
  background: linear-gradient(to left, #F5F7F9 42%, rgba(245, 247, 249, 0));
}

/* gold tap arrows, shown together with the matching fade */
.evt-anch-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.2s ease;
}
.evt-anch-arrow svg {
  width: 23px;
  height: 23px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 32, 83, 0.22));
}
.evt-anch-arrow.prev { left: 0; }
.evt-anch-arrow.prev svg { transform: scaleX(-1); }
.evt-anch-arrow.next { right: 0; }
.evt-anch-arrow:active { transform: scale(0.9); }
.evt-anchnav.can-left .evt-anch-arrow.prev { opacity: 1; pointer-events: auto; }
.evt-anchnav.can-right .evt-anch-arrow.next { opacity: 1; pointer-events: auto; }
.evt-anchnav.can-left .container::before { opacity: 1; }
.evt-anchnav.can-right .container::after { opacity: 1; }

@media (max-width: 900px) {
  /* Single scrolling row, aligned to the first item. Overflow is
     signalled by the edge fades and gold tap arrows above. */
  .evt-anch-links {
    flex-wrap: nowrap;
    justify-content: flex-start;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    padding: 0;
  }
  .evt-anch-links a { scroll-snap-align: start; }
  .evt-anchnav a {
    font-size: 12px;
    letter-spacing: 0.09em;
    padding: 15px 13px;
  }
  .evt-anchnav a::after { left: 13px; right: 13px; bottom: 9px; }
}

/* ------------------------------------------------------------
   11. EVENT BANNER META, SMALL SCREENS
       On phones the banner strip is ~77px tall and the absolute
       date / place overlay collides with the title baked into
       the artwork. Below 740px the meta leaves the image and
       becomes its own navy caption bar under the banner.
   ------------------------------------------------------------ */
@media (max-width: 740px) {
  .evt-banner-meta {
    position: static;
    background: linear-gradient(135deg, var(--evt, #0A2F6E) 0%, var(--evt2, #001D4F) 100%);
    padding: 9px 14px 10px;
    gap: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-shadow: none;
    line-height: 1.5;
  }
  .evt-banner-meta .sep { width: 4px; height: 4px; box-shadow: none; }
}

/* ------------------------------------------------------------
   12. COMPANY LOGO TILES, PHONES + TABLETS
       The sponsor tiles keep a fixed 600/288 shape with heavy
       padding, tuned for the government wordmarks. Square and
       ultra wide logos shrink into tiny marks inside big white
       cards. Below 900px the tiles switch to 16/9 with tight
       padding, and the Malta partner cards let the logo use the
       full card, so every mark reads at a sensible size.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .mt-sponsor-tile {
    aspect-ratio: 16 / 9;
    padding: 10px 12px;
  }
}

@media (max-width: 640px) {
  .partners-strip .ps-card {
    height: 104px;
    min-width: 250px;
    padding: 0 20px;
  }
  .partners-strip .ps-card-img img {
    height: auto;
    max-height: 68px;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   13. SPOTLIGHT CARDS, BADGE VS TEXT
       styles1 has a correct mobile rule that turns the round
       badge into a static row above the text, but the base
       absolute rule was pasted later in the file and wins the
       cascade, so on phones the 118px stamp sits on top of the
       eyebrow and heading. Re-assert the intended mobile layout
       from here, where load order guarantees it wins.
   ------------------------------------------------------------ */
@media (max-width: 920px) {
  .spot-card { padding: 42px 34px; }
  .spot-card h3 { max-width: 100%; }
  .spot-logo {
    position: static;
    height: 84px;
    width: auto;
    max-width: 70%;
    object-fit: contain;
    object-position: left center;
    margin: 0 0 14px;
  }
}

/* Safari safety net: if the old sponsor grid class ever returns,
   force zero-basis tracks so intrinsic logo widths cannot push
   the second column off screen in WebKit. */
@media (max-width: 1080px) {
  .mt-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ------------------------------------------------------------
   14. MALTA 2026, THREE MOBILE REFINEMENTS
       a) The venue photo is a client composite with two circular
          interior insets baked into the top left of the file. On
          phones the crop window reaches them and they land on the
          label, so mobile gets a clean crop via the picture source
          (assets/venue-m.jpg) added in the html.
       b) The booth table hides its per-row quote column below
          1100px, so a single shared Request a quote button shows
          under the table on those widths.
       c) Speakers and jury cards go two per row on phones, same
          as the other event pages, with compact type so the cards
          stay tidy at half width. Zero-basis tracks on purpose,
          WebKit must not size columns from photo intrinsics.
   ------------------------------------------------------------ */
.booth-quote-mobile { display: none; }
@media (max-width: 1100px) {
  .booth-quote-mobile { display: flex; justify-content: center; margin-top: 18px; }
}
@media (max-width: 560px) {
  .spk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .spk-info { padding: 12px 14px; }
  .spk-info h4 { font-size: 14px; }
  .spk-info p { font-size: 11.5px; }
  .spk-photo svg { width: 44px; height: 44px; }
  .spk-tba { font-size: 8.5px; letter-spacing: 0.12em; left: 10px; bottom: 10px; padding: 4px 8px; }
}