/* NAFSAM Mobile-First Responsive Layer
   Breakpoints: 320 / 480 / 768 / 1024 / 1440 */
:root{
  --mobile-edge:16px;
  --tap:44px;
  --safe-bottom:max(14px,env(safe-area-inset-bottom));
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{max-width:100vw;overscroll-behavior-y:auto}
img,video,iframe,canvas,svg{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
button,a,[role="button"],.nafsam-link,.dock a,.btn,.lang,.lang-btn,.nafsam-fixed-home{min-width:var(--tap);min-height:var(--tap)}
.nafsam-fixed-home{isolation:isolate}
main,section,article,.glass-panel,.glass-card,.module,.legacy-card,.journey-memory-card{min-width:0}
video{display:block;width:100%;height:auto}
iframe{display:block;width:100%}

/* 320-479: small phones / iPhone SE */
@media (max-width:479px){
  :root{--mobile-edge:14px}
  body{padding-left:0!important;padding-right:0!important}
  main{max-width:100%!important}
  .shell,.wrap,#journey-real-root,#legacy-media-root{width:calc(100% - 28px)!important}
  .shell{padding-top:72px!important;padding-bottom:118px!important}

  /* Home */
  .hero{grid-template-columns:1fr!important;gap:12px!important}
  .hero-main{padding:24px 18px!important;border-radius:22px!important}
  .hero-side{padding:14px!important;border-radius:22px!important;gap:9px!important}
  .hero h1{font-size:clamp(38px,13vw,52px)!important;line-height:1.02!important;margin:12px 0 14px!important}
  .hero-text{font-size:15px!important;line-height:1.75!important}
  .hero-actions{gap:8px!important;margin-top:18px!important}
  .hero-actions .btn{flex:1 1 100%;display:flex;align-items:center;justify-content:center;padding:12px 14px!important}
  .stat{padding:12px 14px!important}
  .stat b{font-size:23px!important}
  .section-head{margin-top:25px!important}
  .section-head h2{font-size:25px!important}
  .modules{grid-template-columns:1fr!important;gap:12px!important}
  .module{min-height:245px!important;border-radius:22px!important}
  .module-body{padding:18px!important}
  .module h3{font-size:22px!important}
  .cover{height:61%!important}

  /* Common headers */
  header[class*="fixed"],nav[class*="fixed"][class*="top-0"]{max-width:100vw}
  h1{overflow-wrap:anywhere}
  .fx-status{display:none!important}

  /* Galleries / archive */
  .legacy-grid,
  #youtube-song-grid,
  #songs-grid,
  #video-only-grid,
  #writings-grid,
  .journey-real-grid,
  .grid.grid-cols-1.sm\:grid-cols-2,
  .grid.grid-cols-1.md\:grid-cols-2{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .legacy-card,.journey-memory-card,.song-card{border-radius:18px!important}
  .legacy-photo{aspect-ratio:4/5!important}
  .journey-memory-image{aspect-ratio:4/5!important}
  .journey-memory-copy{padding:16px!important}
  .journey-memory-copy h3{font-size:19px!important}
  .journey-memory-copy p{font-size:14px!important;line-height:1.8!important}

  /* Full-width video */
  #video-only-grid article,
  #video-only-grid.nafsam-two-col article{width:100%!important}
  #video-only-grid.nafsam-two-col{grid-template-columns:1fr!important}
  #video-only-grid video,.legacy-video,video{width:100%!important}
  .nafsam-view-toggle{min-height:44px!important;padding:10px 14px!important}

  /* Text pages */
  .section{padding:19px!important;border-radius:21px!important}
  .section h2{font-size:24px!important}
  .prose p,.section p{font-size:15px!important;line-height:1.9!important}
  .grid{grid-template-columns:1fr!important}

  /* Mobile dock */
  .nafsam-dock,.dock{
    width:calc(100vw - 12px)!important;
    left:6px!important;right:6px!important;
    transform:none!important;
    bottom:var(--safe-bottom)!important;
    padding:5px!important;gap:2px!important;border-radius:22px!important
  }
  .nafsam-link,.dock a{height:50px!important;min-height:50px!important;border-radius:16px!important;font-size:0!important;padding:6px 2px!important}
  .nafsam-link .material-symbols-outlined,.dock a .material-symbols-outlined,.dock a span{font-size:21px!important;margin:0!important}
  .nafsam-link:nth-child(n),.dock a:nth-child(n){display:flex!important}
  .nafsam-fixed-home{left:max(10px,env(safe-area-inset-left))!important;top:max(10px,env(safe-area-inset-top))!important;width:44px!important;height:44px!important}

  /* Lightbox */
  #lightbox,#holo-viewer{padding:8px!important}
  #lightbox img,#holo-viewer img,#holo-viewer video{max-height:82dvh!important;object-fit:contain!important}
  .holo-shell{width:100%!important;height:88dvh!important;border-radius:20px!important;padding:8px!important}
}

/* 480-767: large phones */
@media (min-width:480px) and (max-width:767px){
  .shell,.wrap,#journey-real-root,#legacy-media-root{width:calc(100% - 34px)!important}
  .hero{grid-template-columns:1fr!important;gap:14px!important}
  .hero-main{padding:28px 24px!important}
  .hero h1{font-size:clamp(46px,10vw,60px)!important}
  .modules{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .module{min-height:255px!important}
  .module-body{padding:17px!important}
  .module h3{font-size:21px!important}
  .legacy-grid,#video-only-grid,#songs-grid,#writings-grid{grid-template-columns:1fr!important}
  .journey-real-grid{grid-template-columns:1fr!important}
  .nafsam-dock,.dock{width:calc(100vw - 18px)!important}
}

/* 768-1023: tablets / portrait iPad */
@media (min-width:768px) and (max-width:1023px){
  .shell,.wrap,#journey-real-root,#legacy-media-root{width:min(94vw,900px)!important}
  .hero{grid-template-columns:1fr!important}
  .modules{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .legacy-grid,#songs-grid,#video-only-grid,#writings-grid,.journey-real-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* 1024-1439: tablet landscape / small desktop */
@media (min-width:1024px) and (max-width:1439px){
  .modules{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .legacy-grid,#songs-grid,#video-only-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .journey-real-grid,#writings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* 1440+: wide desktop */
@media (min-width:1440px){
  .shell{max-width:1280px}
  .modules{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Touch devices: remove hover-only motion and expensive blur */
@media (hover:none) and (pointer:coarse){
  .module:hover,.glass-panel:hover,.glass-card:hover,article:hover,.nafsam-link:hover,.btn:hover{transform:none!important}
  .glass-panel,.glass-card,.module,.nafsam-dock,.dock,.section{backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
  body:after,.aurora,.ambient-aurora{animation-duration:60s!important}
}

/* Accessibility + battery */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}


/* Unified 7-slot NAFSAM bottom navigation */
.nafsam-dock,nav.dock,#bottom-nav{display:none!important}
.nafsam-unified-dock{
  position:fixed;
  z-index:13000;
  left:50%;
  bottom:max(10px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100vw - 16px),760px);
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  padding:7px;
  border:1px solid rgba(155,232,255,.18);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(12,20,29,.92),rgba(3,8,13,.88));
  box-shadow:0 18px 60px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
.nafsam-unified-link{
  position:relative;
  min-width:0;
  min-height:54px;
  border-radius:17px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:#81939d;
  text-decoration:none;
  font:600 8px/1 Geist,system-ui,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:background .22s ease,color .22s ease,transform .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.nafsam-unified-link .material-symbols-outlined{
  font-size:21px;
  line-height:1;
}
.nafsam-unified-link.active{
  color:#9be8ff;
  background:linear-gradient(180deg,rgba(155,232,255,.15),rgba(155,232,255,.055));
  box-shadow:inset 0 0 0 1px rgba(155,232,255,.18),0 0 22px rgba(91,140,255,.08);
}
.nafsam-unified-link.active:after{
  content:"";
  position:absolute;
  bottom:5px;
  width:16px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#9be8ff,#e8c76a);
  box-shadow:0 0 10px rgba(155,232,255,.55);
}
.nafsam-unified-link:hover{color:#dff8ff;background:rgba(155,232,255,.06)}
body{padding-bottom:max(110px,calc(94px + env(safe-area-inset-bottom)))!important}

@media(max-width:479px){
  .nafsam-unified-dock{
    width:calc(100vw - 8px);
    left:4px;
    right:4px;
    transform:none;
    bottom:max(6px,env(safe-area-inset-bottom));
    gap:0;
    padding:4px;
    border-radius:21px;
  }
  .nafsam-unified-link{
    min-height:50px;
    border-radius:14px;
    font-size:0;
    padding:0;
  }
  .nafsam-unified-link .material-symbols-outlined{font-size:20px}
  .nafsam-unified-link.active:after{bottom:4px;width:14px}
}
@media(min-width:480px) and (max-width:767px){
  .nafsam-unified-dock{width:calc(100vw - 14px);gap:2px;padding:5px}
  .nafsam-unified-link{min-height:52px;font-size:7px}
}
@media(hover:none) and (pointer:coarse){
  .nafsam-unified-link:hover{transform:none}
  .nafsam-unified-dock{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}