/**
 * @file
 * Mobile + tablet rail layout — single source of truth.
 *
 * Below 1024px the rail un-fixes from the left side and becomes a stacked
 * block at the top of the viewport. Every desktop rail section (logo,
 * weather, menu, AI chat, contact, mini-promo) stays visible — mobile
 * users get the same brand surface as desktop, just stacked instead
 * of side-by-side.
 *
 * Owns the ENTIRE mobile-rail behavior intentionally. Other component
 * files (left-rail.css, pikes-peak-hero.css, pp-compass.css) deliberately
 * have NO mobile rail rules so the cascade stays predictable — fix the
 * mobile rail here and nowhere else.
 *
 * Registered in peak_ai_design.libraries.yml under the global library at
 * weight 90 — loads after the desktop-layout component files (which sit
 * at default weight 0) but before pp-compass.css (weight 100), so this
 * file's rules win the tiebreak against any desktop rule whose
 * specificity matches.
 */

@media (max-width: 1024px) {

  /* ---- Rail container — unfix and let it flow as a stacked top block ---- */
  .has-left-rail .left-rail {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    border-right: none !important;
    overflow: visible !important;
    background: var(--peak-blue-dark);
    background-image: url('../../images/left-rail-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  /* ---- All rail children visible — undoes any desktop display:none ----- */
  .has-left-rail .left-rail > *,
  .has-left-rail .left-rail .pp-weather-clock,
  .has-left-rail .left-rail .pp-rail-card,
  .has-left-rail .left-rail .left-rail__logo,
  .has-left-rail .left-rail .pp-mini-promo,
  .has-left-rail .left-rail .pp-contact-info,
  .has-left-rail .left-rail .pp-ai-chat-card,
  .has-left-rail .left-rail .pp-rail-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ---- Logo centered + slightly larger on mobile so the mark reads ----- */
  .has-left-rail .left-rail__logo {
    text-align: center !important;
    padding: 12px 16px !important;
  }

  .has-left-rail .left-rail__logo img {
    width: 160px !important;
    max-width: 160px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* ---- Consistent edge margins on every card section ------------------- */
  .has-left-rail .left-rail > .pp-rail-card,
  .has-left-rail .left-rail > .pp-weather-clock,
  .has-left-rail .left-rail > .pp-rail-menu,
  .has-left-rail .left-rail > .pp-mini-promo,
  .has-left-rail .left-rail > .pp-ai-chat-card,
  .has-left-rail .left-rail > .pp-contact-info {
    align-self: stretch !important;
    margin: 8px 16px 0 16px !important;
    box-sizing: border-box !important;
    width: auto !important;
  }

  /* ---- Main column no longer needs to shift right for a fixed rail ----- */
  .has-left-rail .main-area {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ---- AI chat card needs a stable height so its inner chat fits ------- */
  .has-left-rail .left-rail .pp-ai-chat-target {
    height: 260px !important;
  }
}

/* ---- Phone-specific tweaks (<= 640px) -------------------------------------
 * On phones the section margins tighten and the menu eyebrow loosens up
 * slightly for touch comfort. Mostly inherits the tablet rules above. */
@media (max-width: 640px) {
  .has-left-rail .left-rail > .pp-rail-card,
  .has-left-rail .left-rail > .pp-weather-clock,
  .has-left-rail .left-rail > .pp-rail-menu,
  .has-left-rail .left-rail > .pp-mini-promo,
  .has-left-rail .left-rail > .pp-ai-chat-card,
  .has-left-rail .left-rail > .pp-contact-info {
    margin: 8px 12px 0 12px !important;
  }

  .has-left-rail .pp-rail-menu__summary {
    padding: 14px 12px !important;
  }
}

/* ---- Peak AI Support promo card — mobile sizing fix -----------------------
 * Desktop: .pp-mini-promo has flex: 1 1 0 + min-height: 80px so it absorbs
 * leftover vertical space in the column-flex rail. On mobile that flex
 * behavior makes no sense (rail has auto height), and the 80px min was
 * cropping the title + subtitle. Override to size naturally on mobile. */
@media (max-width: 1024px) {
  .has-left-rail .pp-mini-promo {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    align-items: center !important;
    padding: 14px 12px !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  /* Body text gets more room to breathe, line-height that fits 3 stacked
   * lines (tag + title + sub) without overflow. */
  .has-left-rail .pp-mini-promo__body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: var(--peak-leading-snug) !important;
  }

  /* Each text row gets a hint of margin so the card breathes vertically. */
  .has-left-rail .pp-mini-promo__title {
    margin-top: 2px !important;
  }

  .has-left-rail .pp-mini-promo__sub {
    margin-top: 3px !important;
  }
}