/* ==========================================================================
   IDRIS UMZUG — CITY LANDING PAGE STYLES
   --------------------------------------------------------------------------
   City-specific sections. Shared components (why, process, testimonials,
   copy, stats, FAQ, split, checklist) reuse the fp-* classes. Marquee reuses
   .fp-marquee + the data-marquee JS. Built on assets/css/theme.css.

   Contents:
     1. Hero
     2. City marquee
     3. Local partner + badges
     4. Services (2x2)
     5. Apartment split
     6. Moving company band
     7. Larger process circles
     8. Fleet mini stats
     9. CTA
     10. Responsive
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.ct-hero {
  text-align: left;
  color: var(--color-white);
  padding-top: 12.5rem;
  padding-bottom: var(--space-9);
  /* placeholder image background, darkened for legible text */
  background:
    linear-gradient(rgba(12, 35, 64, 0.6), rgba(12, 35, 64, 0.72)),
    url("../images/placeholder.webp") center / cover no-repeat,
    var(--color-dark);
}
.ct-hero h1 { color: var(--color-white); max-width: 620px; margin: 0 0 var(--space-5); }
.ct-hero p { color: rgba(255, 255, 255, 0.82); max-width: 520px; margin: 0 0 var(--space-6); }
.ct-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ct-hero .btn--outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.ct-hero .btn--outline:hover { background: var(--color-white); color: var(--color-dark); }
.ct-hero__features {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-4) var(--space-8);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
.ct-hero__features li { display: inline-flex; align-items: center; gap: var(--space-2); color: rgba(255, 255, 255, 0.9); font-weight: var(--fw-medium); }
.ct-hero__features i { color: var(--color-secondary); }

/* ==========================================================================
   2. CITY MARQUEE
   ========================================================================== */
.ct-cities {
  background: var(--color-light);
  padding: var(--space-6) 0;
  display: grid;
  gap: var(--space-4);
}
.ct-cities .fp-marquee { margin-bottom: 0; }
/* bottom row scrolls left → right (opposite of the default right → left) */
.fp-marquee--reverse .fp-marquee__track { animation-direction: reverse; }
.ct-city {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-pill);
  color: var(--color-dark);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.ct-city i { color: var(--color-secondary-dark); }

/* ==========================================================================
   3. LOCAL PARTNER + BADGES
   ========================================================================== */
.ct-local__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.ct-local__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 470px;
}
.ct-local__col img {
  width: 100%;
  flex: 1 1 auto;       /* image grows tall; the card stays compact */
  min-height: 180px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ct-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  box-shadow: var(--shadow-md);
}
.ct-badge__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 2.2rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
}
.ct-badge small { margin-top: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.ct-badge--rated { background: var(--color-dark); color: var(--color-white); }
.ct-badge--rated .ct-badge__top i { color: var(--color-secondary); }
.ct-badge--guarantee { background: var(--color-secondary); color: var(--color-dark); }

/* ==========================================================================
   4. SERVICES (2x2)
   ========================================================================== */
.ct-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.ct-svc-card {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.ct-svc-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-light-2);
  color: var(--color-dark);
  font-size: 1.2rem;
}
.ct-svc-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.ct-svc-card > p { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.ct-svc-card .fp-checklist { margin: 0; gap: var(--space-3); }
.ct-svc-card .fp-checklist li { font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.ct-svc-card .fp-checklist i { width: 20px; height: 20px; font-size: 0.6rem; }

/* ==========================================================================
   5. APARTMENT SPLIT (tags reuse .ss-tags — provide a fallback here)
   ========================================================================== */
.ct-apartment .ss-tags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.ct-apartment .ss-tags span {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-light);
  color: var(--color-dark);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.ct-apartment .ss-tags i { color: var(--color-secondary-dark); }

/* ==========================================================================
   6. MOVING COMPANY BAND
   ========================================================================== */
.ct-band .container { max-width: 820px; }
.ct-band p { color: rgba(255, 255, 255, 0.8); margin: 0 auto; }

/* ==========================================================================
   7. LARGER PROCESS CIRCLES
   ========================================================================== */
.ct-process .fp-process__num { width: 72px; height: 72px; font-size: var(--fs-h4); }
.ct-process .fp-process__steps::before { top: 36px; }

/* ==========================================================================
   8. FLEET MINI STATS
   ========================================================================== */
.ct-ministats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-top: var(--space-6);
}
.ct-ministats strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--color-secondary-dark);
  line-height: 1.1;
}
.ct-ministats span { color: var(--color-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   9. CTA
   ========================================================================== */
.ct-cta .container { max-width: 720px; }
.ct-cta h2 { color: var(--color-white); margin-bottom: var(--space-3); }
.ct-cta p { color: rgba(255, 255, 255, 0.8); margin: 0 auto var(--space-6); }
.ct-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.ct-cta .btn--outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.ct-cta .btn--outline:hover { background: var(--color-white); color: var(--color-dark); }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .ct-svc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ct-hero { padding-top: 10rem; }
  .ct-hero__features { grid-template-columns: 1fr; }
  .ct-apartment .ss-tags { grid-template-columns: 1fr; }
  .ct-ministats { gap: var(--space-5); }
}