/* ========================================
   PNGSA MOBILE STYLES
======================================== */

@media (max-width: 768px) {

  /* ========================================
     PAGE RESET
  ======================================== */

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

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }


  /* ========================================
     GENERAL CONTAINER
  ======================================== */

  .container {
    width: 92%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }


  /* ========================================
     HIDE LOGO + MENU BUTTON
  ======================================== */

  .logo {
    display: none;
  }

  .menu-button {
    display: none;
  }


  /* ========================================
     MOBILE NAVIGATION
     SWIPE LEFT / RIGHT
  ======================================== */

  .site-header {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .nav-container {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;
  }

  .nav-links {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: flex-start !important;
    align-items: center;

    width: 100%;
    max-width: 100%;

    overflow-x: auto !important;
    overflow-y: hidden;

    white-space: nowrap;

    gap: 8px;

    padding: 10px 12px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    scroll-snap-type: x proximity;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: max-content;

    padding: 12px 10px;

    font-size: 0.85rem;

    white-space: nowrap;

    scroll-snap-align: start;
  }


  /* ========================================
     ACTIVE NAV LINK
  ======================================== */

  .nav-links a.active {
    color: #111;
    background: #ffd100;
  }

  .nav-links a.active::after {
    display: none;
  }


  /* ========================================
     HERO
  ======================================== */

  .hero {
    min-height: 85vh;

    padding-top: 90px;
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 5rem);

    line-height: 0.95;
  }

  .hero-text {
    font-size: 1rem;
  }

  .hero-buttons {
    display: flex;

    flex-direction: column;

    gap: 12px;
  }

  .hero-buttons .btn {
    width: 100%;

    text-align: center;
  }


  /* ========================================
     GENERAL SECTION SPACING
  ======================================== */

  .section {
    padding: 60px 0;
  }


  /* ========================================
     SECTION HEADING
  ======================================== */

  .section-heading {
    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

    align-items: start;

    margin-bottom: 35px;
  }

  .section-heading h2,
  .two-column h2,
  .contact-content h2 {
    font-size: clamp(2rem, 10vw, 3rem);

    line-height: 1.05;
  }


  /* ========================================
     HOME PAGE CARDS
     SWIPE LEFT / RIGHT
  ======================================== */

  .feature-grid {
    display: flex;

    flex-direction: row;
    flex-wrap: nowrap;

    width: 100%;

    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 10px;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .feature-grid::-webkit-scrollbar {
    display: none;
  }

  .feature-card {
    flex: 0 0 85%;

    width: 85%;
    min-width: 85%;

    padding: 25px;

    scroll-snap-align: start;
  }


  /* ========================================
     RESOURCE / GUIDE / GALLERY GRIDS
  ======================================== */

  .resource-grid,
  .guide-grid,
  .gallery-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;
  }


  /* ========================================
     PNG NIGHT / TWO COLUMN SECTIONS
  ======================================== */

  .two-column,
  .contact-content {
    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;
  }

  .png-night-card {
    width: 100%;

    padding: 25px;
  }


  /* ========================================
     EVENT CARDS
  ======================================== */

  .event-card {
    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;
  }

  .event-date {
    width: 90px;
  }


  /* ========================================
     STEPS
  ======================================== */

  .step {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
  }


  /* ========================================
     LEADERSHIP CARDS
  ======================================== */

  .executive-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 25px;
  }

  .executive-card {
    display: grid;

    grid-template-columns: 1fr;
  }

  .executive-photo {
    width: 100%;

    height: 350px;

    min-height: auto;

    object-fit: cover;
  }


  /* ========================================
     FORMS
  ======================================== */

  .form-card {
    width: 100%;

    padding: 25px;
  }

  .form-card input,
  .form-card textarea,
  .form-card select {
    width: 100%;
  }


  /* ========================================
     MAP
  ======================================== */

  .map-placeholder {
    min-height: 320px;
  }


  /* ========================================
     FOOTER
  ======================================== */

  .footer-content {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 30px;
  }

  .social-icons {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;
  }

  .social-icons a {
    width: 46px;
    height: 46px;
  }

  .copyright {
    padding-left: 20px;
    padding-right: 20px;
  }
}