/* =========================================================
   BuyingCT — Mobile Only Styles
   File: /fileadmin/Buyingct_site/CssCode/home-mobile.css
   Loaded only on screens <= 719px via:
   <link rel="stylesheet" media="(max-width: 719px)">
   ========================================================= */


/* ===========================
   0) QUICK TWEAKS (edit these)
   =========================== */
:root{
  /* Brand / theme */
  --bct-bg: #6b8db9;    /* Canva blue background */
  --bct-white: #ffffff;
  --bct-ink: #0f1b2a;
  --bct-ink-soft: #1f2d41;
  --bct-accent: #8e24aa;

  /* Spanish/royal brand + card border */
  --bct-royal:#1f3aa9;
  --card-border:rgba(31,58,169,.12);

  /* Headline sizing */
  --bct-h1-min: 28px;
  --bct-h1-vw: 7vw;
  --bct-h1-max: 44px;
}


/* =========================================================
   1) VISIBILITY CONTROL
   ========================================================= */
.bct-mobile-landing { display: none !important; }   /* default: hidden */

@media (max-width: 719px){
  .bct-mobile-landing { display: block !important; }
  #desktop-view { display: none !important; }
  #site-header { display: none !important; }
  body > header { display: none !important; } /* fallback */
}


/* =========================================================
   2) SHIELD / RESETS (scoped to mobile block)
   ========================================================= */
.bct-mobile-landing, .bct-mobile-landing * { box-sizing: border-box; }
.bct-mobile-landing {
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif !important;
  background: var(--bct-bg);
  color: var(--bct-white);
  padding: 16px 14px 28px;
}
.bct-mobile-landing a { color: var(--bct-white) !important; text-decoration: none !important; }
.bct-mobile-landing p { margin: 0 0 8px !important; }
.bct-mobile-landing ul, .bct-mobile-landing li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bct-mobile-landing img { display: block !important; max-width: 100% !important; height: auto !important; }


/* =========================================================
   3) MOBILE HEADER (inside the hero)
   ========================================================= */
.bct-mobile-landing .bct-header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.bct-mobile-landing .bct-logo img { height: 56px !important; }
.bct-mobile-landing .bct-nav a { margin-left: 12px !important; font-size: 14px !important; opacity: .9 !important; }
.bct-mobile-landing .bct-nav a:hover { opacity: 1 !important; text-decoration: underline !important; }


/* =========================================================
   4) HERO CONTENT
   ========================================================= */
.bct-mobile-landing .bct-hero { max-width: 720px; margin: 0 auto; }

.bct-mobile-landing h1{
  margin: 10px 0 14px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.5px !important;
  font-weight: 800 !important;
  color: var(--bct-white) !important;
  font-size: clamp(var(--bct-h1-min), var(--bct-h1-vw), var(--bct-h1-max)) !important;
  text-wrap: balance !important;
}
.bct-mobile-landing h1 span{ display:block !important; }
.bct-mobile-landing h1 .highlight{
  font-weight: 900;
  color: #4169E1;
  font-size: 1.06em;
  letter-spacing: -0.02em;
}


/* =========================================================
   5) QUICK-LINK PILLS (4 buttons) — white + beveled
   ========================================================= */
.bct-mobile-landing .bct-pill-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 8px 0 14px !important;
}
.bct-mobile-landing .bct-pill{
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 44px !important; padding: 10px 12px !important;
  background:#fff !important;
  color:var(--bct-royal) !important;
  border:1px solid var(--card-border) !important;
  border-radius:14px !important;
  font-weight:600 !important; font-size: 14px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(0,0,0,.05) inset,
    0 8px 22px rgba(0,0,0,.10);
}
.bct-mobile-landing .bct-pill:active{ transform: translateY(1px); }
@media (hover:hover){
  .bct-mobile-landing .bct-pill:hover{
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 -1px 0 rgba(0,0,0,.06) inset,
      0 10px 26px rgba(0,0,0,.12);
    transform: translateY(-1px);
  }
}


/* =========================================================
   6) BIG CTA BUTTON
   ========================================================= */
.bct-mobile-landing .bct-cta{
  display: block !important; text-align: center !important;
  font-weight: 700 !important;
  margin: 6px 0 16px !important; padding: 14px 12px !important;
  border-radius: 12px !important;
  background: var(--bct-white) !important; color: #1e3350 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.15) !important;
}


/* =========================================================
   7) SUBLEAD COPY
   ========================================================= */
.bct-mobile-landing .bct-sublead{
  background: rgba(255,255,255,.12);
  border-radius: 12px; padding: 12px;
}
.bct-mobile-landing .bct-kicker{ font-size: 14px; margin: 0 0 6px; }
.bct-mobile-landing .bct-small{ font-size: 13px; line-height: 1.45; margin: 0; }


/* =========================================================
   8) FEATURE GRID (6 tiles) — white cards + beveled
   ========================================================= */
.bct-mobile-landing .bct-features{
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
.bct-mobile-landing .bct-feature{
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  align-items: center !important; justify-content: center !important;
  text-decoration: none !important;
  background:#fff !important;
  color:var(--bct-royal);
  border:1px solid var(--card-border);
  border-radius:16px !important;
  padding:16px 20px !important; min-height: 92px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.05) inset,
    0 10px 26px rgba(0,0,0,.12);
}
.bct-mobile-landing .bct-feature span{
  color:var(--bct-royal);
  font-weight:600;
  font-size: 12px !important; text-align: center !important; line-height: 1.25 !important;
}

/* Icon sizes */
.bct-mobile-landing .bct-feature img{
  width: clamp(48px, 15vw, 64px);
  height: auto;
  display:block;
}

/* Per-icon tweaks (optional) */
.bct-mobile-landing .icon{ width: clamp(48px, 15vw, 64px); height:auto; display:block; }
.bct-mobile-landing .icon-rent    { width: clamp(60px, 18vw, 80px); }
.bct-mobile-landing .icon-tax     { width: clamp(56px, 16vw, 72px); }
.bct-mobile-landing .icon-schools { width: clamp(96px, 16vw, 92px); }
.bct-mobile-landing .icon-permits { width: clamp(56px, 16vw, 72px); }
.bct-mobile-landing .icon-cma     { width: clamp(60px, 18vw, 80px); }
.bct-mobile-landing .icon-afford  { width: clamp(58px, 17vw, 76px); }


/* =========================================================
   9) TABLET ENHANCER (optional)
   ========================================================= */
@media (min-width: 600px) and (max-width: 719px){
  .bct-mobile-landing .bct-pill-row{ grid-template-columns: repeat(4, 1fr) !important; }
  .bct-mobile-landing .bct-features{ grid-template-columns: repeat(6, 1fr) !important; }
}

/* Mobile-only: grow the Schools icon */
@media (max-width: 719px){

  /* 1) Neutralize any earlier fixed sizing on all feature icons */
  .bct-mobile-landing .bct-feature img{
    width: auto !important;
    height: auto !important;
  }

  /* 2) Make Schools icon larger */
  .bct-mobile-landing .icon-schools{
    width: 92px !important;   /* adjust to taste: 76–100px works well */
    height: auto !important;
    display: block;
  }

  /* 3) (Optional) give the Schools tile a bit more height, if label wraps */
  .bct-mobile-landing .bct-feature:has(.icon-schools){ min-height: 108px; }

  /* Fallback if :has is not supported: Schools is the 3rd tile */
  .bct-mobile-landing .bct-features .bct-feature:nth-child(3){ min-height: 108px; }
}

@media (max-width: 719px){
  .bct-mobile-landing h1 .highlight{
    color: var(--bct-royal) !important;  /* #1F3AA9 */
  }
}