/* ======================================================
   MEDIA.CSS — MOBILE & TABLET ONLY
   Load AFTER ALL other CSS files
====================================================== */

@media (max-width: 768px) {

  /* ======================================================
     GLOBAL MOBILE RESET
  ====================================================== */
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }


  /* ======================================================
     HEADER
  ====================================================== */
  .header {
    position: relative;
    height: 100px;
    margin-top: 30px;
  }

  .header__logo img {
    height: 80px;
  }

  .header__menu-left,
  .header__menu-right {
    font-size: 7pt;
  }

  .header__menu-left { left: 16px; }
  .header__menu-right { right: 16px; }

  /* ======================================================
     MAIN
  ====================================================== */
  main {
    height: auto !important;
    min-height: 100vh;
    overflow: visible;
  }
  
  /* ======================================================
     HOME HERO — MOBILE FIX (THIS WAS BROKEN)
  ====================================================== */
  .home-hero {
    height: calc(100vh - 130px); /* header-aware */
    min-height: 520px;

    background-position: center top;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;

    overflow: hidden;
  }

  /* Reduce overly aggressive fade on mobile */
  .home-hero::before {
    height: 60vh;
  }

  .home-hero::after {
    background: rgba(255, 255, 255, 0.35);
  }

  /* ======================================================
     HOME TEXT — CENTERED & SCROLL-SAFE
  ====================================================== */
  .home-article {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 92%;
    margin: 0 auto;
    text-align: center;
  }

  /* ======================================================
     CAROUSEL — MODEL STAGE (THIS IS THE FIX)
  ====================================================== */
  .carousel {
    position: relative;
    width: 100%;

    /* 👇 Create a visual stage */
    min-height: calc(100vh - 160px);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 8vh;   /* 👈 visual top offset */
    padding-bottom: 6vh;

    overflow: hidden;
  }

  .carousel-track {
    width: 100%;
  }

  /* Hide all items */
  .carousel-item {
    display: none;
    width: 100%;
    transform: none;
    opacity: 1;
    filter: none;
  }

  /* Show only active */
  .carousel-item.active {
    display: flex;
    justify-content: center;
  }

  /* ======================================================
     THREESIXTY — MODEL ITSELF
  ====================================================== */
  .threesixty {
    width: 90vw;
    max-width: 90vw;
    aspect-ratio: 1 / 1;

    position: relative;
    margin: 0 auto;

    display: block;
    overflow: hidden;

    touch-action: pan-x;
    cursor: grab;
  }

  .threesixty:active {
    cursor: grabbing;
  }

  .threesixty-frame {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: contain;

    display: none;
    pointer-events: none;
  }

  /* ======================================================
     CONTROLS — SEPARATE ROW
  ====================================================== */
  .carousel-controls {
    position: relative;
    margin: 2.5rem auto 2rem;

    display: flex;
    justify-content: center;
    gap: 120px;
  }
}

/* ======================================================
   SMALL PHONES
====================================================== */
@media (max-width: 420px) {

  .carousel {
    padding-top: 10vh;
  }

  .threesixty {
    width: 94vw;
  }

  .carousel-controls {
    gap: 100px;
  }
}