/* =====================================================================
   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; }
}

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

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

  /* 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; }
}

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

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