/* ===================================================
   Helpu — Reusable Section Components
   =================================================== */

/* Hero Slider Section */
.hero-slider-section {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  margin-top: 0;
  padding: 0;
}
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1024 / 426;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  margin-bottom: var(--sp-6);
}
.hero-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  display: block;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrow controls matching screenshot styling */
.hero-slider-prev, .hero-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.hero-slider-prev:hover, .hero-slider-next:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.hero-slider-prev {
  left: var(--sp-4);
}
.hero-slider-next {
  right: var(--sp-4);
}

/* Indicators dots */
.hero-slider-dots {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(36, 72, 124, 0.3);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.hero-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
}

@media (max-width: 1024px) {
  .hero-slider {
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
  }
}

/* Category / offering cards */
.category-card { display: block; position: relative; aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.category-card:hover img { transform: scale(1.06); }
.category-card-overlay {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,51,48,0.85) 0%, rgba(9,51,48,0.05) 55%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-5); color: #fff;
}
.category-card-overlay h3 { color: #fff; margin-bottom: var(--sp-1); }
.category-card-overlay span { font-size: var(--fs-xs); opacity: 0.85; }

/* Process journey */
.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-5); }
.journey-step { text-align: center; }
.journey-visual {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); transition: transform var(--transition), box-shadow var(--transition); position: relative; overflow: hidden;
}
.journey-visual svg { width: 40%; height: 40%; position: relative; z-index: 1; }
.journey-visual::after {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 60%);
}
.journey-step:hover .journey-visual { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.journey-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.journey-step h4 { font-size: var(--fs-md); margin-bottom: 4px; }
.journey-step p { font-size: var(--fs-xs); color: var(--color-text-muted); margin: 0; max-width: 260px; margin-inline: auto; }
@media (max-width: 900px) { .journey-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .journey-grid { grid-template-columns: 1fr; } }

/* Solution gallery grid (icon tiles) */
.solution-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-4); }
.solution-tile {
  text-align: center; padding: var(--sp-5) var(--sp-2); border-radius: var(--radius-md); background: var(--color-surface);
  box-shadow: var(--shadow-sm); border: 1px solid transparent; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.solution-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-accent-light); }
.solution-icon {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
  margin: 0 auto var(--sp-3); background: var(--color-accent-light); color: var(--color-accent); transition: background var(--transition), color var(--transition), transform var(--transition);
}
.solution-icon svg { width: 26px; height: 26px; }
.solution-tile:hover .solution-icon { background: var(--color-accent); color: #fff; transform: scale(1.08) rotate(-4deg); }
.solution-tile span { font-size: var(--fs-xs); font-weight: 600; }
@media (max-width: 1024px) { .solution-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .solution-grid { grid-template-columns: repeat(3, 1fr); } }

/* Testimonial / happy homes carousel */
.scroll-row { display: flex; gap: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-3); scroll-snap-type: x mandatory; }
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); }
.story-card { flex: 0 0 300px; scroll-snap-align: start; }
.story-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.story-card-body { padding: var(--sp-4); }
.story-card-body h4 { margin-bottom: 4px; }
.story-card-body span { font-size: var(--fs-xs); color: var(--color-text-muted); }

.testimonial-card { flex: 0 0 340px; scroll-snap-align: start; padding: var(--sp-5); }
.testimonial-stars { color: var(--color-gold); margin-bottom: var(--sp-2); }
.testimonial-quote { font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.testimonial-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { font-size: var(--fs-sm); display: block; }
.testimonial-author span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Trust badges strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.trust-item {
  text-align: center; padding: var(--sp-6) var(--sp-4); background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.trust-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.trust-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-3); color: #fff; transition: transform var(--transition);
}
.trust-item:hover .trust-icon { transform: scale(1.1) rotate(6deg); }
.trust-icon svg { width: 30px; height: 30px; }
.trust-item:nth-child(1) .trust-icon { background: var(--color-accent); }
.trust-item:nth-child(2) .trust-icon { background: var(--color-teal); }
.trust-item:nth-child(3) .trust-icon { background: var(--color-primary); }
.trust-item:nth-child(4) .trust-icon { background: var(--color-gold); }
.trust-item .num { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-primary); font-weight: 700; display: block; }
.trust-item span.label { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 700px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }

/* FAQ accordion */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 0; font-weight: 600; font-family: var(--font-heading); color: var(--color-primary); text-align: left; }
.faq-question .icon { transition: transform var(--transition); }
.faq-item.open .faq-question .icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p { padding-bottom: var(--sp-4); }

/* Benefit callouts (why choose) */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.benefit-item { text-align: center; padding: var(--sp-5); background: var(--color-surface); border-radius: var(--radius-md); }
.benefit-item .icon { font-size: 32px; margin-bottom: var(--sp-2); }
@media (max-width: 700px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }

/* Filter chips */
.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.chip { padding: 8px 18px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--fs-sm); font-weight: 500; transition: all var(--transition); }
.chip:hover { border-color: var(--color-accent); }
.chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Design/product style card (kitchen/wardrobe designs) */
.design-card-media { position: relative; aspect-ratio: 4/3; }
.design-card-media img { width: 100%; height: 100%; object-fit: cover; }
.design-card-media .badge { position: absolute; top: var(--sp-3); left: var(--sp-3); }
.design-card-body { padding: var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.design-card-body h4 { margin: 0; }
.design-card-body span { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-xs); color: var(--color-text-muted); padding: var(--sp-4) 0; }
.breadcrumb a:hover { color: var(--color-accent); }

/* City directory */
.city-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.city-grid a { display: block; padding: var(--sp-2) var(--sp-3); background: var(--color-surface); border-radius: var(--radius-sm); font-size: var(--fs-sm); text-align: center; box-shadow: var(--shadow-sm); }
.city-grid a:hover { color: var(--color-accent); }
@media (max-width: 900px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: var(--fs-sm); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-accent); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Pricing tiers */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.pricing-card { padding: var(--sp-6); text-align: center; display: flex; flex-direction: column; }
.pricing-card.featured { border: 2px solid var(--color-accent); transform: scale(1.03); }
.pricing-card .price { font-family: var(--font-heading); font-size: var(--fs-2xl); color: var(--color-primary); margin: var(--sp-3) 0; }
.pricing-card ul { margin: var(--sp-4) 0; flex: 1; text-align: left; }
.pricing-card li { padding: 6px 0; font-size: var(--fs-sm); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-card.featured { transform: none; } }