/*
 * BOKAH MEDIA — mobile art direction
 * A single, coherent mobile layer. Desktop rules are intentionally untouched.
 */

@media (max-width: 767px) {
  :root {
    --mobile-gutter: clamp(16px, 5vw, 24px);
    --mobile-nav: 64px;
    --mobile-ink: #f4f8fa;
    --mobile-muted: rgba(222, 232, 236, .68);
    --mobile-line: rgba(176, 220, 235, .18);
    --mobile-blue: #9edcf0;
    --mobile-ease: cubic-bezier(.22, 1, .36, 1);
  }

  html, body { width: 100%; min-width: 0; overflow-x: clip !important; }
  body {
    background:
      radial-gradient(circle at 50% -8%, rgba(134, 209, 235, .12), transparent 26rem),
      linear-gradient(180deg, #060708 0%, #050505 42%, #080a0b 100%) !important;
  }

  #main-nav {
    height: var(--mobile-nav) !important;
    min-height: var(--mobile-nav) !important;
    background: rgba(5, 7, 8, .78) !important;
    border-bottom: 1px solid rgba(194, 229, 240, .14) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(22px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
  }
  #main-nav .nav-inner {
    width: 100% !important;
    height: 100% !important;
    padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right)) !important;
    gap: 8px !important;
  }
  #main-nav .nav-logo {
    order: 1 !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    gap: 8px !important;
  }
  #main-nav .logo-img { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
  #main-nav .logo-name { max-width: 122px !important; font-size: .73rem !important; letter-spacing: .12em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #main-nav .logo-sub { font-size: .39rem !important; letter-spacing: .11em !important; }
  #main-nav .nav-links { display: none !important; }
  #main-nav .language-switcher { flex: 0 0 auto !important; gap: 0 !important; padding: 3px !important; border-radius: 999px !important; background: rgba(162, 216, 235, .07) !important; border: 1px solid rgba(176, 220, 235, .16) !important; }
  #main-nav .language-switcher { order: 2 !important; }
  #main-nav .language-switcher a { min-height: 26px !important; padding: 0 6px !important; font-size: .55rem !important; letter-spacing: .04em !important; }
  #main-nav .language-switcher .language-flag { width: 13px !important; height: 10px !important; }
  #main-nav .nav-toggle { order: 3 !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; border: 1px solid rgba(190, 229, 241, .26) !important; border-radius: 50% !important; background: rgba(158, 220, 240, .08) !important; }
  #main-nav .nav-toggle span { width: 17px !important; height: 1px !important; }

  .section-showreel, .section-about, .portfolio-section, .section-contact {
    width: 100% !important;
    padding: 58px var(--mobile-gutter) !important;
    scroll-margin-top: var(--mobile-nav) !important;
  }
  #showreel.section-showreel { padding-top: 22px !important; padding-bottom: 62px !important; }
  #showreel .showreel-shell {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: clamp(18px, 5vw, 26px) !important;
    border: 1px solid rgba(191, 229, 240, .16) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(17, 24, 27, .86), rgba(5, 7, 8, .94)) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07) !important;
  }
  #showreel .hero-intro {
    width: 100% !important;
    min-height: 116px !important;
    padding: 4px 2px 0 !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #showreel .hero-kicker { margin-bottom: 12px !important; color: var(--mobile-blue) !important; font-size: .58rem !important; letter-spacing: .24em !important; }
  #showreel .hero-title { max-width: 11ch !important; margin: 0 !important; font-size: clamp(2.2rem, 11vw, 3.7rem) !important; line-height: .98 !important; letter-spacing: -.055em !important; text-wrap: balance !important; }
  #showreel .hero-role { margin-top: 14px !important; color: var(--mobile-muted) !important; font-size: .68rem !important; letter-spacing: .16em !important; line-height: 1.5 !important; }
  #showreel .showreel-player-stack { width: 100% !important; min-width: 0 !important; }
  #showreel .showreel-player { width: 100% !important; aspect-ratio: 16 / 10 !important; min-height: 0 !important; border: 1px solid rgba(177, 221, 235, .14) !important; border-radius: 14px !important; overflow: hidden !important; background: #030506 !important; box-shadow: 0 12px 32px rgba(0,0,0,.3) !important; }
  #showreel .showreel-sound-toggle { top: 12px !important; right: 12px !important; z-index: 3 !important; transform: scale(.88) !important; transform-origin: top right !important; }
  #showreel .hero-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; }
  #showreel .hero-btn { min-width: 0 !important; min-height: 44px !important; padding: 0 7px !important; font-size: .55rem !important; letter-spacing: .08em !important; white-space: nowrap !important; }
  #showreel .hero-social-links { justify-content: flex-start !important; min-height: 20px !important; }
  #showreel .scroll-indicator { margin-top: 2px !important; font-size: .53rem !important; letter-spacing: .25em !important; }

  .section-header, .gallery-title-header { align-items: flex-start !important; margin-bottom: 22px !important; text-align: left !important; }
  .section-title { display: flex !important; align-items: center !important; gap: 7px !important; font-size: clamp(1.05rem, 5vw, 1.35rem) !important; letter-spacing: .1em !important; line-height: 1.1 !important; }
  .section-title-mark { width: 18px !important; margin: 0 !important; }
  .section-title-icon { font-size: .78em !important; }
  .section-intro, .section-cert { margin-top: 10px !important; font-size: .78rem !important; line-height: 1.65 !important; }
  .portfolio-section::before { inset: 20px 8px !important; border-color: rgba(190,220,232,.08) !important; }
  .portfolio-section .cat-select { width: min(100%, 230px) !important; min-height: 40px !important; margin: 0 0 18px !important; font-size: .68rem !important; }
  #cinematography #video-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #photography #photo-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .video-card, .photo-card, .ai-card { border-radius: 12px !important; }
  .video-card-info, .photo-card-info, .ai-card-info { padding: 10px 9px !important; }
  .video-card-info h3, .photo-card-info h3, .ai-card-info h3 { font-size: .68rem !important; line-height: 1.35 !important; }
  .video-card-meta, .photo-card-meta, .ai-card-meta { font-size: .53rem !important; }

  #about .about-inner, #contact .contact-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  #about .about-photo-wrap, #contact .contact-photo-wrap { width: min(74vw, 270px) !important; margin-inline: auto !important; }
  #about .about-bio-block { text-align: left !important; }
  #about .about-name, #contact .contact-name { font-size: clamp(1.2rem, 6vw, 1.7rem) !important; line-height: 1.15 !important; }
  #about .about-bio, #about .about-bio p, #contact .contact-tagline { font-size: .82rem !important; line-height: 1.8 !important; }
  #about .bokah-brand-panel { padding: 22px 18px !important; border-radius: 18px !important; }
  #about .bokah-logo-evolution { gap: 18px !important; }
  #about .bokah-evolution-arrow { transform: rotate(90deg) scale(.78) !important; }
  #contact .contact-profile, #contact .contact-form { padding: 22px 18px !important; border-radius: 18px !important; }
  #contact .contact-links { gap: 8px !important; }
  #contact .contact-btn { width: 38px !important; height: 38px !important; }
  #contact .cf-row--2 { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  #contact .cf-input, #contact .cf-textarea { min-height: 46px !important; font-size: .82rem !important; }

  @keyframes bmk-mobile-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  #showreel .showreel-shell, #about .about-inner, .portfolio-section .section-header, .section-contact .contact-inner { animation: bmk-mobile-rise .72s var(--mobile-ease) both; }
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 600px) {
  :root { --mobile-nav: 58px; }
  #main-nav { height: var(--mobile-nav) !important; min-height: var(--mobile-nav) !important; }
  .section-showreel, .section-about, .portfolio-section, .section-contact { padding: 34px 20px !important; }
  #showreel.section-showreel { padding: 14px 20px 40px !important; }
  #showreel .showreel-shell { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important; grid-template-areas: "intro player" "actions player" "social social" !important; gap: 12px 18px !important; padding: 18px !important; border-radius: 18px !important; align-items: center !important; }
  #showreel .hero-intro { grid-area: intro !important; min-height: 0 !important; }
  #showreel .showreel-player-stack { grid-area: player !important; }
  #showreel .hero-actions { grid-area: actions !important; grid-template-columns: 1fr !important; gap: 6px !important; }
  #showreel .hero-social-links { grid-area: social !important; }
  #showreel .hero-title { font-size: clamp(1.75rem, 5vw, 2.7rem) !important; }
  #showreel .hero-role { margin-top: 9px !important; font-size: .58rem !important; }
  #showreel .hero-btn { min-height: 34px !important; font-size: .5rem !important; }
  #showreel .showreel-player { aspect-ratio: 16 / 9 !important; }
  #cinematography #video-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #photography #photo-grid-all { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  #about .about-inner, #contact .contact-inner { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important; gap: 18px !important; align-items: start !important; }
  #about .about-left, #contact .contact-profile { grid-column: 1 !important; }
  #about .about-right, #contact .contact-form { grid-column: 2 !important; }
  #about .about-photo-wrap, #contact .contact-photo-wrap { width: min(24vw, 170px) !important; }
  #about .bokah-brand-panel { grid-column: 1 / -1 !important; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #showreel .showreel-shell, #about .about-inner, .portfolio-section .section-header, .section-contact .contact-inner { animation: none !important; }
}

/* Phone landscape can be wider than the portrait breakpoint. Keep it in the
 * mobile art direction whenever the short edge is phone-sized. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  :root { --mobile-nav: 58px; }
  html, body { width: 100%; min-width: 0; overflow-x: clip !important; }
  #main-nav { height: var(--mobile-nav) !important; min-height: var(--mobile-nav) !important; }
  #main-nav .nav-inner { width: 100% !important; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)) !important; }
  #main-nav .nav-logo { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; }
  #main-nav .nav-toggle { order: 3 !important; display: flex !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
  #main-nav .nav-links { display: none !important; }
  #main-nav .language-switcher { order: 2 !important; display: flex !important; flex: 0 0 auto !important; }
  #main-nav .logo-name { font-size: .73rem !important; }
  #main-nav .logo-sub { font-size: .39rem !important; }

  .section-showreel, .section-about, .portfolio-section, .section-contact { width: 100% !important; padding: 34px 20px !important; scroll-margin-top: var(--mobile-nav) !important; }
  #showreel.section-showreel { padding: 14px 20px 40px !important; }
  #showreel .showreel-shell { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important; grid-template-areas: "intro player" "actions player" "social social" !important; gap: 12px 18px !important; padding: 18px !important; border-radius: 18px !important; align-items: center !important; }
  #showreel .hero-intro { grid-area: intro !important; width: 100% !important; min-height: 0 !important; padding: 0 !important; text-align: left !important; visibility: visible !important; opacity: 1 !important; }
  #showreel .showreel-player-stack { grid-area: player !important; width: 100% !important; }
  #showreel .showreel-player { width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; }
  #showreel .hero-actions { grid-area: actions !important; display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; width: 100% !important; }
  #showreel .hero-social-links { grid-area: social !important; justify-content: flex-start !important; }
  #showreel .hero-title { max-width: 11ch !important; font-size: clamp(1.75rem, 5vw, 2.7rem) !important; line-height: .98 !important; }
  #showreel .hero-role { margin-top: 9px !important; font-size: .58rem !important; }
  #showreel .hero-btn { min-height: 34px !important; padding-inline: 7px !important; font-size: .5rem !important; }
  #showreel .showreel-sound-toggle { top: 10px !important; right: 10px !important; transform: scale(.82) !important; transform-origin: top right !important; }
  #cinematography #video-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  #photography #photo-grid-all { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; }
  #about .about-inner, #contact .contact-inner { display: grid !important; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important; gap: 18px !important; align-items: start !important; }
  #about .about-left, #contact .contact-profile { grid-column: 1 !important; }
  #about .about-right, #contact .contact-form { grid-column: 2 !important; }
  #about .about-photo-wrap, #contact .contact-photo-wrap { width: min(24vw, 170px) !important; }
  #about .bokah-brand-panel { grid-column: 1 / -1 !important; }
}

/* Final mobile rhythm pass: strict editorial grid, shared baselines and
 * predictable thumbnail proportions. This block remains mobile-only. */
@media (max-width: 767px) {
  .portfolio-section {
    padding-inline: clamp(14px, 4.8vw, 22px) !important;
  }
  .portfolio-section .section-header {
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(190, 220, 232, .12) !important;
  }
  .portfolio-section .section-title {
    width: 100% !important;
    font-size: clamp(.92rem, 4.4vw, 1.14rem) !important;
    letter-spacing: .12em !important;
  }
  .portfolio-section .section-title-text { white-space: nowrap !important; }
  .portfolio-section .cat-select {
    display: block !important;
    width: min(100%, 206px) !important;
    min-height: 36px !important;
    margin: 0 0 14px !important;
    padding: 0 30px 0 13px !important;
    font-size: .62rem !important;
    letter-spacing: .11em !important;
  }
  #cinematography #video-grid-all {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 12px 9px !important;
  }
  #photography #photo-grid-all {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px 7px !important;
  }
  #cinematography #video-grid-all .video-card,
  #photography #photo-grid-all .photo-card {
    align-self: start !important;
    min-width: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  #cinematography #video-grid-all .video-thumb,
  #cinematography #video-grid-all .video-card > img,
  #cinematography #video-grid-all .video-card .video-thumbnail {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  #photography #photo-grid-all .photo-thumb,
  #photography #photo-grid-all .photo-card > img,
  #photography #photo-grid-all .photo-card .photo-thumbnail {
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  #cinematography #video-grid-all .video-card-info,
  #photography #photo-grid-all .photo-card-info {
    min-height: 52px !important;
    padding: 9px 8px 10px !important;
  }
  #cinematography #video-grid-all .video-card-info h3,
  #photography #photo-grid-all .photo-card-info h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    min-height: 2.55em !important;
    margin: 0 !important;
    font-size: clamp(.58rem, 2.35vw, .68rem) !important;
    line-height: 1.28 !important;
    letter-spacing: .025em !important;
  }
  #cinematography #video-grid-all .video-card-meta,
  #photography #photo-grid-all .photo-card-meta {
    margin-top: 5px !important;
    font-size: .48rem !important;
    line-height: 1.25 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .portfolio-section .pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 18px !important;
  }
  .portfolio-section .pg-btn {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 8px !important;
    font-size: .58rem !important;
  }
  #about .about-inner, #contact .contact-inner { gap: 24px !important; }
  #about .about-bio, #about .about-bio p, #contact .contact-tagline { max-width: 42ch !important; margin-inline: auto !important; font-size: clamp(.76rem, 3.2vw, .84rem) !important; line-height: 1.78 !important; }
  #contact .contact-profile, #contact .contact-form { padding: clamp(18px, 5vw, 24px) !important; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  .portfolio-section { padding-inline: 20px !important; }
  .portfolio-section .section-header { min-height: 28px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; }
  .portfolio-section .section-title { font-size: clamp(.82rem, 2.3vw, 1rem) !important; }
  .portfolio-section .cat-select { width: 190px !important; min-height: 32px !important; margin-bottom: 10px !important; font-size: .56rem !important; }
  #cinematography #video-grid-all { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  #photography #photo-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 9px !important; }
  #cinematography #video-grid-all .video-card,
  #cinematography #video-grid-all .video-card-thumb { aspect-ratio: 16 / 9 !important; }
  #cinematography #video-grid-all .video-card-thumb,
  #photography #photo-grid-all .photo-card-img { object-fit: cover !important; object-position: center !important; }
  #photography #photo-grid-all .photo-card { aspect-ratio: 4 / 5 !important; }
  #cinematography #video-grid-all .video-card-info, #photography #photo-grid-all .photo-card-info { min-height: 42px !important; padding: 7px !important; }
  #cinematography #video-grid-all .video-card-info h3, #photography #photo-grid-all .photo-card-info h3 { min-height: 2.4em !important; font-size: clamp(.5rem, 1.35vw, .61rem) !important; }
  #cinematography #video-grid-all .video-card-meta, #photography #photo-grid-all .photo-card-meta { margin-top: 3px !important; font-size: .42rem !important; }
  .portfolio-section .pagination { margin-top: 12px !important; }
}

/* Final thumbnail contract for portrait phones. The card and source frame
 * share the same ratio so no contain-letterboxing can reappear. */
@media (max-width: 767px) and (orientation: portrait) {
  #cinematography #video-grid-all .video-card,
  #cinematography #video-grid-all .video-card-thumb {
    aspect-ratio: 16 / 9 !important;
  }
  #cinematography #video-grid-all .video-card-thumb,
  #photography #photo-grid-all .photo-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  #photography #photo-grid-all .photo-card {
    aspect-ratio: 4 / 5 !important;
  }
}