/* === responsive.css (MOGA FINAL - UNIVERSAL + HERO FIXED) === */
/* =========================================================
   === KEYFRAMES (ONCE)
   ========================================================= */

@keyframes media-slide-percent{
  0%, 20%   { transform: translate3d(0%,0,0); }
  25%, 45%  { transform: translate3d(-100%,0,0); }
  50%, 70%  { transform: translate3d(-200%,0,0); }
  75%, 95%  { transform: translate3d(-300%,0,0); }
  100%      { transform: translate3d(0%,0,0); }
}

@keyframes arrow-bob{
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(6px); }
}

/* =========================================================
   === REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .media-card__strip,
  .fb-post__slide,
  .scroll-down{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   === GLOBAL SCALE OVERRIDES (TOKENS) — ALL BREAKPOINTS LIVE HERE
   ========================================================= */

/* Large desktop */
@media (min-width: 1367px){
  :root{
    --max: 1280px;
    --media-w: 680px;
    --media-h: 390px;
    --hero-copy: 540px;
    --section-pad-y: 64px;
  }

  .hero__title{ font-size: clamp(34px, 2.6vw, 44px); }
  .hero__lead{ font-size: 16px; max-width: 56ch; }
}

/* Ultra-wide */
@media (min-width: 1600px){
  :root{
    --max: 1440px;
    --media-w: 820px;
    --media-h: 470px;
    --hero-copy: 620px;
    --section-pad-y: 78px;
  }
}

@media (min-width: 2560px){
  :root{
    --max: 1560px;
    --media-w: 900px;
    --media-h: 520px;
    --hero-copy: 680px;
  }

  .hero__title{ font-size: clamp(52px, 2.6vw, 64px); }
  .hero__lead{ font-size: 19px; }
}

/* Small desktop / laptop */
@media (min-width: 1025px) and (max-width: 1366px){
  :root{
    --max: 1160px;
    --media-w: 580px;
    --media-h: 340px;
    --hero-copy: 480px;
    --section-pad-y: 52px;
  }
}

/* =========================================================
   === DESKTOP (>= 1025px): HERO ARROW (single source of truth)
   ========================================================= */
@media (min-width: 1025px){
  .hero{
    position: relative;
    padding-bottom: 100px; /* space for arrow */
  }

  .scroll-down{
    position: absolute !important;
    left: 50% !important;
    bottom: 32px !important;
    top: auto !important;
    right: auto !important;

    margin: 0 !important;
    z-index: 60;

    width: 60px;
    height: 60px;
    border-radius: 999px;

    display: grid;
    place-items: center;

    font-size: 52px;
    line-height: 1;
    color: var(--primary);
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);

    transform: translateX(-50%);
    animation: arrow-bob 1.6s ease-in-out infinite;
    transition: opacity .2s ease, transform .2s ease;
  }

  .scroll-down:hover{ animation-play-state: paused; }

  .scroll-down.is-hidden{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px) !important;
  }
}

/* =========================================================
   === SMALL DESKTOP / LAPTOP (1025–1366): HERO GRID + MEDIA
   === Supports BOTH old .media-card and new .fb-post
   ========================================================= */
@media (min-width: 1025px) and (max-width: 1366px){
  .hero__inner{
    grid-template-columns: minmax(480px, 580px) 1fr;
    column-gap: clamp(20px, 3.5vw, 48px);
    align-items: center;
  }

  /* old carousel (safe to keep) */
  .media-card{ width: 100%; max-width: 100%; }

  .media-card__viewport{
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    max-height: 340px;
  }

  .media-card__strip{
    display: flex;
    height: 100%;
    animation: media-slide-percent 12s infinite;
  }

  .media-card__strip > img{
    width: 100%;
    height: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    object-fit: cover;
  }

  /* new FB card */
  .fb-post{ width: 100%; max-width: 100%; }
  .fb-post__slides{ width: 100%; height: auto; aspect-ratio: 16 / 10; }

  .hero__copy{ max-width: var(--hero-copy); }
  .hero__title{ font-size: clamp(30px, 2.8vw, 36px); }

  /* slightly larger arrow on laptops */
  .scroll-down{
    width: 64px;
    height: 64px;
    font-size: 44px;
  }
}

/* =========================================================
   === TABLET + PHONE (<= 1024px): MOBILE HERO LAYOUT
   ========================================================= */
@media (max-width: 1024px){
  .hero{
    padding: 32px 0 110px;
    position: relative;
  }

  .hero__inner{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    row-gap: 24px !important;
  }

  .hero__media{
    width: 100%;
    justify-self: stretch;
    display: flex;
    justify-content: center;
  }

  /* old carousel (safe) */
  .media-card{
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 10px;
  }

  .media-card__viewport{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 21 / 9;
    max-height: 36svh;
    max-height: 36vh;
    border-radius: 14px;
    overflow: hidden;
  }

  .media-card__strip{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    height: 100% !important;
    will-change: transform;
    animation: media-slide-percent 12s infinite !important;
  }

  .media-card__strip > img{
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
  }

  /* new FB card */
  .fb-post{
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }
  .fb-post__slides{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 44vh;
  }

  .hero__copy{
    width: 100% !important;
    max-width: min(72ch, 720px) !important;

    justify-self: center !important;
    margin-inline: auto !important;

    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .kicker{
    text-align: center;
    width: 100%;
    margin: 0 auto;
    margin-inline: auto !important;
  }

  .hero__title{
    font-size: clamp(32px, 5vw, 46px) !important;
    text-align: center;
    margin: 0 auto;
    margin-inline: auto !important;
    line-height: 1.12;
  }

  .hero__lead{
    font-size: clamp(16px, 2.2vw, 18px) !important;
    max-width: 62ch;
    text-align: center;
    margin: 0 auto;
    margin-inline: auto !important;
    line-height: 1.72;
  }

  .actions{
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  /* Tablet/phone arrow (base for <=1024) */
  .scroll-down{
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important; /* safer default */
    top: auto !important;
    right: auto !important;

    margin: 0 !important;
    z-index: 60;

    display: grid;
    place-items: center;

    width: 80px;
    height: 80px;
    font-size: 40px;

    border-radius: 999px;
    color: var(--primary);
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 16px 34px rgba(0,0,0,0.14);

    transform: translateX(-50%);
    will-change: transform;
    animation: arrow-bob 1.6s ease-in-out infinite;
    transition: opacity .2s ease, transform .2s ease;
  }

  .scroll-down.is-hidden{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px) !important;
  }

  .grid--contact > .contact-card{ grid-column: span 12; }
}

/* iPad Air/Pro */
@media (min-width: 821px) and (max-width: 1024px){
  .hero{ padding: 28px 0 110px !important; }

  .fb-post{ max-width: 720px !important; }
  .fb-post__slides{
    aspect-ratio: 16 / 10 !important;
    max-height: 44vh !important;
  }

  .hero__title{
    font-size: clamp(38px, 4.2vw, 50px) !important;
    line-height: 1.08;
  }

  .hero__lead{
    font-size: 17px !important;
    line-height: 1.7;
    max-width: 60ch !important;
  }

  .scroll-down{
    width: 86px !important;
    height: 86px !important;
    font-size: 42px !important;
    bottom: 18px !important;
  }

  /* Tablets: keep desktop nav visible, hide CTA if needed for space */
  .nav{ display: flex !important; gap: clamp(16px, 2vw, 24px); }
  .nav a{ font-size: 14px; }
  .header__right .btn--primary{ display: none; }
}

/* === iPad Pro (1024 x 1366) emphasis === */
@media (width: 1024px) and (height: 1366px){
  .hero{ padding: 34px 0 120px !important; }

  .fb-post{ max-width: 880px !important; }

  .hero__copy{
    max-width: 860px !important;
    gap: 16px !important;
  }

  .hero__title{
    font-size: clamp(44px, 4.2vw, 56px) !important;
    line-height: 1.08 !important;
  }

  .hero__lead{
    font-size: 18px !important;
    line-height: 1.75 !important;
    max-width: 66ch !important;
  }

  .actions{ margin-top: 18px !important; }
  .hero__copy{ justify-self: center !important; margin-inline: auto !important; }

  .scroll-down{ bottom: 22px !important; }
}

/* Standard tablets / large phones */
@media (min-width: 391px) and (max-width: 820px){
  .hero{ padding: 24px 0 110px; }

  .fb-post{ max-width: 92vw; }
  .fb-post__slides{ max-height: 42vh; }

  .hero__title{
    font-size: clamp(30px, 5.5vw, 40px) !important;
    line-height: 1.1;
  }

  .hero__lead{
    font-size: clamp(15px, 2.5vw, 18px) !important;
    line-height: 1.7;
  }

  .scroll-down{
    width: 80px !important;
    height: 80px !important;
    font-size: 40px !important;
    bottom: 14px !important;
  }

  .card{ padding: 22px; }
  .h2{ font-size: clamp(24px, 5.5vw, 30px); }
  .lead, .sublead{ line-height: 1.7; }

  .card-accent,
  .card--about::before,
  .card--activities::before,
  .card--projects::before{
    top: 14px;
    left: 14px;
    width: 34px;
    height: 3px;
  }
}

/* =========================================================
   === PHONES: FINAL HERO FIT (includes iPhone 12 Pro + S8+)
   ========================================================= */

/* Base: push hero content up on phones, and reserve room for arrow */
@media (max-width: 480px){
  .snap.hero{
    height: auto !important;
    min-height: auto !important;
    scroll-snap-align: start !important;

    padding-top: 0 !important;
    padding-bottom: 96px !important; /* room for arrow under buttons */
  }

  .snap.hero,
  .snap.hero .hero__inner{
    display: block !important;
  }

  .snap.hero .hero__inner{
    padding-top: 10px !important;
    margin-top: 0 !important;
    row-gap: 12px !important;
  }

  .snap.hero .hero__copy{ gap: 10px !important; }

  /* neutralize any flex centering from global rules */
  main.hero,
  section.hero{
    align-items: initial !important;
    justify-content: initial !important;
  }

  /* keep FB card from going huge */
  .fb-post{ max-width: 92vw !important; }
  .fb-post__slides{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 42vh !important;
  }

  /* Arrow: default ON for phones that can fit it */
  .scroll-down{
    bottom: 10px !important;
    width: 72px !important;
    height: 72px !important;
    font-size: 36px !important;
    z-index: 60 !important;
  }
}

/* Short phones (Galaxy S8+ style): reduce sizes + hide arrow to avoid clipping */
@media (max-width: 380px) and (max-height: 760px){
  .snap.hero{
    padding-bottom: 30px !important;
  }

  .fb-post__slides{
    aspect-ratio: 16 / 10 !important;
    max-height: 34vh !important;
  }

  .hero__title{
    font-size: clamp(24px, 7.4vw, 30px) !important;
    line-height: 1.10 !important;
  }

  .hero__lead{
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 46ch !important;
  }

  .actions{ margin-top: 8px !important; gap: 10px !important; }
  .actions .btn{ padding: 10px 14px !important; font-size: 13px !important; }

  .scroll-down{ display: none !important; }
}

/* Very small phones fallback */
@media (max-width: 390px){
  .hero__title{
    font-size: clamp(22px, 6.5vw, 28px);
    line-height: 1.1;
  }

  .hero__lead{
    font-size: 14px;
    line-height: 1.7;
  }

  .actions{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    gap: 9px !important;
  }

  .actions .btn{
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 13.5px;
  }
}

/* =========================================================
   === OTHER LAYOUT BREAKPOINTS (NON-HERO)
   ========================================================= */
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .split--projects{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .grid--cards > .cardx{ grid-column: span 12; }
  .panel-head{ flex-direction: column; align-items: flex-start; }
}

/* About section */
@media (max-width: 980px){
  .about-top{ grid-template-columns: 1fr; }
  .about-right{ padding-top: 0; }
  .about-stats{ grid-template-columns: 1fr; }
  .about-bottom .wchart{ grid-column: span 12; }
  .about-bottom .wspark{ grid-column: span 12; }
  .spark{ height: 44px; }
}

/* =========================================================
   === MOBILE MENU (ONE IMPLEMENTATION, NO DUPLICATES)
   ========================================================= */
.mobile-menu-toggle,
.mobile-menu,
.mobile-menu-overlay{
  display: none !important;
}

.mobile-menu-toggle{
  flex-direction: column;
  gap: 5px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  z-index: 2001;
}

.mobile-menu-toggle span{
  display: block;
  width: 26px;
  height: 3px;
  background: var(--text, #07130f);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.is-open span:nth-child(1){
  transform: rotate(45deg) translate(7px, 7px);
}
.mobile-menu-toggle.is-open span:nth-child(2){
  opacity: 0;
}
.mobile-menu-toggle.is-open span:nth-child(3){
  transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu{
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  z-index: 2000;
  padding: 80px 24px 24px;
  transition: right 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.is-open{ right: 0; }

.mobile-menu nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu nav a{
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text, #07130f);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.mobile-menu nav a:hover,
.mobile-menu nav a:focus{
  background: rgba(254, 214, 0, 0.10);
}

.mobile-menu-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.is-open{
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 820px){
  .nav{ display: none !important; }
  .header__right .btn--primary{ display: none !important; }

  .mobile-menu-toggle{ display: flex !important; }
  .mobile-menu{ display: block !important; }
  .mobile-menu-overlay{ display: block !important; }

  .header .container{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
}

@media (min-width: 821px){
  .nav{ display: flex !important; }
  .header__right .btn--primary{ display: inline-flex !important; }
}

@media (max-width: 820px){
  .card--activities .section-head{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .card--activities .metrics{
    justify-self: stretch !important;
    align-self: start !important;
  }

  .metrics{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .metrics .metric:nth-child(3){
    grid-column: 1 / -1 !important;
  }

  .metric{
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .metric__num{ font-size: 16px !important; line-height: 1.05 !important; }
  .metric__label{ font-size: 12px !important; line-height: 1.25 !important; }
}

@media (max-width: 390px){
  .metrics{ grid-template-columns: 1fr !important; }
  .metrics .metric:nth-child(3){ grid-column: auto !important; }
}

/* =========================================================
   === SHORT LAPTOPS (e.g. 1366x768):
   === - keep arrow visible
   === - keep bob animation working
   === - add breathing room between content and arrow
   ========================================================= */
@media (min-width: 1025px) and (max-height: 820px) {
  .hero{
    padding-top: 18px !important;
    padding-bottom: 120px !important; /* more space above arrow */
  }

  /* pin arrow to viewport on short heights */
  .scroll-down{
    position: fixed !important;
    left: 50% !important;
    bottom: 18px !important; /* lower */
    top: auto !important;
    right: auto !important;

    /* IMPORTANT: do NOT !important transform, otherwise animation can't run */
    transform: translateX(-50%);
    animation: arrow-bob 1.6s ease-in-out infinite !important;

    z-index: 9999 !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   === FIX: FOOTER NOT VISIBLE ON MOBILE
   === Reason: main.page scrolls, footer is outside it
   ========================================================= */
@media (max-width: 820px){
  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }

  /* stop using the internal scroll container */
  .page{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;

    /* if you use snap scrolling globally, disable it on mobile */
    scroll-snap-type: none !important;
  }

  /* optional: remove snapping from sections on mobile */
  .snap{
    scroll-snap-align: none !important;
  }
}

/* =========================================================
   === FIX: FOOTER NOT VISIBLE ON MOBILE
   === Reason: main.page scrolls, footer is outside it
   ========================================================= */
@media (max-width: 820px){
  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }

  /* stop using the internal scroll container */
  .page{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;

    /* if you use snap scrolling globally, disable it on mobile */
    scroll-snap-type: none !important;
  }

  /* optional: remove snapping from sections on mobile */
  .snap{
    scroll-snap-align: none !important;
  }
}