/* ==========================================================================
   CITY.CSS  —  city landing page only  (/hyderabad, /bangalore ...)
   Tokens, fonts, --gutter, header, footer, .section-pad, .section-head,
   .btn-view-all and the whole .pcard card all come from common.css.
   Nothing here overrides a shared class.
   ========================================================================== */

/* ============ PAGE HEAD ============ */
.city-hero{
  padding:34px var(--gutter) 20px;
  text-align:center;
}
.city-hero h1{
  margin:0 0 10px;
  font-family:var(--font-secondary);
  font-size:40px;line-height:1.2;font-weight:500;
  color:#1B3358;
}
.city-sub{
  margin:0 auto;max-width:62ch;
  font-size:17px;line-height:1.6;color:#425671;
}

/* ============ PRODUCT GRID ============
   4 across, exactly as asked. Own class so the mobile carousel rules
   common.css applies to .product-grid can't collide with this. */
.city-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px 24px;
}
.city-grid > .pcard{min-width:0}

/* the first section sits right under the hero — pull it up a little */
.city-section:first-of-type{padding-top:34px}
.city-section{padding-top:34px;padding-bottom:34px}
.city-section .section-head{margin-bottom:26px}

.city-empty{
  text-align:center;font-size:16px;color:#7E9BBB;margin:0;
}

/* ============ SEO COPY ============ */
.city-copy{
  margin:0 auto;
  color:#425671;font-size:16px;line-height:1.7;
}
.city-copy h2{
  margin:0 0 14px;
  font-size:30px;line-height:1.25;font-weight:600;color:#1B3358;
}
.city-copy h3{
  margin:30px 0 10px;
  font-size:21px;line-height:1.3;font-weight:600;color:#1B3358;
}
.city-copy p{margin:0 0 14px}
.city-copy em{font-style:italic}

.city-list{margin:0 0 14px;padding-left:20px}
.city-list li{margin-bottom:7px}
.city-list strong{color:#1B3358;font-weight:600}

/* delivery areas — plain columns, no bullets */
.city-areas{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px 20px;margin:0;padding:0;list-style:none;
}
.city-areas a{
  color:#425671;text-decoration:none;font-size:15px;
}
.city-areas a:hover{color:#1B3358;text-decoration:underline}

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  .city-grid{grid-template-columns:repeat(3,1fr);gap:30px 20px}
  .city-areas{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .city-hero{padding-top:22px}
  .city-hero h1{font-size:28px}
  .city-sub{font-size:15px}

  .city-grid{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .city-areas{grid-template-columns:repeat(2,1fr)}

  .city-section:first-of-type,
  .city-section{padding-top:22px;padding-bottom:22px}
  .city-section .section-head{margin-bottom:18px}

  .city-copy{font-size:15px}
  .city-copy h2{font-size:24px}
  .city-copy h3{font-size:18px;margin-top:24px}
}
@media (max-width:480px){
  .city-hero h1{font-size:24px}
  .city-grid{gap:20px 12px}
}