/* =============================================================
   308D — MOBILE-FIRST COMPOSITION REPAIR
   Presentation only. Preserve the 307D homepage composition on phones/tablets
   instead of collapsing the page into a long single-column stack.
   No application/backend behavior is changed here.
   ============================================================= */

/* Tablet: keep the desktop three-part composition, simply tighten it. */
@media (max-width: 850px){
  body.home-300d .d300-gateway{
    width:calc(100% - 20px)!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    padding:10px 0 9px!important;
  }
  body.home-300d .d300-gateway .gateway-search{
    min-height:66px!important;
    padding:8px 9px!important;
    gap:8px!important;
    border-top:0!important;
  }
  body.home-300d .d300-gateway .gateway-search + .gateway-search{
    border-left:1px solid rgba(189,145,105,.18)!important;
    border-top:0!important;
  }
  body.home-300d .d300-gateway .gateway-icon{font-size:1.45rem!important;min-width:23px!important}
  body.home-300d .d300-gateway strong{font-size:.92rem!important;line-height:1.05!important}
  body.home-300d .d300-gateway small{font-size:.62rem!important;line-height:1.22!important}

  body.home-300d .d300-home-grid{
    width:calc(100% - 20px)!important;
    grid-template-columns:minmax(130px,.62fr) minmax(220px,.96fr) minmax(270px,1.2fr)!important;
    grid-template-areas:none!important;
    gap:9px!important;
    align-items:start!important;
  }
  body.home-300d .d300-left-column,
  body.home-300d .d300-center-column,
  body.home-300d .d300-right-column{
    grid-area:auto!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  body.home-300d .d300-advertise-card,
  body.home-300d .d300-design-card{padding:12px 11px!important;min-height:0!important}
  body.home-300d .d300-advertise-card h2,
  body.home-300d .d300-design-card h2{font-size:1rem!important}
  body.home-300d .d300-advertise-card>p,
  body.home-300d .d300-design-card>p{font-size:.64rem!important}
  body.home-300d .d300-ad-slots a{padding:8px 0!important}
  body.home-300d .d300-design-card{min-height:230px!important}
  body.home-300d .d300-price{font-size:.9rem!important}
  body.home-300d .d300-kofi-button{width:86px!important;min-height:38px!important}

  body.home-300d .d300-intro-card{padding:0 16px 16px!important}
  body.home-300d .d300-dream-team-strip{height:88px!important;margin:0 -16px 12px!important}
  body.home-300d .d300-intro-card h1{font-size:1.22rem!important;margin:.3rem 0 9px!important}
  body.home-300d .d300-intro-card p{font-size:.7rem!important;line-height:1.32!important}
  body.home-300d .d300-rule{margin:10px 0!important}
  body.home-300d .d300-start-card{padding:11px 13px!important}
  body.home-300d .d300-start-card h2{font-size:1rem!important}
  body.home-300d .d300-start-card p{font-size:.65rem!important}
  body.home-300d .d300-join-card{padding:11px 13px!important;grid-template-columns:38px 1fr!important;gap:9px!important}
  body.home-300d .d300-plus{width:36px!important;height:36px!important;font-size:1.35rem!important}
  body.home-300d .d300-join-card strong{font-size:1.02rem!important}
  body.home-300d .d300-join-card small{font-size:.62rem!important}

  body.home-300d .d300-community-card{padding:13px 12px 10px!important}
  body.home-300d .d300-spotlight-heading{gap:8px!important;margin-bottom:8px!important}
  body.home-300d .d300-spotlight-heading .eyebrow{font-size:.82rem!important}
  body.home-300d .d300-spotlight-heading p{font-size:.62rem!important}
  body.home-300d .d300-megaphone{font-size:1rem!important}
  body.home-300d .d300-shadowbox{padding:24px 18px 13px!important}
  body.home-300d .d300-tap-note{font-size:.6rem!important}
  body.home-300d .d300-kofi-ribbon{padding:9px!important}
  body.home-300d .d300-small-business-card{padding:14px!important}
  body.home-300d .d300-small-business-card h2{font-size:1rem!important}
  body.home-300d .d300-small-business-card p{font-size:.65rem!important}

  body.home-300d .d300-random-spotlight,
  body.home-300d .d300-member-strip,
  body.home-300d .home-shell,
  body.home-300d .contact-section{width:calc(100% - 20px)!important}
}

/* Phone: same visual architecture as desktop, scaled to the viewport. */
@media (max-width: 650px){
  body.home-300d{overflow-x:hidden!important}

  /* Header stays useful without swallowing the phone. */
  body.home-300d .brand-bar{min-height:72px!important;padding:7px 9px!important}
  body.home-300d .brand{gap:7px!important;min-width:0!important}
  body.home-300d .brand img{width:52px!important;height:52px!important;flex:0 0 52px!important}
  body.home-300d .brand span{min-width:0!important}
  body.home-300d .brand strong{font-size:1.02rem!important;line-height:.98!important;max-width:205px!important}
  body.home-300d .brand small{font-size:.42rem!important;letter-spacing:.09em!important}
  body.home-300d .hamburger{width:42px!important;height:42px!important;flex:0 0 42px!important}
  body.home-300d{padding-top:115px!important;scroll-padding-top:123px!important}
  body.home-300d .site-nav{top:72px!important;min-height:43px!important;padding:0 8px!important;gap:8px!important;justify-content:flex-start!important}
  body.home-300d .site-nav a,
  body.home-300d .site-nav button{font-size:.61rem!important;padding:10px 3px!important}

  /* Keep all three primary destinations in one row. */
  body.home-300d .d300-gateway{
    width:calc(100% - 12px)!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    padding:6px 0 7px!important;
  }
  body.home-300d .d300-gateway .gateway-search{
    min-height:58px!important;
    padding:6px 5px!important;
    gap:4px!important;
    align-items:center!important;
    border-top:0!important;
  }
  body.home-300d .d300-gateway .gateway-search + .gateway-search{
    border-left:1px solid rgba(189,145,105,.20)!important;
    border-top:0!important;
  }
  body.home-300d .d300-gateway .gateway-icon{font-size:1.02rem!important;min-width:15px!important}
  body.home-300d .d300-gateway strong{font-size:.64rem!important;line-height:1.02!important}
  body.home-300d .d300-gateway small{font-size:.43rem!important;line-height:1.12!important;margin-top:2px!important}

  /* This is the key repair: do NOT stack center/right/left. */
  body.home-300d .d300-home-grid{
    width:calc(100% - 12px)!important;
    grid-template-columns:minmax(0,20fr) minmax(0,34fr) minmax(0,46fr)!important;
    grid-template-areas:none!important;
    gap:5px!important;
    margin-bottom:10px!important;
    align-items:start!important;
  }
  body.home-300d .d300-left-column,
  body.home-300d .d300-center-column,
  body.home-300d .d300-right-column{
    grid-area:auto!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    min-width:0!important;
  }
  body.home-300d .d300-panel{border-radius:8px!important;box-shadow:0 7px 15px rgba(0,0,0,.18)!important;min-width:0!important}
  body.home-300d .d300-panel .eyebrow{font-size:.42rem!important;letter-spacing:.07em!important}
  body.home-300d .d300-panel p,
  body.home-300d .d300-panel h1,
  body.home-300d .d300-panel h2,
  body.home-300d .d300-panel strong,
  body.home-300d .d300-panel small{overflow-wrap:anywhere!important}

  /* Left rail stays a rail rather than becoming two full-width blocks. */
  body.home-300d .d300-advertise-card,
  body.home-300d .d300-design-card{padding:7px 6px!important;min-height:0!important}
  body.home-300d .d300-advertise-card h2,
  body.home-300d .d300-design-card h2{font-size:.62rem!important;line-height:1.04!important;margin:.2rem 0!important}
  body.home-300d .d300-advertise-card>p,
  body.home-300d .d300-design-card>p{font-size:.43rem!important;line-height:1.2!important;margin:.15rem 0 5px!important}
  body.home-300d .d300-ad-slots{margin:5px 0!important}
  body.home-300d .d300-ad-slots a{padding:5px 0!important;gap:0!important}
  body.home-300d .d300-ad-slots strong{font-size:.39rem!important;line-height:1.1!important}
  body.home-300d .d300-ad-slots small{font-size:.35rem!important;line-height:1.1!important}
  body.home-300d .d300-text-link{font-size:.38rem!important;line-height:1.15!important}
  body.home-300d .d300-design-card{min-height:132px!important}
  body.home-300d .d300-price{font-size:.54rem!important;margin:auto 0 5px!important}
  body.home-300d .d300-kofi-button{width:52px!important;min-height:28px!important;padding:3px 4px!important;border-radius:5px!important}
  body.home-300d .d300-kofi-button img{max-width:45px!important;max-height:19px!important}

  /* Center story panel remains the visual heart of the page. */
  body.home-300d .d300-intro-card{padding:0 7px 8px!important}
  body.home-300d .d300-dream-team-strip{height:48px!important;margin:0 -7px 6px!important}
  body.home-300d .d300-intro-card h1{font-size:.70rem!important;line-height:1.08!important;margin:.2rem 0 5px!important}
  body.home-300d .d300-intro-card p{font-size:.43rem!important;line-height:1.23!important;margin:.18rem 0!important}
  body.home-300d .d300-rule{width:78%!important;margin:5px 0!important}
  body.home-300d .d300-start-card{padding:6px!important}
  body.home-300d .d300-start-card h2{font-size:.62rem!important;margin:.12rem 0!important}
  body.home-300d .d300-start-card p{font-size:.4rem!important;line-height:1.18!important}
  body.home-300d .d300-join-card{padding:6px!important;grid-template-columns:24px 1fr!important;gap:5px!important}
  body.home-300d .d300-plus{width:22px!important;height:22px!important;font-size:.82rem!important}
  body.home-300d .d300-join-card strong{font-size:.62rem!important;line-height:1.05!important}
  body.home-300d .d300-join-card small{font-size:.38rem!important}

  /* Community Spotlight remains a real framed feature in the right column. */
  body.home-300d .d300-community-card{padding:7px 6px 6px!important}
  body.home-300d .d300-spotlight-heading{gap:4px!important;margin-bottom:5px!important}
  body.home-300d .d300-spotlight-heading .eyebrow{font-size:.58rem!important;letter-spacing:.04em!important}
  body.home-300d .d300-spotlight-heading p{font-size:.4rem!important;line-height:1.15!important;margin-top:1px!important}
  body.home-300d .d300-megaphone{font-size:.68rem!important;margin-top:0!important}
  body.home-300d .d300-shadowbox{padding:16px 8px 7px!important;border-radius:6px!important}
  body.home-300d .d300-supporter-name{font-size:.58rem!important}
  body.home-300d .d300-supporter-type{font-size:.42rem!important}
  body.home-300d .d300-tap-note{font-size:.38rem!important;line-height:1.15!important;margin:4px 0!important}
  body.home-300d .d300-kofi-ribbon{padding:5px!important;gap:3px!important}
  body.home-300d .d300-kofi-ribbon *{font-size:.38rem!important}
  body.home-300d .d300-small-business-card{padding:7px!important}
  body.home-300d .d300-small-business-card h2{font-size:.64rem!important;line-height:1.05!important}
  body.home-300d .d300-small-business-card p{font-size:.41rem!important;line-height:1.18!important}
  body.home-300d .d300-resource-button{padding:5px!important;font-size:.39rem!important;border-radius:4px!important}

  /* Featured Vendors remains a horizontal showcase. */
  body.home-300d .d300-random-spotlight{
    width:calc(100% - 12px)!important;
    padding:10px 8px!important;
    margin-bottom:10px!important;
  }
  body.home-300d .d300-random-heading{margin-bottom:8px!important}
  body.home-300d .d300-random-heading h2{font-size:1rem!important;margin:.1rem 0!important}
  body.home-300d .d302-spotlight-wink{font-size:.5rem!important;margin-top:3px!important}
  body.home-300d .d300-random-slots{
    grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)!important;
    gap:5px!important;
    width:100%!important;
  }
  body.home-300d .d300-random-slot{padding:7px!important;grid-template-columns:56px 1fr!important;grid-template-rows:auto 1fr auto!important;column-gap:7px!important;text-align:left!important;min-height:118px!important}
  body.home-300d .d300-random-art{grid-row:1/4!important;width:56px!important;margin:0!important}
  body.home-300d .d300-random-slot>strong{font-size:.55rem!important;line-height:1.08!important}
  body.home-300d .d300-random-slot>small{font-size:.4rem!important}
  body.home-300d .d300-random-label{font-size:.38rem!important}
  body.home-300d .d304-key-divider{width:38px!important;height:58px!important}
  body.home-300d .d304-key-divider img{width:128px!important;left:-42px!important;top:-103px!important}

  /* Already-a-member stays a strip, not a stack. */
  body.home-300d .d300-member-strip{
    width:calc(100% - 12px)!important;
    grid-template-columns:38px minmax(0,1fr) 105px!important;
    gap:7px!important;
    padding:9px!important;
  }
  body.home-300d .d300-member-icon{width:34px!important;height:34px!important;font-size:1rem!important}
  body.home-300d .d300-member-strip h2{font-size:.76rem!important;margin:.08rem 0!important}
  body.home-300d .d300-member-strip p{font-size:.42rem!important;line-height:1.15!important}
  body.home-300d .d300-member-strip>button{grid-column:auto!important;width:auto!important;height:34px!important;font-size:.62rem!important;padding:4px 8px!important}

  body.home-300d .home-shell,
  body.home-300d .contact-section{width:calc(100% - 12px)!important}
}

/* Extra-narrow phones: preserve the same architecture, trim type/spacing again. */
@media (max-width: 390px){
  body.home-300d .brand strong{font-size:.92rem!important;max-width:180px!important}
  body.home-300d .d300-home-grid{grid-template-columns:minmax(0,19fr) minmax(0,34fr) minmax(0,47fr)!important;gap:4px!important}
  body.home-300d .d300-gateway strong{font-size:.58rem!important}
  body.home-300d .d300-gateway small{font-size:.38rem!important}
  body.home-300d .d300-intro-card h1{font-size:.64rem!important}
  body.home-300d .d300-spotlight-heading .eyebrow{font-size:.52rem!important}
  body.home-300d .d300-random-slot{grid-template-columns:50px 1fr!important;padding:6px!important;column-gap:5px!important}
  body.home-300d .d300-random-art{width:50px!important}
}