/* ============================================================
   SERVICES PAGE – Specific Styles
   ============================================================ */

/* ─── PAGE HERO ──────────────────────────────────────────────── */
.page-hero { padding: 100px var(--spacing-gutter) 80px; }
.page-hero__dot-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(197,160,89,0.12) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ─── SERVICE SECTION SHARED ─────────────────────────────────── */
.svc-section__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
}
.svc-section__image-col { position: relative; }

.svc-section__img-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}
.svc-section__img-wrap img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.svc-section__image-col:hover .svc-section__img-wrap img { transform: scale(1.04); }

.svc-section__badge {
  position: absolute;
  bottom: -24px; right: -24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(44,45,47,0.1);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 280px;
}
.svc-section__badge .material-symbols-outlined { font-size: 28px; flex-shrink: 0; }
.svc-section__badge strong {
  font-size: var(--fs-label-bold);
  font-weight: 600;
  color: var(--color-security-navy);
  display: block;
  margin-bottom: 4px;
}
.svc-section__badge p {
  font-size: var(--fs-caption);
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.svc-section__copy { display: flex; flex-direction: column; gap: 0; }

.section-tag { margin-bottom: 8px; }
.section-title { margin-bottom: 16px; }

.svc-section__desc {
  font-size: var(--fs-body-md);
  color: var(--color-on-surface-variant);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Feature list */
.svc-list { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.svc-list__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.svc-list__icon { color: var(--color-artisan-gold); margin-top: 2px; flex-shrink: 0; }
.svc-list__item strong {
  font-size: var(--fs-label-bold);
  font-weight: 600;
  color: var(--color-security-navy);
  display: block;
  margin-bottom: 2px;
}
.svc-list__item p { font-size: var(--fs-caption); color: var(--color-on-surface-variant); }

/* ─── BLINDS BENTO ───────────────────────────────────────────── */
.blinds-section__subtitle {
  font-size: var(--fs-body-md);
  color: var(--color-on-surface-variant);
  max-width: 600px;
  margin: 12px auto 48px;
}

.bento-grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  height: 600px;
}

.bento-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.bento-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }

.bento-card--large {
  grid-row: span 2;
}
.bento-card--large img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.bento-card--large:hover img { transform: scale(1.04); }

.bento-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,22,46,0.85) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}
.bento-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-headline-md);
  font-weight: 600;
  color: white;
  margin-bottom: 8px;
}
.bento-card__desc {
  font-size: var(--fs-body-md);
  color: rgba(255,255,255,0.8);
}

.bento-card--small { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.bento-card--light { background: var(--color-surface-container-high); }
.bento-card--light .bento-card__icon { color: var(--color-artisan-gold); }
.bento-card--dark  { background: var(--color-security-navy); }
.bento-card--dark  .bento-card__title { color: white; }
.bento-card--dark  .bento-card__desc  { color: rgba(255,255,255,0.7); }
.bento-card--dark  .bento-card__icon  { color: var(--color-artisan-gold); }
.bento-card__icon { font-size: 40px; }

/* ─── REPAIR ─────────────────────────────────────────────────── */
.repair-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.repair-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0 36px;
}
.repair-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--fs-label-bold);
  font-weight: 600;
  color: var(--color-security-navy);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-outline-variant);
  transition: var(--transition-base);
}
.repair-chip:hover { border-color: var(--color-artisan-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.repair-chip .material-symbols-outlined { color: var(--color-artisan-gold); }

.repair-section__img-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 4px solid white;
}
.repair-section__img-wrap img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.repair-section__image:hover .repair-section__img-wrap img { transform: scale(1.04); }

/* ─── CTA ────────────────────────────────────────────────────── */
.services-cta { position: relative; overflow: hidden; padding: 80px var(--spacing-gutter); }
.services-cta__bg {
  position: absolute;
  inset: 0;
  background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
  opacity: 0.08;
}
.services-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.services-cta__content { text-align: center; }
.services-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.services-cta__body { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.72); margin-bottom: 36px; }
.services-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .svc-section__inner { grid-template-columns: 1fr; gap: 40px; }
  .svc-section__badge { display: none; }
  .bento-grid { height: auto; grid-template-columns: 1fr; }
  .bento-card--large { height: 380px; }
  .bento-card--small { height: 180px; }
  .repair-inner { grid-template-columns: 1fr; }
  .repair-chips { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .svc-section__img-wrap img { height: 280px; }
  .repair-chips { grid-template-columns: 1fr; }
  .repair-section__img-wrap img { height: 260px; }
  .services-cta__title { font-size: 28px; }
  .bento-card--large { height: 260px; }
}