/* ========================================================================
   RESPONSIVE LAYOUT SYSTEM
   ------------------------------------------------------------------------
   One final source of truth for page geometry. This intentionally overrides
   accumulated device-specific patches while retaining the visual design in
   style.css: colour, typeface, artwork, card treatment and animation.
   Breakpoints: mobile <= 767px, tablet 768–1199px, desktop >= 1200px.
   ======================================================================== */

:root {
  --layout-gutter: clamp(18px, 4vw, 56px);
  --section-space: clamp(56px, 7vw, 104px);
}

html, body { max-width: 100%; overflow-x: clip; }

#main-nav .nav-inner,
#showreel .showreel-shell,
#about > *,
#contact > *,
#cinematography,
#photography { min-width: 0; }

@media (min-width: 768px) and (max-width: 1199px) {
#cinematography,
#photography {
  box-sizing: border-box;
  padding-inline: var(--layout-gutter) !important;
  padding-block: var(--section-space) !important;
}

#cinematography::before,
#photography::before { inset: clamp(16px, 2.8vw, 38px) !important; }

#cinematography .section-header,
#photography .section-header {
  width: 100%;
  min-width: 0;
  margin-bottom: clamp(18px, 2.4vw, 32px) !important;
}

#cinematography .cat-tabs,
#photography .cat-tabs,
#cinematography .cat-select,
#photography .cat-select,
#video-grid-all,
#photo-grid-all,
#video-pagination,
#photo-pagination {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#video-grid-all,
#photo-grid-all { width: 100% !important; overflow: clip !important; }

#video-grid-all > *,
#photo-grid-all > * { min-width: 0 !important; max-width: 100%; }

#video-pagination,
#photo-pagination {
  width: 100%;
  min-height: 48px;
  margin: clamp(22px, 3vw, 36px) 0 0 !important;
  padding-bottom: clamp(22px, 3vw, 36px) !important;
}

/* Video modal: one contained column. Metadata always belongs to the same
   box as the player and can scroll inside its own panel if necessary. */
#video-modal.open {
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) !important;
  overflow: auto !important;
  align-items: center !important;
}

#video-modal.open > .modal-box,
#video-modal.tablet-portrait-info > .modal-box {
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 960px) !important;
  max-width: 94vw !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#video-modal.open .modal-video-wrap {
  width: 100% !important;
  height: var(--responsive-video-height, auto) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

#video-modal.open .modal-video-wrap iframe,
#video-modal.open .modal-video-wrap video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#video-modal.open .modal-info,
#video-modal.tablet-portrait-info .modal-info,
#video-modal.tablet-portrait-info .modal-info.modal-info--stacked {
  display: grid !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title category"
    "youtube category"
    "desc desc"
    "counter counter" !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 6px 14px !important;
  padding: 14px 18px 16px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#video-modal.open #modal-title,
#video-modal.tablet-portrait-info #modal-title { display: block !important; grid-area: title !important; }
#video-modal.open .modal-youtube-stats,
#video-modal.tablet-portrait-info .modal-youtube-stats { grid-area: youtube !important; }
#video-modal.open #modal-desc,
#video-modal.tablet-portrait-info #modal-desc { display: block !important; grid-area: desc !important; margin: 0 !important; max-height: none !important; overflow: visible !important; }
#video-modal.open #modal-category,
#video-modal.tablet-portrait-info #modal-category { grid-area: category !important; align-self: start !important; }
#video-modal.open #video-counter,
#video-modal.tablet-portrait-info #video-counter { display: inline-flex !important; grid-area: counter !important; justify-self: end !important; margin: 0 !important; }
}

/* Desktop ---------------------------------------------------------------- */
@media (min-width: 1200px) {
  #main-nav .nav-toggle { display: none !important; }
  #main-nav .nav-links {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    max-height: none !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
  }
  #cinematography .cat-tabs,
  #photography .cat-tabs { display: flex !important; }
  #cinematography .cat-select,
  #photography .cat-select { display: none !important; }
}

/* Tablet ----------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --layout-gutter: clamp(28px, 5vw, 54px); --section-space: clamp(64px, 8vw, 92px); }
  #main-nav .nav-toggle { display: flex !important; }
  #cinematography .cat-tabs,
  #photography .cat-tabs { display: none !important; }
  #cinematography .cat-select,
  #photography .cat-select { display: block !important; width: min(260px, 100%) !important; }
  #video-modal.open > .modal-box { width: min(92vw, 860px) !important; }
  #video-grid-all,
  #photo-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  #video-grid-all,
  #photo-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Large touch tablets can expose a desktop-sized CSS viewport (for example
   1280px in landscape), but retain the tablet interaction and fit rules. */
html.is-touch-tablet #video-modal.open .modal-info {
  max-height: none !important;
  overflow: visible !important;
}

/* Low-height landscape: reserve vertical room for metadata rather than
   letting a long description fall below the visible modal. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) and (max-height: 820px) {
  #video-modal.open > .modal-box { width: min(90vw, 880px, calc((100dvh - 190px) * 16 / 9)) !important; }
  #video-modal.open .modal-info { max-height: none !important; overflow: visible !important; }
}

/* Touch tablets in landscape use the desktop information architecture.  The
   compact controls in legacy rules are intentionally overridden here; only
   type and spacing are reduced a little to keep the header composed. */
@media (orientation: landscape) {
  html.is-touch-tablet #main-nav .nav-toggle {
    display: none !important;
  }

  html.is-touch-tablet #main-nav .nav-inner {
    padding-inline: clamp(20px, 2.5vw, 34px) !important;
    gap: clamp(16px, 2vw, 24px) !important;
  }

  html.is-touch-tablet #main-nav .nav-logo {
    gap: 8px !important;
    transform: none !important;
  }

  html.is-touch-tablet #main-nav .logo-img {
    width: 38px !important;
    height: 38px !important;
  }

  html.is-touch-tablet #main-nav .logo-name {
    font-size: clamp(.74rem, 1.08vw, .84rem) !important;
    letter-spacing: .11em !important;
  }

  html.is-touch-tablet #main-nav .logo-sub {
    font-size: clamp(.5rem, .75vw, .59rem) !important;
    letter-spacing: .075em !important;
  }

  html.is-touch-tablet #main-nav .nav-links {
    position: static !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: clamp(8px, 1vw, 14px) !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Undo the touch-menu rule that makes every list item full-width. */
  html.is-touch-tablet #main-nav .nav-links li {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html.is-touch-tablet #main-nav .nav-links a,
  html.is-touch-tablet #main-nav .nav-link {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 clamp(7px, .65vw, 10px) !important;
    border-radius: 999px !important;
    color: rgba(232,232,232,.58) !important;
    font-size: clamp(.62rem, .82vw, .7rem) !important;
    letter-spacing: .115em !important;
    text-align: left !important;
    transition: color .28s ease, background .28s ease, box-shadow .28s ease !important;
  }

  html.is-touch-tablet #main-nav .nav-link::after {
    display: none !important;
  }

  html.is-touch-tablet #main-nav .nav-link.active {
    color: #f4fbff !important;
    background: linear-gradient(180deg, rgba(106,176,212,.17), rgba(106,176,212,.07)) !important;
    box-shadow: inset 0 0 0 1px rgba(106,176,212,.2), 0 7px 20px rgba(0,0,0,.18) !important;
  }

  html.is-touch-tablet #cinematography .cat-tabs,
  html.is-touch-tablet #photography .cat-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 14px 0 30px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Match the compact tablet header navigation rhythm. */
  html.is-touch-tablet #cinematography .cat-tab,
  html.is-touch-tablet #photography .cat-tab {
    min-height: 32px !important;
    padding: 0 clamp(7px, .65vw, 10px) !important;
    font-size: clamp(.62rem, .82vw, .7rem) !important;
    letter-spacing: .115em !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  html.is-touch-tablet #cinematography .cat-select,
  html.is-touch-tablet #photography .cat-select {
    display: none !important;
  }
}

/* iPad landscape often reports a desktop-width viewport.  Keep the modal a
   touch smaller on short displays so all metadata remains visible. */
@media (orientation: landscape) and (max-height: 820px) {
  html.is-touch-tablet #video-modal.open > .modal-box {
    width: min(88vw, 920px, calc((100dvh - 164px) * 16 / 9)) !important;
  }
  html.is-touch-tablet #video-modal.open .modal-info {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* The iPad landscape header uses the rendered hero frame as its horizontal
   ruler.  JavaScript writes the exact frame width into this custom property. */
@media (orientation: landscape) and (min-width: 768px) {
  html.is-touch-tablet #main-nav .nav-inner {
    width: var(--touch-tablet-nav-frame-width, calc(100% - 40px)) !important;
    max-width: var(--touch-tablet-nav-frame-width, calc(100% - 40px)) !important;
    padding-inline: 0 !important;
  }

  html.is-touch-tablet #main-nav .nav-links li:last-child .nav-link {
    padding-right: 0 !important;
  }
}

/* Portrait tablets: prevent older touch-modal transforms or offsets from
   pulling the metadata column away from the player. */
@media (orientation: portrait) and (min-width: 768px) {
  html.is-touch-tablet #cinematography #video-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.is-touch-tablet #photography #photo-grid-all {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html.is-touch-tablet #video-modal.open > .modal-box,
  html.is-touch-tablet #video-modal.tablet-portrait-info > .modal-box {
    overflow: hidden !important;
    transform: none !important;
  }

  html.is-touch-tablet #video-modal.open .modal-info,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info,
  html.is-touch-tablet #video-modal.tablet-portrait-info .modal-info.modal-info--stacked {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  html.is-touch-tablet #video-modal.open #modal-title,
  html.is-touch-tablet #video-modal.open .modal-youtube-stats,
  html.is-touch-tablet #video-modal.open #modal-desc,
  html.is-touch-tablet #video-modal.open #modal-category,
  html.is-touch-tablet #video-modal.open #video-counter {
    min-width: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
    translate: none !important;
  }
}

/* Tablet landscape landing composition: retain the full 16:9 showreel while
   fitting the complete hero and player within one available screen. */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1440px) {
  /* Align every major glass surface to the Photography/Cinematography frame.
     Those sections use a 36px visual inset on compact tablet landscape. */
  html.is-touch-tablet.is-compact-landscape-gallery #showreel .showreel-shell,
  html.is-touch-tablet.is-compact-landscape-gallery #about .about-inner,
  html.is-touch-tablet.is-compact-landscape-gallery #contact .contact-inner {
    width: calc(100% - 72px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  /* About and Contact have their own section padding, so their inner glass
     panels must be measured from the viewport rather than that padded box. */
  html.is-touch-tablet.is-compact-landscape-gallery #about .about-inner,
  html.is-touch-tablet.is-compact-landscape-gallery #contact .contact-inner {
    width: calc(100vw - 72px) !important;
    margin-left: calc(50% - 50vw + 36px) !important;
    margin-right: 0 !important;
  }

  html.is-touch-tablet.is-compact-landscape-gallery #about.section-about,
  html.is-touch-tablet.is-compact-landscape-gallery #contact.section-contact {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  html.is-touch-tablet.is-compact-landscape-gallery #about .about-inner,
  html.is-touch-tablet.is-compact-landscape-gallery #contact .contact-inner {
    width: 100% !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #showreel.section-showreel {
    padding-top: 68px !important;
    padding-bottom: 28px !important;
  }

  html.is-touch-tablet #showreel .showreel-shell {
    width: min(calc(100% - 40px), 1080px) !important;
    margin-top: 10px !important;
    padding: 0 12px 8px !important;
    gap: 18px !important;
  }

  html.is-touch-tablet #showreel .showreel-shell .hero-intro {
    padding: 32px 18px 0 !important;
  }

  html.is-touch-tablet #showreel .hero-kicker {
    margin-bottom: 9px !important;
    font-size: .52rem !important;
    letter-spacing: .2em !important;
  }

  html.is-touch-tablet #showreel .hero-title {
    margin-bottom: 14px !important;
    font-size: clamp(1.5rem, 2.85vw, 1.9rem) !important;
    line-height: 1 !important;
  }

  html.is-touch-tablet #showreel .hero-role {
    margin-bottom: 14px !important;
    padding: 4px 8px !important;
    font-size: .54rem !important;
  }

  html.is-touch-tablet #showreel .hero-summary {
    margin-bottom: 16px !important;
    font-size: .74rem !important;
    line-height: 1.28 !important;
  }

  html.is-touch-tablet #showreel .hero-actions {
    margin-bottom: 10px !important;
    gap: 6px !important;
  }

  html.is-touch-tablet #showreel .hero-btn {
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: .54rem !important;
  }

  html.is-touch-tablet #showreel .showreel-player {
    width: min(86vw, 900px, calc((100svh - 330px) * 16 / 9)) !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: auto !important;
  }
}

/* Mobile landscape video modal: use horizontal space deliberately.
   ‹ | player | information | › */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) and (max-height: 800px) {
  #video-modal.modal-overlay {
    padding:
      calc(env(safe-area-inset-top, 0px) + 42px)
      max(12px, env(safe-area-inset-right))
      calc(env(safe-area-inset-bottom, 0px) + 12px)
      max(12px, env(safe-area-inset-left)) !important;
    align-items: center !important;
  }

  #video-modal.open > .modal-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(175px, .85fr) !important;
    width: 100% !important;
    max-width: 1120px !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  #video-modal.open .modal-video-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }

  #video-modal.open .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      ". ."
      "category counter" !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255,255,255,.1) !important;
    overflow: hidden !important;
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
    text-align: left !important;
    align-content: start !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #video-modal.open #modal-title,
  #video-modal.open .modal-youtube-stats,
  #video-modal.open #modal-desc,
  #video-modal.open #modal-category,
  #video-modal.open #video-counter {
    min-width: 0 !important;
    margin: 0 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  #video-modal.open #modal-title {
    grid-area: title !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    font-size: .84rem !important;
    line-height: 1.24 !important;
    letter-spacing: .075em !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #video-modal.open .modal-youtube-stats {
    grid-area: stats !important;
    margin-top: 4px !important;
    font-size: .68rem !important;
    text-align: left !important;
  }

  #video-modal.open #modal-desc {
    grid-area: desc !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    margin-top: 12px !important;
    overflow: hidden !important;
    font-size: .72rem !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #video-modal.open #modal-category {
    grid-area: category !important;
    align-self: end !important;
    justify-self: start !important;
    margin-top: 8px !important;
    padding: 5px 8px !important;
    font-size: .58rem !important;
    text-align: left !important;
  }

  #video-modal.open #video-counter {
    grid-area: counter !important;
    align-self: end !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: .62rem !important;
  }

  #video-modal.open .modal-nav {
    display: flex !important;
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    z-index: 6 !important;
    width: 38px !important;
    height: 58px !important;
    min-width: 38px !important;
    transform: translateY(-50%) !important;
  }

  #video-modal.open .modal-nav--prev {
    left: 6px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }
  #video-modal.open .modal-nav--next {
    right: 6px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }

  /* A phone in desktop-width Safari can also receive the tablet class.
     Preserve the split-panel presentation over those older tablet rules. */
  html.is-touch-tablet #video-modal.open .modal-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title title"
      "stats stats"
      "desc desc"
      ". ."
      "category counter" !important;
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.is-touch-tablet #video-modal.open #modal-category {
    place-self: end start !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #video-modal.open #video-counter {
    place-self: end !important;
    margin: 0 !important;
  }

  html.is-touch-tablet #video-modal.open #modal-title {
    display: -webkit-box !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html.is-touch-tablet #video-modal.open #modal-desc {
    display: -webkit-box !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }
}