/* =======================================================
   ATL's Hottest FORCE MOBILE UPDATE
   This file intentionally loads AFTER site.css
======================================================= */

@media screen and (max-width: 820px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  main,
  .site-main,
  .container,
  .page-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* CATEGORY MENU PAGE */
  .ballot-category-menu-card,
  .ballot-category-section,
  .ballot-review-card,
  .confirmation-card {
    display: block !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .category-selection-grid,
  .guided-category-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .category-select-btn,
  .guided-category-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 116px !important;
    padding: 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 215, 106, 0.48) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    background:
      radial-gradient(circle at 20% 0%, rgba(255, 215, 106, 0.2), transparent 46%),
      linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025)),
      rgba(0,0,0,0.72) !important;
    box-shadow:
      0 0 22px rgba(255, 215, 106, 0.11),
      inset 0 0 18px rgba(255,255,255,0.04) !important;
    box-sizing: border-box !important;
  }

  .category-select-btn span,
  .guided-category-btn span {
    display: block !important;
    color: #ffffff !important;
    font-size: 1.08rem !important;
    font-weight: 1000 !important;
    line-height: 1.14 !important;
  }

  .category-select-btn em,
  .guided-category-btn em,
  .selected-category-note {
    display: block !important;
    margin-top: 7px !important;
    color: #ffd76a !important;
    font-size: 0.9rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
  }

  .guided-category-btn b {
    display: inline-flex !important;
    width: fit-content !important;
    margin-top: 10px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    color: #111111 !important;
    background: linear-gradient(135deg, #ffd76a, #d69628) !important;
    font-size: 0.75rem !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
  }

  /* CATEGORY-ONLY NOMINEE PAGE */
  .ballot-six-grid,
  .nominees-grid,
  .ballot-category-only-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ballot-nominee-card,
  .nominee-card,
  .placeholder-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 215, 106, 0.42) !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.025)),
      rgba(0,0,0,0.72) !important;
    box-shadow:
      0 20px 42px rgba(0,0,0,0.42),
      inset 0 0 18px rgba(255,255,255,0.03) !important;
    box-sizing: border-box !important;
  }

  .nominee-card-link {
    display: flex !important;
    flex-direction: column !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  .ballot-nominee-card .nominee-photo-frame,
  .nominee-card .nominee-photo-frame,
  .placeholder-card .nominee-photo-frame,
  .ballot-category-only-grid .ballot-nominee-card .nominee-photo-frame {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 215, 106, 0.32) !important;
    background:
      radial-gradient(circle at 50% 30%, rgba(255, 215, 106, 0.18), transparent 45%),
      #070707 !important;
    overflow: hidden !important;
  }

  .ballot-nominee-card .nominee-photo-frame img,
  .nominee-card .nominee-photo-frame img,
  .ballot-category-only-grid .ballot-nominee-card .nominee-photo-frame img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .nominee-card-body {
    display: block !important;
    padding: 18px !important;
    text-align: center !important;
  }

  .nominee-card-body h3 {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: 1.22rem !important;
    line-height: 1.12 !important;
    font-weight: 1000 !important;
  }

  .nominee-card-body p {
    margin: 0 !important;
    color: #ffd76a !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
  }

  .select-nominee-form {
    display: grid !important;
    gap: 9px !important;
    padding: 0 12px 14px !important;
  }

  .vote-card-btn,
  .select-nominee-form .btn {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .selected-nominee-card {
    border-color: rgba(255, 215, 106, 0.95) !important;
    box-shadow:
      0 0 26px rgba(255, 215, 106, 0.3),
      0 0 48px rgba(215, 25, 53, 0.18) !important;
  }

  .selected-vote-note {
    display: inline-flex !important;
    margin-top: 10px !important;
    color: #ffd76a !important;
    font-weight: 1000 !important;
  }

  /* REVIEW PAGE */
  .review-vote-list {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .review-vote-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .review-vote-row .btn {
    width: 100% !important;
  }

  .final-ballot-form input,
  .association-profile-form input,
  .association-profile-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .ballot-status-row,
  .ballot-navigation-strip,
  .ballot-menu-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .ballot-status-row .btn,
  .ballot-navigation-strip .btn,
  .ballot-menu-footer .btn {
    width: 100% !important;
  }
}

/* Mobile hero banner correction: keep full top of image visible */
@media (max-width: 720px) {
  .atl-hero-banner-wrap,
  .landing-shell > .atl-hero-banner-wrap:first-child,
  .atl-hero-banner-wrap:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  .atl-hero-banner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

/* =========================================================
   FINAL MOBILE HERO FIX
   Shows the full top of the ATL hero image on phones.
   ========================================================= */
@media (max-width: 720px) {
  body .atl-hero-banner-wrap,
  body .landing-shell > .atl-hero-banner-wrap:first-child,
  body .atl-hero-banner-wrap:first-child {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
  }

  body .atl-hero-banner {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
  }

  body .landing-shell {
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }
}

/* =========================================================
   TRUE MOBILE HEADER CLEARANCE FIX
   The hero image was sliding under the mobile navigation/header.
   This pushes the full image below the nav so the top is visible.
   ========================================================= */
@media (max-width: 720px) {
  body .atl-hero-banner-wrap,
  body .landing-shell > .atl-hero-banner-wrap:first-child,
  body .atl-hero-banner-wrap:first-child {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding-top: 0 !important;
    top: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .atl-hero-banner {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
    top: auto !important;
  }
}

/* Mobile hero banner correction: keep full top of image visible */
@media (max-width: 720px) {
  .atl-hero-banner-wrap,
  .landing-shell > .atl-hero-banner-wrap:first-child,
  .atl-hero-banner-wrap:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  .atl-hero-banner {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

/* =========================================================
   FINAL MOBILE HERO FLUSH FIX
   Removes the visible gap between header gold line and hero image.
   ========================================================= */
@media (max-width: 720px) {
  body,
  main,
  .landing-shell,
  .page-shell,
  .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body header,
  body .site-header,
  body .topbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body header + main,
  body .site-header + main,
  body .topbar + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body .atl-hero-banner-wrap,
  body .landing-shell > .atl-hero-banner-wrap:first-child,
  body main .atl-hero-banner-wrap:first-child {
    margin-top: -56px !important;
    padding-top: 0 !important;
    margin-bottom: 18px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body .atl-hero-banner {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

/* =========================================================
   CLEAN MOBILE HERO POSITION
   Keeps full hero visible just below the header gold line.
   ========================================================= */
@media (max-width: 720px) {
  body .atl-hero-banner-wrap,
  body .landing-shell > .atl-hero-banner-wrap:first-child,
  body main .atl-hero-banner-wrap:first-child {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding-top: 0 !important;
    transform: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body .atl-hero-banner {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
  }
}

/* =========================================================
   MOBILE BILLBOARD OVERRIDE
   Force uploaded billboard creative to display large on phones.
   ========================================================= */

@media (max-width: 820px) {
  .mm-billboard {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 24px !important;
    padding: 8px !important;
    min-height: 0 !important;
  }

  .mm-billboard-link {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .mm-billboard-art {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto 14px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 1px solid rgba(255, 215, 106, 0.65) !important;
    box-shadow:
      0 0 22px rgba(255, 215, 106, 0.32),
      0 14px 34px rgba(0,0,0,0.65) !important;
  }

  .mm-billboard-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .mm-billboard-copy {
    display: block !important;
    text-align: center !important;
    padding: 0 8px 10px !important;
  }

  .mm-billboard-copy h2 {
    font-size: clamp(1.45rem, 7vw, 2.6rem) !important;
    line-height: 1.02 !important;
    margin: 8px auto !important;
  }

  .mm-billboard-copy p {
    font-size: 0.94rem !important;
    line-height: 1.4 !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mm-billboard-powered {
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.62rem !important;
    margin: 10px auto !important;
  }

  .mm-billboard-cta {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
    margin: 10px auto 0 !important;
  }
}

/* =========================================================
   EMERGENCY MOBILE BILLBOARD IMAGE FIX
   Desktop works; mobile was showing text/button but hiding image.
   ========================================================= */

@media (max-width: 820px) {
  .mm-billboard .mm-billboard-art,
  .mm-billboard-link .mm-billboard-art,
  section.mm-billboard .mm-billboard-art {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 190px !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto 14px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #000 !important;
    order: -10 !important;
    z-index: 5 !important;
  }

  .mm-billboard .mm-billboard-art img,
  .mm-billboard-link .mm-billboard-art img,
  section.mm-billboard .mm-billboard-art img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 190px !important;
    object-fit: cover !important;
    object-position: center center !important;
    z-index: 6 !important;
  }

  .mm-billboard .mm-billboard-link {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .mm-billboard .mm-billboard-copy {
    order: 2 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}