/* MOBILE / TABLET FIXES
   styles.css ke BAAD load karo:
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="mobile-fix.css">
*/

/* Image aur listing cards ke beech ki heading: desktop par hidden */
.plans-heading{display:none}

/* Tablet: listing cards 2 column (inline style ko override karne ke liye !important) */
@media(max-width:980px){
  .plans-grid{grid-template-columns:1fr 1fr!important}
  .plans-grid .plan-box:last-child:nth-child(odd){grid-column:1/-1}
}

/* Mobile */
@media(max-width:700px){
  /* hero ke 4 features ek hi row me */
  .hero-features{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;flex-wrap:nowrap!important}
  .hf{width:auto!important;font-size:10px!important;line-height:1.35}
  .hf-ic{width:44px!important;height:44px!important;font-size:15px!important;margin-bottom:8px!important}

  /* listing cards: ek row me ek card */
  .plans-grid{grid-template-columns:1fr!important}

  /* image aur listing cards ke beech heading */
  .plans-heading{display:block;padding:0 18px;margin-top:34px;text-align:left}
  .plans-heading .eyebrow{margin-bottom:8px}
  .plans-heading h2{font-size:26px;line-height:1.2;color:var(--maroon);margin-bottom:8px}
  .plans-heading p{font-size:14px;color:#000;margin:0}
  .plans-grid{margin-top:22px!important}

  /* Floor Plans heading + button upar-neeche */
  .plans .wrap>div:first-child{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
  .plans .wrap>div:first-child>div:last-child{margin:0!important}

  /* location list: naam ek side, mins doosri side */
  .loc-times{padding-left:0!important;margin-left:0!important}
  .loc-times li{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:12px!important}
  .loc-place{flex:1;font-size:14px!important}
  .loc-time{flex:0 0 auto!important;font-size:13px!important}
}

/* Bahut chhote phone */
@media(max-width:360px){
  .hero-features{grid-template-columns:repeat(2,1fr)!important;row-gap:18px!important}
}

/* HERO text readable on mobile/tablet (background image ke upar) */
@media(max-width:980px){
  .hero-overlay{background:linear-gradient(180deg,rgba(12,8,4,.82) 0%,rgba(12,8,4,.74) 45%,rgba(12,8,4,.88) 100%)!important}
  .hero-left{text-shadow:0 1px 8px rgba(0,0,0,.65)}
  .hero p.tag{color:#fff!important;font-size:15px!important}
  .btn-outline{background:rgba(0,0,0,.45)!important;border-color:#fff!important}
  .hero-locline{color:#fff!important}
}
@media(max-width:700px){
  .hf{font-size:11px!important;font-weight:500!important}
}