/* ============================================================
   RESPONSIVE-FIXES.CSS  —  Automation Expo 2027
   Load AFTER index.css:
   <link rel="stylesheet" href="css/responsive-fixes.css">

   Fixes layout gaps on every device size.
   ⚠ Does NOT change any hover effect — all hovers stay
   exactly as in index.css (matched to the reference site).
   ============================================================ */

/* ------------------------------------------------------------
   0. GLOBAL SAFETY
------------------------------------------------------------ */

/* --bg-white was used in .section-padding but never defined */
:root {
  --bg-white: #ffffff;
}

/* Media never overflows its container on any screen */
img,
video {
  max-width: 100%;
}

/* ------------------------------------------------------------
   1. LARGE LAPTOP  (1201px – 1440px)
   Zone cards get slightly tighter so the blue box and
   Read More button never collide when titles wrap
------------------------------------------------------------ */
@media (max-width: 1440px) and (min-width: 1001px) {
  .special-zones-grid {
    gap: 60px 24px;
  }

  .zone-title-box {
    width: 84%;
  }
}

/* ------------------------------------------------------------
   2. SMALL LAPTOP  (1001px – 1200px)
------------------------------------------------------------ */
@media (max-width: 1200px) and (min-width: 1001px) {
  .reasons-exhibit-container {
    width: min(100% - 60px, 1100px);
  }

  .reasons-exhibit-text h3 {
    font-size: 18px;
  }

  .latest-post-card h3 {
    font-size: 20px;
  }

  .latest-post-card p {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------
   3. TABLET  (651px – 1000px)
   Special zones: 2 columns — resize card internals so the
   expanding blue box and button keep correct positions
------------------------------------------------------------ */
@media (max-width: 1000px) and (min-width: 651px) {
  .zone-card {
    max-width: 420px;
    height: 385px;
  }

  .zone-image {
    height: 268px;
  }

  .zone-title-box {
    top: 224px;
    width: 84%;
  }

  .zone-card:hover .zone-title-box {
    top: 212px;
    height: 168px;
  }

  .zone-read-btn {
    top: 345px;
  }

  /* What to Expect: 2 columns — let cards grow if text wraps */
  .expect-card {
    height: auto;
    min-height: 340px;
  }

  .expect-content {
    height: auto;
    min-height: 150px;
    padding-bottom: 22px;
  }

  /* Testimonial arrows: keep fully inside on tablets */
  .testimonial-prev { left: 2px; }
  .testimonial-next { right: 2px; }
}

/* ------------------------------------------------------------
   4. ALL PHONES  (up to 650px)
------------------------------------------------------------ */
@media (max-width: 650px) {
  /* What to Expect: never clip text on narrow screens */
  .expect-card {
    height: auto;
    min-height: 330px;
  }

  .expect-content {
    height: auto;
    min-height: 140px;
    padding-bottom: 22px;
  }

  /* Contact checkbox text lighter weight is easier to read */
  .contact-checkbox {
    gap: 12px;
  }

  /* Gallery heading matches other mobile section titles */
  .home-heading-center {
    font-size: 32px;
  }

  .section-padding {
    padding: 38px 0 36px;
  }
}

/* ------------------------------------------------------------
   5. SMALL PHONES  (up to 420px)
   e.g. iPhone SE / 12 mini / older Androids
------------------------------------------------------------ */
@media (max-width: 420px) {
  /* Hero arrows smaller so they don't cover banner text */
  .hero-arrow {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  /* Welcome */
  .intro-content h1 {
    font-size: 27px;
  }

  .stat-card strong {
    font-size: 30px;
  }

  .stat-card span {
    font-size: 13px;
  }

  /* Section titles scale down together */
  .exhibitors-title,
  .reasons-exhibit-title,
  .special-zones-heading,
  .latest-post-title,
  .testimonials-title,
  .home-heading-center {
    font-size: 28px;
  }

  .what-expect-title {
    font-size: 28px;
  }

  .theme-content h2 {
    font-size: 26px;
  }

  /* Exhibitor cards: keep 2 columns but tighter */
  .exhibitors-grid {
    gap: 18px 12px;
  }

  .exhibitor-card h3 {
    font-size: 13px;
  }

  /* Special zones: card fits narrow screens */
  .zone-card {
    max-width: 100%;
    height: 355px;
  }

  .zone-image {
    height: 240px;
  }

  .zone-title-box {
    top: 198px;
    width: 88%;
  }

  .zone-card:hover .zone-title-box {
    top: 198px;
    height: 150px;
  }

  .zone-read-btn {
    top: 318px;
    width: 165px;
    height: 47px;
    font-size: 14px;
  }

  /* Latest post */
  .latest-post-image {
    height: 210px;
  }

  .latest-post-card h3 {
    font-size: 18px;
  }

  /* Contact */
  .contact-title {
    font-size: 28px;
  }

  .contact-field input,
  .contact-row-full input,
  .contact-row-full textarea {
    padding: 14px;
    font-size: 15px;
    border-radius: 12px;
  }

  .contact-checkbox input {
    width: 22px;
    height: 22px;
  }

  .contact-checkbox span {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------
   6. VERY SMALL PHONES  (up to 360px)
------------------------------------------------------------ */
@media (max-width: 360px) {
  .exhibitors-grid {
    grid-template-columns: 1fr;
  }

  .stats-container {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .side-register-btn {
    min-height: 165px;
  }

  .side-register-btn span {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------
   7. PHONE LANDSCAPE
   Hero banner: stop the 130vw rule from making the slider
   taller than the screen when the phone is rotated
------------------------------------------------------------ */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-slider {
    height: 100vh;
    min-height: 300px;
    max-height: 500px;
  }
}

/* ------------------------------------------------------------
   8. TOUCH DEVICES  (phones / tablets — no mouse)
   Hover effects need a mouse. On touch screens:
   • zone description is always visible so users can read it
   • hover-only content is never lost
   The hover effects themselves stay unchanged for mouse users.
------------------------------------------------------------ */
@media (hover: none) {
  /* Special zones: show the description without needing hover */
  .zone-title-box {
    height: auto;
    min-height: 70px;
    padding-bottom: 18px;
  }

  .zone-title-box p,
  .zone-title-box .zone-description {
    max-height: none;
    margin: 9px 0 0;
    opacity: 1;
  }

  /* Card height grows to fit the open box */
  .zone-card {
    height: auto;
    padding-bottom: 12px;
  }

  .zone-image {
    position: relative;
  }

  .zone-title-box {
    position: relative;
    top: auto;
    left: auto;
    margin: -45px auto 0;
    transform: none;
    box-shadow: 0 15px 28px rgba(3, 28, 54, 0.18);
  }

  .zone-read-btn {
    position: relative;
    top: auto;
    left: auto;
    margin: 22px auto 0;
    transform: none;
    display: flex;
  }

  .zone-read-btn:hover {
    transform: none;
  }
}