/* ============================================================
   DETAIL Miami - phone + small-tablet layer.

   Loaded LAST from every .dc.html <helmet>, after colors_and_type.css
   and the marketing-site kit. The .dc.html pages are DesignCraft
   artboards: almost every box carries an INLINE style, so a plain
   rule loses the cascade and the override has to be !important.

   Never select on inline style text ([style*="display:grid"] and the
   like). The DesignCraft runtime rewrites inline styles when it
   renders (it adds a space after each colon), so those selectors
   match the raw file and silently stop matching the moment the page
   is actually running. Every hook below is a real class in the
   markup: dm-2col, dm-grid3, dm-stats, dm-foot-top, dm-nav-*.
   ============================================================ */

/* ---------- 1. tablet and down ---------- */
@media (max-width: 1024px) {

  /* The heroes and a few section heads set `padding:120px 0` inline.
     That shorthand ZEROES the horizontal padding .ms-container gives
     every other block, so the headline and body copy ran flush into
     both screen edges. Put the gutter back. */
  .ms-container {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Nothing on a phone is wide enough for these. Each one was still
     laying out 2, 3 or 5 columns inside 350px, which is what pushed
     the right-hand column off screen and squeezed body copy down to
     one word per line. */
  .dm-2col,
  .dm-grid3,
  .dm-3col { grid-template-columns: 1fr !important; }

  /* Wrap-friendly gaps: the desktop values (up to 100px) leave huge
     dead bands once the columns are stacked. */
  .dm-2col,
  .dm-grid3,
  .dm-3col { gap: 20px !important; }

  /* Stats band: 5 across became 5 slivers with the last one clipped.
     Two up matches what the kit already does for .ms-stats. */
  .dm-stats { grid-template-columns: 1fr 1fr !important; }
  .dm-stats > * { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- 2. phone ---------- */
@media (max-width: 640px) {

  /* Long words in a narrow column (email addresses, "Ballhandling")
     were overflowing their card rather than wrapping. */
  body { overflow-wrap: break-word; }

  /* The brand lockup's micro-type is 6.5px/7px, set for a desktop
     header. On a phone that is below the legibility floor. */
  .dm-lockup-kicker { font-size: 8.5px !important; letter-spacing: 0.16em !important; }
  .dm-lockup-tag { font-size: 8px !important; letter-spacing: 0.2em !important; }

  /* Stats: single column reads better than two ~150px cells whose
     labels ("Locations Worldwide") wrap to three lines. */
  .dm-stats { grid-template-columns: 1fr !important; }
  .dm-stats > * {
    border-left: none !important;
    border-top: 1px solid rgba(226, 221, 159, 0.22) !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
  .dm-stats > *:first-child { border-top: none !important; }

  /* Footer: a hard-coded 5-column grid that had no breakpoint at all,
     so Company / Contact / Legal sat entirely off the right edge. */
  .dm-foot-top {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-bottom: 36px !important;
  }
  .dm-foot-top p { max-width: none !important; }

  /* Footer links were 17px tall. Give them a real thumb target. */
  .dm-foot-top li { margin-bottom: 0 !important; }
  .dm-foot-top li a,
  .dm-foot-top li > span { display: inline-block; padding: 9px 0; }

  /* Same for every "call us" / "email us" link on the site (contact page,
     FAQ), which were 20px tall lines of text with no hit area. The two
     places that already size themselves are re-exempted below. */
  a[href^="tel:"],
  a[href^="mailto:"] { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
  .dm-nav-panel a[href^="tel:"] { padding-top: 16px; padding-bottom: 16px; }

  /* Section rhythm: `padding:clamp(80px,12vh,160px) 0` is ~101px top
     AND bottom on a phone, so two stacked sections put 200px of
     nothing between two sentences. */
  .ms-sec { padding-top: 64px !important; padding-bottom: 64px !important; }
  .ms-cta { padding-top: 78px !important; padding-bottom: 78px !important; }

  /* Checkboxes in the contact and rental forms rendered at 16px. */
  input[type="checkbox"] { width: 20px !important; height: 20px !important; flex-shrink: 0; }

  /* 32px of side padding on a 390px screen is what pushed "Book a Free
     Session" onto two lines inside the About page's inset quote card. */
  .ms-btn { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ---------- 3. mobile navigation ---------- */
/* The header shipped a single flex row of eight links plus the
   "Book a Trial" button. Below ~1080px it simply overflowed: on a
   390px phone everything from "Camps & Clinics" rightward was off
   screen, INCLUDING the primary call to action. There was no
   hamburger and no fallback. */

.dm-nav-toggle { display: none; }

@media (max-width: 1080px) {
  .dm-navlinks { display: none !important; }
  .dm-nav-cta-desktop { display: none !important; }

  .dm-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 10px;
    margin-right: -10px;
    background: none;
    border: none;
    flex-shrink: 0;
    cursor: pointer;
  }
  .dm-nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #e2dd9f;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .18s;
  }
  .dm-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .dm-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .dm-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (min-width: 1081px) {
  .dm-nav-panel { display: none !important; }
}

/* Anchored to the header, NOT position:fixed. The header sets
   backdrop-filter, and a filter or backdrop-filter makes an element the
   containing block for its fixed-position descendants - a fixed panel
   would resolve top/bottom against the 80px header and collapse to
   nothing. position:absolute inside the sticky header is what the
   existing Programs dropdown already does, and it tracks the header
   correctly as the page scrolls. */
.dm-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: calc(100vh - 80px);
  background: #0a0a0a;
  border-top: 1px solid rgba(226, 221, 159, 0.22);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 22px 40px;
  font-family: var(--bam-body);
}
.dm-nav-panel a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.dm-nav-panel a:last-of-type { border-bottom: none; }
.dm-nav-panel__label {
  padding: 24px 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bam-gold);
}
.dm-nav-panel .dm-nav-panel__cta {
  display: block;
  margin: 14px 0 6px;
  padding: 17px 20px;
  border: none;
  background: var(--bam-gold);
  color: #0a0a0a;
  font-family: var(--bam-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-align: center;
}
.dm-nav-panel .dm-nav-panel__call {
  display: block;
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid rgba(226, 221, 159, 0.45);
  color: var(--bam-gold);
  font-family: var(--bam-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-align: center;
}

/* Motion: entrance animations start at opacity 0 with fill `both`, so
   `animation:none` would leave that content permanently INVISIBLE.
   Collapse the duration instead - the animation finishes instantly and
   lands visible. This also catches tap-fired transitions, which are
   what make a card jump under a finger on touch. */
@media (max-width: 1024px) {
  .dm-card:hover,
  .dm-glass:hover,
  .ms-btn:hover,
  .ms-eco:hover > div:first-child { transform: none !important; }
  .dm-kb { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}