/* =========================================================
   MILO RESPONSIVE SYSTEM
   ---------------------------------------------------------
   Shared responsive rules for the Milo-Mobile test site.
   This file is intentionally loaded AFTER each page's
   existing styles so it can provide one consistent mobile
   foundation without changing the approved desktop design.
   ========================================================= */

/* Prevent accidental sideways scrolling on narrow screens. */
html, body { max-width:100%; overflow-x:hidden; }

/* Media and controls should never exceed their containers. */
img, video, iframe { max-width:100%; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------
   HEADER / NAVIGATION
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .site-header-inner {
    width: calc(100% - 28px) !important;
    min-height: 72px !important;
    padding: 10px 0 !important;
    gap: 12px !important;
  }

  .site-brand {
    min-width: 0 !important;
    max-width: calc(100% - 66px) !important;
  }

  .site-brand img {
    width: 300px !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .site-header nav[aria-label="Main navigation"] {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #dfe5ee !important;
    border-radius: 13px !important;
    background: #fff !important;
    cursor: pointer !important;
  }

  .hamburger-lines {
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    width:22px !important;
  }

  .hamburger-lines i {
    display:block !important;
    width:22px !important;
    height:2.5px !important;
    border-radius:3px !important;
    background:#0b1d3b !important;
  }

  .mobile-menu-panel {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    display:none !important;
    max-height:calc(100vh - 72px) !important;
    overflow-y:auto !important;
    background:rgba(255,255,255,.98) !important;
    backdrop-filter:blur(16px);
    border-top:1px solid #e2e7ee !important;
    border-bottom:1px solid #e2e7ee !important;
    box-shadow:0 12px 28px rgba(11,29,59,.12) !important;
    padding:10px 14px 16px !important;
    z-index:1000 !important;
  }

  .mobile-menu-panel.is-open {
    display:block !important;
  }

  .mobile-menu-panel a {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:52px !important;
    padding:14px 12px !important;
    border-bottom:1px solid #edf0f4 !important;
    color:#0b1d3b !important;
    font-size:1.05rem !important;
    font-weight:750 !important;
  }

  .mobile-menu-panel a:not(.mobile-book)::after {
    content:"›";
    color:#1556cc;
    font-size:1.45rem;
    line-height:1;
  }

  .mobile-menu-panel .mobile-book {
    margin-top:9px !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:12px !important;
    background:#1556cc !important;
    color:#fff !important;
  }

  .mobile-menu-panel .mobile-book::after {
    content:"→";
    margin-left:8px;
    color:#fff;
    font-size:1.2rem;
  }

  body.milo-menu-open { overflow:hidden; }
}

@media (min-width: 761px) {
  .mobile-menu-toggle,
  .mobile-menu-panel { display:none !important; }
}

/* ---------------------------------------------------------
   GLOBAL CONTAINERS
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .container {
    width:calc(100% - 32px) !important;
    max-width:none !important;
  }
}

@media (max-width: 760px) {
  .container {
    width:calc(100% - 28px) !important;
  }

  main {
    width:100%;
  }

  .section {
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .intro,
  .lead {
    max-width:none !important;
  }
}

/* Manage Photos: the mobile-only hero image is hidden on laptop/desktop.
   The desktop layout already uses the right-hand .photo-hero-image. */
.mobile-hero-image {
  display:none !important;
}

/* ---------------------------------------------------------
   COMMON TWO-COLUMN / GRID PATTERNS
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .mobile-hero-image {
    display:block !important;
    width:100%;
    height:auto;
    border-radius:26px;
    object-fit:cover;
    margin:0 0 20px;
  }

  /* Manage Photos mobile: use the single in-flow image below the intro copy.
     The desktop right-column image is hidden so it cannot appear twice. */
  .photo-hero-grid > .photo-hero-image {
    display:none !important;
  }

  .hero-grid,
  .photo-hero-grid,
  .photo-section-grid,
  .video-hero-grid,
  .meet-jay-grid {
    grid-template-columns:1fr !important;
  }

  .topic-grid,
  .milo-topic-grid,
  .milo-benefit-grid,
  .value-grid,
  .cards,
  .photo-mini-grid,
  .photo-lower-grid,
  .photo-approach-grid,
  .video-grid,
  .qrg-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 560px) {
  .topic-grid,
  .milo-topic-grid,
  .milo-benefit-grid,
  .value-grid,
  .cards,
  .photo-mini-grid,
  .photo-lower-grid,
  .photo-approach-grid,
  .video-grid,
  .qrg-grid {
    grid-template-columns:1fr !important;
  }
}

/* ---------------------------------------------------------
   COMMON HEROES
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero,
  .page-hero,
  .photo-hero,
  .video-hero {
    overflow:hidden;
  }

  .hero-grid,
  .photo-hero-grid,
  .video-hero-grid {
    gap:28px !important;
  }

  .hero-copy,
  .photo-hero-copy {
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .hero-image,
  .photo-hero-image,
  .video-hero-image {
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:cover !important;
  }
}

@media (max-width: 760px) {
  .hero,
  .page-hero,
  .photo-hero,
  .video-hero {
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size:clamp(2.45rem,11vw,4rem) !important;
    line-height:1 !important;
  }

  .hero-lead,
  .lead,
  .intro,
  .page-hero p {
    font-size:17px !important;
  }

  .hero-buttons {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .hero-buttons .btn {
    width:100% !important;
    justify-content:center !important;
  }
}

/* ---------------------------------------------------------
   ARTICLES PAGE / ARTICLE TEMPLATE
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .articles-hero-inner {
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .articles-hero-copy {
    padding:42px 0 28px !important;
  }

  .articles-hero-image {
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin-bottom:28px !important;
  }
}

@media (max-width: 760px) {
  .articles-hero h1 {
    font-size:clamp(2.7rem,12vw,4.2rem) !important;
    line-height:.98 !important;
  }

  .articles-hero-lead {
    font-size:17px !important;
  }

  /* Article rows become readable stacked cards on phones. */
  .article-list-heading {
    display:none !important;
  }

  .article-row {
    display:block !important;
    padding:20px 0 !important;
    border-bottom:1px solid var(--border,#e2e7ee) !important;
  }

  .article-row > * {
    display:block !important;
    margin:0 0 10px !important;
  }

  .article-row .article-title {
    font-size:1.2rem !important;
    line-height:1.25 !important;
  }

  .article-row .article-description {
    font-size:16px !important;
  }

  .article-row .article-link {
    margin-top:12px !important;
  }
}

/* ---------------------------------------------------------
   CARDS / BUTTONS / CONTENT
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .card,
  .topic-card,
  .milo-topic-card,
  .milo-benefit,
  .qrg-card,
  .video-card,
  .photo-mini-card,
  .photo-lower-card,
  .testimonial-card {
    width:100% !important;
  }

  .btn {
    min-height:46px;
  }

  table {
    display:block;
    width:100% !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  pre, code {
    max-width:100%;
    overflow-x:auto;
  }
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .milo-site-footer-inner,
  .footer {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
  }

  .milo-site-footer-book,
  .footer-book {
    width:100% !important;
    justify-content:center !important;
  }
}

/* ---------------------------------------------------------
   VERY SMALL PHONES
   --------------------------------------------------------- */
@media (max-width: 380px) {
  .site-header-inner {
    width:calc(100% - 22px) !important;
  }

  .mobile-menu-toggle {
    flex-basis:50px !important;
    width:50px !important;
  }

  .site-brand img {
    width:260px !important;
  }
}