/* =====================================================
   JCDCF MOBILE RESPONSIVE OVERRIDES
   ===================================================== */

/* ===== GLOBAL MOBILE FIXES ===== */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }
  
  section {
    padding: 3.5rem 5% !important;
  }

  h2.title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.3 !important;
  }

  .tag {
    font-size: .72rem !important;
  }

  p.body-text {
    font-size: .95rem !important;
    line-height: 1.75 !important;
  }

  .wrap {
    padding: 0 2%;
  }

  .gold-line {
    width: 40px;
    margin-bottom: 1.2rem;
  }
}

/* ===== NAVIGATION — MOBILE ===== */
@media (max-width: 680px) {
  #nav {
    height: 64px !important;
    padding: 0 3.5% !important;
  }

  .nav-logo-img {
    height: 34px !important;
  }

  .nav-brand-name {
    display: none !important;
  }

  .nav-divider {
    display: none !important;
  }

  .lang-btn {
    padding: 5px 14px !important;
    font-size: .72rem !important;
  }

  .mobile-menu-btn {
    font-size: 1.5rem !important;
    margin: 0 0.3rem !important;
  }
}

/* Mobile menu overlay improvements */
@media (max-width: 680px) {
  #mobile-menu ul {
    font-size: 1.3rem !important;
    gap: 1.6rem !important;
  }

  #mobile-menu a {
    font-size: 1.2rem !important;
  }
}

/* ===== HERO SECTION — MOBILE ===== */
@media (max-width: 680px) {
  #hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  .hero-content {
    top: 38% !important;
    right: 5% !important;
    left: 5% !important;
    max-width: none !important;
  }

  body.en .hero-content {
    left: 5% !important;
    right: 5% !important;
  }

  .hero-eyebrow {
    font-size: .62rem !important;
    padding: 4px 12px !important;
    margin-bottom: 1rem !important;
  }

  body.ar .hero-eyebrow {
    font-size: .72rem !important;
  }

  .hero-h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    line-height: 1.25 !important;
    margin-bottom: .8rem !important;
  }

  body.en .hero-h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  .hero-sub {
    font-size: .88rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: .7rem !important;
  }

  .btn-primary,
  .btn-outline {
    padding: 12px 24px !important;
    font-size: .85rem !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero video optimization */
  #hero-video {
    object-position: center center !important;
  }
}

/* ===== STATS BAR — MOBILE ===== */
@media (max-width: 680px) {
  .stats-bar {
    flex-wrap: wrap !important;
    padding: .3rem 0 !important;
  }

  .stat {
    flex: 0 0 50% !important;
    min-width: auto !important;
    max-width: none !important;
    padding: .7rem .5rem !important;
    border-left: none !important;
    border-right: none !important;
  }

  body.ar .stat {
    border-right: none !important;
  }

  .stat:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.1) !important;
  }

  body.ar .stat:nth-child(odd) {
    border-right: none !important;
    border-left: 1px solid rgba(255,255,255,.1) !important;
  }

  .stat-n {
    font-size: 1.4rem !important;
  }

  .stat-l {
    font-size: .58rem !important;
  }

  body.ar .stat-l {
    font-size: .65rem !important;
  }
}

/* Stats counter section (the grid version) */
@media (max-width: 480px) {
  #stats {
    padding: 3.5rem 4% !important;
  }

  #stats > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .sc-n {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }
}

/* ===== AMRA CITY — MOBILE ===== */
@media (max-width: 680px) {
  .amra-fullscreen {
    height: auto !important;
    min-height: 70vh !important;
    padding: 5rem 0 3rem !important;
  }

  .amra-content {
    padding: 0 5% !important;
  }

  .amra-logo-img {
    height: 55px !important;
  }

  .amra-logo-box {
    margin-bottom: 1.2rem !important;
  }

  .amra-h2 {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
    margin-bottom: 1rem !important;
  }

  .amra-desc {
    font-size: .92rem !important;
    line-height: 1.7 !important;
    margin: 0 auto 1.5rem !important;
  }

  .amra-facts {
    gap: 1.2rem !important;
    padding-top: 1.5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .af {
    flex: 0 0 calc(50% - 1rem);
  }

  .af-n {
    font-size: 1.4rem !important;
  }
}

/* ===== PROJECTS — MOBILE ===== */
@media (max-width: 680px) {
  #projects {
    padding: 3rem 0 0 !important;
  }

  .proj-header {
    padding: 0 5% !important;
    margin-bottom: 2rem !important;
  }

  .proj-tabs {
    padding: 0 4% !important;
    gap: .35rem !important;
    margin-bottom: 1.5rem !important;
  }

  .ptab {
    padding: .5rem .8rem !important;
    min-width: calc(50% - .35rem) !important;
    gap: .5rem !important;
  }

  .ptab-num {
    font-size: 1rem !important;
  }

  .ptab-label {
    font-size: .65rem !important;
    line-height: 1.2 !important;
  }

  /* Project panel - stacked layout */
  .proj-panel.active {
    flex-direction: column !important;
  }

  .proj-panel-img {
    flex: 0 0 auto !important;
    min-height: 220px !important;
    max-height: 260px !important;
    order: 1 !important;
  }

  .proj-panel-img img,
  .proj-panel-img-placeholder {
    min-height: 220px !important;
    max-height: 260px !important;
  }

  .proj-panel-info {
    order: 2 !important;
    padding: 1.5rem 5% 2rem !important;
    border: none !important;
    border-top: 3px solid var(--accent-color, var(--lavender)) !important;
  }

  .proj-panel-title {
    font-size: 1.1rem !important;
  }

  .proj-panel-stats {
    gap: 1rem !important;
  }

  .proj-stat-val {
    font-size: 1.1rem !important;
  }

  .proj-panel-desc {
    font-size: .82rem !important;
    line-height: 1.75 !important;
  }

  .proj-panel-num {
    display: none !important;
  }

  /* Hide the large watermark number on mobile */
  #proj-watermark-number {
    display: none !important;
  }
}

/* ===== WHY SECTION — MOBILE ===== */
@media (max-width: 680px) {
  #why {
    padding: 3.5rem 0 !important;
  }

  #why .wrap {
    padding: 0 5%;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
  }

  .wcard {
    padding: 2rem 1.5rem 1.8rem !important;
  }

  .wcard-bg-num {
    font-size: 5rem !important;
  }

  .wtitle {
    font-size: .95rem !important;
  }

  .wdesc {
    font-size: .82rem !important;
    line-height: 1.75 !important;
  }

  .wicon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 1.2rem !important;
  }
}

/* ===== MAP SECTION — MOBILE ===== */
@media (max-width: 680px) {
  #map-sec {
    padding: 3rem 4% !important;
  }

  .map-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .mpt {
    padding: 1rem 1.2rem !important;
  }
}

/* ===== GOALS — MOBILE ===== */
@media (max-width: 680px) {
  .goals-content {
    padding: 3rem 5% !important;
  }

  .goals-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .goal {
    padding: 1.4rem 1.4rem !important;
    gap: .8rem !important;
  }

  .gtext {
    font-size: .82rem !important;
    line-height: 1.7 !important;
  }
}

/* ===== TIMELINE / DEVELOPMENT ROADMAP — MOBILE ===== */
@media (max-width: 1100px) {
  /* Ensure the section has proper background on tablet/mobile */
  .scroll-timeline {
    background: var(--navy, #102542) !important;
  }

  /* Ensure title text colors are correct without the bg layers */
  .scroll-timeline .title {
    color: #fff !important;
  }

  .scroll-timeline .tag {
    color: var(--gold2) !important;
  }
}



  /* Timeline item — card style */
  .tl-item {
    position: relative !important;
    padding: 1.3rem 1.4rem !important;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    border-left: none !important;
    border-right: none !important;
    transition: background 0.3s, border-color 0.3s;
  }

  /* Step number indicator dot on timeline line */
  .tl-item::after {
    content: '';
    position: absolute;
    top: 1.5rem;
    right: -2rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(180, 183, 222, 0.25);
    border: 2px solid rgba(180, 183, 222, 0.4);
    transform: translateX(50%);
  }

  body.en .tl-item::after {
    right: auto;
    left: -2rem;
    transform: translateX(-50%);
  }

  /* Active item — highlighted */
  .tl-item.on {
    background: rgba(223, 181, 48, 0.08) !important;
    border-color: rgba(223, 181, 48, 0.2) !important;
  }

  .tl-item.on::after {
    background: var(--gold2) !important;
    border-color: var(--gold2) !important;
    box-shadow: 0 0 0 4px rgba(223, 181, 48, 0.2),
                0 0 12px rgba(223, 181, 48, 0.3);
  }

  /* Year */
  .tl-yr {
    font-size: 1rem !important;
    margin-bottom: .15rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  .tl-item.on .tl-yr {
    color: var(--gold2) !important;
  }

  /* Phase tag */
  .tl-ph {
    font-size: .62rem !important;
    margin-bottom: .3rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .tl-item.on .tl-ph {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Label */
  .tl-label {
    font-size: .88rem !important;
    margin-bottom: .35rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .tl-item.on .tl-label {
    color: #fff !important;
  }

  /* Description */
  .tl-desc {
    font-size: .78rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  .tl-item.on .tl-desc {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* Section heading spacing */
  .scroll-timeline .gold-line {
    margin: 0.8rem auto 0 !important;
  }
}

/* ===== BOARD / GOVERNANCE — MOBILE ===== */
@media (max-width: 680px) {
  #board {
    padding: 5rem 4% 3rem !important;
  }

  body.board-view #board {
    padding-top: 5rem !important;
  }

  .board-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .bcard {
    border-radius: 14px !important;
  }

  .bcard-body {
    padding: 1rem 1.2rem 1.4rem !important;
  }

  .bcard-name {
    font-size: .9rem !important;
  }

  .bcard-meta {
    font-size: .68rem !important;
  }

  /* Governance tabs */
  .gov-tabs {
    gap: .5rem !important;
    margin-bottom: 2rem !important;
  }

  .gtab {
    font-size: 1rem !important;
    padding: .6rem 1rem !important;
  }

  /* Team subtabs */
  .team-subtabs {
    gap: .4rem !important;
    margin: 1.5rem 0 1.2rem !important;
  }

  .stab {
    font-size: .8rem !important;
    padding: .45rem 1rem !important;
  }
}

/* ===== TEAM / PCARDS — MOBILE ===== */
@media (max-width: 640px) {
  .pteam-section {
    padding: 0.5rem 0 2rem !important;
  }

  .pcard-featured {
    padding: 1.8rem 1.3rem !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
    border-radius: 18px !important;
  }

  .pcard-featured .pcard-photo-wrap {
    width: 130px !important;
    height: 155px !important;
    border-radius: 14px !important;
  }

  .pcard-featured .pcard-name {
    font-size: 1.2rem !important;
  }

  .pcard-featured .pcard-badge {
    font-size: .6rem !important;
    padding: .3rem .9rem !important;
  }

  .pcard-featured .pcard-sub {
    font-size: .78rem !important;
  }

  .pcard-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .pcard .pcard-photo-wrap {
    height: 220px !important;
  }

  .pcard-info {
    padding: 1rem 1.2rem 1.3rem !important;
  }

  .pcard-info .pcard-name {
    font-size: .95rem !important;
  }

  .team-level-label {
    margin: 2rem auto 1rem !important;
    font-size: .7rem !important;
  }

  /* Circle avatar sizing on mobile */
  .bcard-photo, .tcard-photo, .tcard-ceo-photo {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ===== NEWS PAGE — MOBILE ===== */
@media (max-width: 680px) {
  body.news-view #news-page {
    padding-top: 5rem !important;
  }

  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .ncard-body {
    padding: 1.2rem 1.3rem !important;
  }

  .ncard-title {
    font-size: .92rem !important;
  }

  .ncard-excerpt {
    font-size: .8rem !important;
  }

  .ncard-img {
    height: 180px !important;
  }

  /* Single news view */
  #single-news-view {
    padding: 0 !important;
  }

  #sn-gallery img {
    height: auto !important;
    max-height: 300px !important;
  }
}

/* ===== ABOUT PAGE — MOBILE ===== */
@media (max-width: 680px) {
  body.about-view #about-page {
    padding-top: 5rem !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
}

/* ===== NEWS MODAL — MOBILE ===== */
@media (max-width: 680px) {
  .news-modal-overlay {
    padding: .5rem !important;
    align-items: flex-end !important;
  }

  .news-modal-content {
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #news-modal-img {
    max-height: 250px !important;
  }

  .news-modal-body {
    padding: 1.2rem 1.3rem !important;
  }

  .news-modal-title {
    font-size: 1.15rem !important;
  }

  body.ar .news-modal-title {
    font-size: 1.1rem !important;
  }

  .news-modal-text {
    font-size: .92rem !important;
    line-height: 1.7 !important;
  }

  .news-modal-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.2rem !important;
    top: 10px !important;
    right: 10px !important;
  }
}

/* ===== FOOTER — MOBILE ===== */
@media (max-width: 680px) {
  footer {
    padding: 3rem 5% 2rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .ft-logo-img {
    height: 50px !important;
  }

  .ft-promise {
    font-size: .82rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.2rem !important;
  }

  .ft-col-title {
    font-size: .6rem !important;
    margin-bottom: 1rem !important;
  }

  .ft-links a {
    font-size: .82rem !important;
  }

  .fti-text {
    font-size: .8rem !important;
  }

  .ft-bottom {
    flex-direction: column !important;
    gap: .5rem !important;
    text-align: center !important;
    margin-top: 1.2rem !important;
  }

  .ft-copy, .ft-vision {
    font-size: .68rem !important;
  }

  .socials {
    justify-content: center !important;
    margin-bottom: .5rem !important;
  }
}

/* ===== 3D CITY / MAP — MOBILE ===== */
@media (max-width: 480px) {
  .city3d-canvas-wrap {
    height: 320px !important;
  }

  #googleMap3d {
    height: 320px !important;
  }

  .city3d-panel {
    width: calc(100% - 2rem) !important;
    right: 1rem !important;
    left: 1rem !important;
    top: auto !important;
    bottom: 1rem !important;
    transform: translateY(20px) !important;
    border-radius: 12px !important;
    padding: 1.2rem !important;
  }

  body.ar .city3d-panel {
    right: 1rem !important;
    left: 1rem !important;
    transform: translateY(20px) !important;
  }

  .city3d-panel.open {
    transform: translateY(0) !important;
  }

  .city3d-hint {
    gap: .5rem !important;
  }

  .c3h-item {
    font-size: .6rem !important;
    padding: .2rem .5rem !important;
  }
}

/* ===== LAW DOWNLOAD BUTTON — MOBILE ===== */
@media (max-width: 480px) {
  .law-download-btn {
    padding: 12px 20px !important;
    border-radius: 40px !important;
    flex-wrap: nowrap !important;
  }

  .law-download-btn .text {
    font-size: .88rem !important;
  }

  .law-download-btn .icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.1rem !important;
  }
}

/* ===== PARTNERS CAROUSEL — MOBILE ===== */
@media (max-width: 480px) {
  .partners-track {
    gap: 2.5rem !important;
    padding: 0 1rem !important;
  }

  .partner-logo img {
    max-height: 35px !important;
  }
}

/* ===== COOKIE BANNER FIX ===== */
@media (max-width: 680px) {
  [style*="position: fixed"][style*="bottom"] {
    font-size: .75rem !important;
  }
}

/* ===== SCROLL PROGRESS BAR — THINNER ON MOBILE ===== */
@media (max-width: 680px) {
  #scroll-progress {
    height: 3px !important;
  }
}

/* ===== PREVENT HORIZONTAL SCROLL ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ===== TOUCH-FRIENDLY: BIGGER TAP TARGETS ===== */
@media (max-width: 680px) {
  .nav-links a,
  .ptab,
  .gtab,
  .stab,
  .soc,
  .ft-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===== PRELOADER — MOBILE ===== */
@media (max-width: 480px) {
  .preload-logo {
    height: 80px !important;
  }
}

/* ===== INVESTMENT CARDS — MOBILE ===== */
@media (max-width: 480px) {
  .invest-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}