/* =====================================================================
   responsive.css  —  Cocoa County
   Load AFTER styles.css:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="responsive.css">
   Breakpoints: 1100 (small laptop) · 900 (tablet) · 600 (large phone) · 400 (small phone)
   ===================================================================== */

/* ---------- small laptop / large tablet ---------- */
@media (max-width:1100px){
  .location-list.loc-offices{ gap:14px; }

  /* Floor plan cards: 4 -> 2 columns */
  .plans-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- tablet ---------- */
@media (max-width:900px){

  /* Location: map goes under the list, keep a sensible height */
  .location-section{ padding:64px 0 64px; }
  .map-box{ min-height:340px; }

  /* office cards stack */
  .location-list.loc-offices{ grid-template-columns:1fr; }

  /* Hero */
  .hero-eoi{ margin-top:18px; }

  /* Welcome: pre-launch card can use full width */
  .prelaunch-card{ max-width:none; }

  /* Gallery bento — visible divider between stacked images */
  .bento-grid-row{ gap:14px; }
  .bento-item, .bento-main{
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
  }
}

/* ---------- large phone ---------- */
@media (max-width:600px){

  .wrap{ padding-left:20px; padding-right:20px; }

  /* ===================================================
     HERO — mobile: stronger overlay for text readability
  =================================================== */
  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(10,6,3,.78) 0%,
        rgba(15,9,4,.72) 30%,
        rgba(15,9,4,.68) 55%,
        rgba(10,6,3,.82) 80%,
        rgba(10,6,3,.9) 100%
      );
  }

  /* extra dark backdrop right behind the text block itself */
  .hero-left{
    position: relative;
    z-index: 2;
    padding: 18px 16px;
    border-radius: 14px;
    background: linear-gradient(
      180deg,
      rgba(10,6,3,.35) 0%,
      rgba(10,6,3,.15) 60%,
      rgba(10,6,3,.35) 100%
    );
  }

  /* buttons/whatsapp area sits on brighter part of image — darken bottom more */
  .hero{
    position: relative;
  }
  .hero::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:220px;
    background: linear-gradient(180deg, rgba(10,6,3,0) 0%, rgba(10,6,3,.75) 100%);
    z-index:1;
    pointer-events:none;
  }

  /* ===================================================
     HERO — mobile layout
  =================================================== */
  .hero{
    min-height:auto;
    height:auto;
    max-height:none;
    padding:110px 0 60px;
  }
  .hero-inner{
    grid-template-columns:1fr;
    gap:36px;
  }
  .hero-left{ max-width:100%; }
  .hero h1{ font-size:34px; letter-spacing:-.5px; }
  .hero p.tag{ font-size:14px; margin-top:16px; }

  /* feature icons row — FIX: all 4 stay on one line on mobile
     (was fixed width 72px per item, forcing the 4th to wrap) */
  .hero-features{
    gap:10px;
    margin-top:24px;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .hf{
    width:auto;
    flex:1 1 0;
    min-width:0;
  }
  .hf-ic{ width:42px; height:42px; font-size:14px; margin-bottom:6px; }
  .hf span:last-child{ font-size:9.5px; }

  /* buttons row */
  .hero-btn-row{
    margin-top:26px;
    gap:12px;
    flex-wrap:wrap;
  }
  .hero .btn{
    min-height:46px;
    padding:0 18px;
    font-size:11px;
    flex:1 1 auto;
    text-align:center;
  }

  .hero-locline{ margin-top:20px; font-size:10.5px; flex-wrap:wrap; }

  /* enquiry card fits full width under hero text */
  .enquiry-card{
    max-width:100%;
    margin-left:0;
    padding:24px 22px 20px;
  }
  .enquiry-head h3{ font-size:24px; }

  /* ===================================================
     STRIP — mobile (fixes the big empty gap)
  =================================================== */
  .strip{ margin-top:0; }
  .strip-card{
    padding:6px 20px;
    border-radius:12px;
    gap:0;
  }
  .strip-item{
    width:100%;
    padding:16px 0;
    gap:14px;
    border-bottom:1px solid rgba(169,116,59,.18);
    flex:none;
  }
  .strip-item:last-child{ border-bottom:none; }
  .strip-icon{
    width:40px;
    height:40px;
    font-size:16px;
    border-radius:8px;
  }
  .strip-text{ gap:2px; }
  .strip-title{ font-size:15px; }
  .strip-sub{ font-size:12px; }

  /* ===================================================
     SIDE ENQUIRE TAB — move so it never overlaps buttons
  =================================================== */
  .cc-side-tabs{
    top:auto;
    bottom:90px;
    transform:none;
  }
  .cc-side-tab{
    padding:12px 8px;
    font-size:11px;
  }

  /* Floor Plans heading row: stack text and "View Floor Plans" button */
  .plans div[style*="space-between"]{ flex-direction:column; gap:18px; }
  .plans div[style*="space-between"] > div[style*="margin"]{ margin:0 !important; }

  /* Floor plan cards: 1 column */
  .plans-grid{ grid-template-columns:1fr; padding:0 20px; gap:18px; }
  .plan-box-img{ height:210px; }

  /* Location list */
  .location-section{ padding:48px 0 48px; }
  .loc-times{ margin-top:22px; padding-left: 0px;}
  .loc-times li{ padding:13px 0; gap:14px; }
  .loc-place{ font-size:14.5px; }
  .loc-time{ font-size:13.5px; white-space:normal; max-width:42%; }
  .map-box{ min-height:280px; }
  .location-list.loc-offices li{ padding:16px; gap:14px; }

  /* Welcome: pre-launch card */
  .prelaunch-card{ padding:20px 0; border-radius:16px; }
  .pl-col{ padding:0 18px; }
  .pl-label{ font-size:10px; letter-spacing:1.4px; margin-bottom:8px; }
  .pl-value{ font-size:22px; white-space:nowrap; }
  .pl-sub{ font-size:12px; }

  /* Hero EOI pill */
  .hero-eoi{ padding:8px 14px; gap:10px; }
  .hero-eoi-label{ font-size:10px; letter-spacing:1.2px; }
  .hero-eoi-amount{ font-size:15px; padding-left:10px; }

  /* Plan cards EOI line */
  .plan-box-eoi{ font-size:13px; }

  /* ===================================================
     WELCOME / INTRO HEADING — FIX: the hardcoded <br> in
     the HTML ("A Rare Address for<br>Exceptional Living")
     was leaving a lonely "for" on its own third line on
     narrow phones because "A Rare Address for" alone was
     too wide to fit one line at the old font-size.
     Shrinking the heading lets that first line fit on one
     line again, restoring the intended 2-line break.
  =================================================== */
  .spaces-title{ font-size:26px; line-height:1.25; }

  /* ===================================================
     WELCOME SECTION — FIX: the intro visual (.spaces-image)
     ran straight into the first floor-plan card below it on
     mobile with no separation, looking like "image after
     image" out of context. Add a small label + extra space
     before the plan cards begin (CSS-only, no HTML change).
  =================================================== */
  .plans-grid{ position:relative; margin-top:34px !important; }
  .plans-grid::before{
    content:"Residence Configurations";
    display:block;
    grid-column:1 / -1;
    margin-bottom:6px;
    font-family:'Poppins', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:#b78732;
  }

  /* ===================================================
     GALLERY BENTO — FIX: on mobile the stacked listing
     images had no visible separation, so it looked broken
     (fine on desktop, unclear on mobile). Add gap + border.
  =================================================== */
  .gallery-bento{ gap:12px; }
  .bento-grid{ gap:12px; }
  .bento-grid-row{ gap:12px; }
  .bento-item, .bento-main{
    border:1px solid rgba(0,0,0,.1);
    border-radius:8px;
  }

  /* FIX: between the big feature image and the smaller grid
     images it just looked like "photo after photo" on mobile
     with no context. Add a small label right before the grid
     starts, purely via CSS (no HTML change needed). */
  .bento-grid{ position:relative; }
  .bento-grid::before{
    content:"More Views";
    display:block;
    order:-1;
    margin:2px 0 2px 2px;
    font-family:'Poppins', sans-serif;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:#b88a3d;
  }
}

/* ---------- small phone ---------- */
@media (max-width:400px){
  .spaces-title{ font-size:23px; }
  .pl-col{ padding:0 14px; }
  .pl-value{ font-size:19px; }
  .loc-time{ max-width:48%; }

  /* keep all 4 hero feature icons on one line, just smaller */
  .hf-ic{ width:36px; height:36px; font-size:12px; }
  .hf span:last-child{ font-size:8.5px; }

  .strip-item{ padding:13px 0; gap:12px; }
  .strip-icon{ width:36px; height:36px; font-size:14px; }
  .strip-title{ font-size:14px; }
  .strip-sub{ font-size:11.5px; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-eoi{ animation:none; opacity:1; }
}