/* ============================================================================
   SERVICE HERO COMPONENT — THEME 3: TERRACOTTA & ARCHITECTURAL ARCH
   Prefix: ebhro-serv20
   ============================================================================ */

@import url('./hero-serv1.css');

:root {
  /* ===== COLORS ===== */
  --ebhro-serv20-bg: #faf6f0;
  --ebhro-serv20-text-primary: #2d2219;
  --ebhro-serv20-text-secondary: #7c624d;
  --ebhro-serv20-text-muted: #7c624d;

  --ebhro-serv20-primary: #c2410c;
  --ebhro-serv20-primary-hover: #e85d04;
  --ebhro-serv20-primary-light: rgba(194, 65, 12, 0.1);
  /* Solid badge background so white badge text/icon has real contrast.
     Uses --primary (not --primary-hover) — unlike theme 1/2, this theme's
     --primary-hover is a *lighter* orange, so --primary is the token that's
     actually dark enough for white text here. */
  --ebhro-serv20-badge-bg: var(--ebhro-serv20-primary);

  --ebhro-serv20-accent-gradient: linear-gradient(135deg, #c2410c 0%, #e85d04 50%, #d97706 100%);
  --ebhro-serv20-gold-accent: #d97706;

  --ebhro-serv20-card-bg: rgba(255, 255, 255, 0.92);
  --ebhro-serv20-card-border: rgba(236, 220, 200, 0.9);

  /* ===== BORDER ===== */
  --ebhro-serv20-radius-sm: 14px;
  --ebhro-serv20-radius-md: 28px;
  --ebhro-serv20-radius-lg: 40px;
  --ebhro-serv20-radius-full: 9999px;

  /* ===== TYPOGRAPHY ===== */
  --ebhro-serv20-font-family: "El Messiri", sans-serif;

  /* ===== MEDIA CARD (ARCH) ===== */
  --ebhro-serv20-media-radius: 200px 200px 32px 32px;
  --ebhro-serv20-media-padding: 14px;
  --ebhro-serv20-media-bg: rgba(255, 255, 255, 0.95);
  --ebhro-serv20-media-border: 3px solid rgba(194, 65, 12, 0.2);
  --ebhro-serv20-media-shadow: 0 30px 60px -15px rgba(194, 65, 12, 0.15);

  /* ===== IMAGE (ARCH INNER) ===== */
  --ebhro-serv20-img-radius: 190px 190px 24px 24px;
  --ebhro-serv20-img-height: 440px;

  /* ===== FEATURES GRID ===== */
  --ebhro-serv20-feat-columns: repeat(4, 1fr);
  --ebhro-serv20-feat-gap: 20px;
  --ebhro-serv20-feat-padding-grid: 10px 0;

  /* ===== FEATURE CARD ===== */
  --ebhro-serv20-feat-radius: 32px;
  --ebhro-serv20-feat-bg: #ffffff;
  --ebhro-serv20-feat-border: 2px solid rgba(236, 220, 200, 0.8);
  --ebhro-serv20-feat-padding: 28px 22px;
  --ebhro-serv20-feat-shadow: 0 15px 35px rgba(45, 34, 25, 0.05);

  --ebhro-serv20-feat-stagger-odd: translateY(-12px);
  --ebhro-serv20-feat-stagger-even: translateY(12px);

  --ebhro-serv20-feat-hover-transform: translateY(-20px) scale(1.02);
  --ebhro-serv20-feat-hover-border: #c2410c;
  --ebhro-serv20-feat-hover-shadow: 0 25px 50px rgba(194, 65, 12, 0.18);

  /* ===== FEATURE ICON ===== */
  --ebhro-serv20-icon-radius: 50%;
  --ebhro-serv20-icon-size: 52px;
  --ebhro-serv20-icon-bg: rgba(194, 65, 12, 0.1);
  --ebhro-serv20-icon-color: #c2410c;
  --ebhro-serv20-icon-margin-bottom: 16px;

  /* ===== FEATURE TEXT ===== */
  --ebhro-serv20-feat-title-size: 1.15rem;
  --ebhro-serv20-feat-title-margin: 10px;
  --ebhro-serv20-feat-desc-size: 0.92rem;
  --ebhro-serv20-feat-desc-height: 1.65;

  /* ===== BUTTON ===== */
  --ebhro-serv20-btn-radius: 9999px;
  --ebhro-serv20-btn-primary-bg: linear-gradient(135deg, #c2410c 0%, #e85d04 100%);

  /* ===== RESPONSIVE (TABLET) ===== */
  --ebhro-serv20-feat-columns-tablet: repeat(2, 1fr);
}

/* Architectural Arch Window Media Card */
.ebhro-serv20-media-card {
  border-radius: var(--ebhro-serv20-media-radius) !important;
  padding: var(--ebhro-serv20-media-padding) !important;
  background: var(--ebhro-serv20-media-bg) !important;
  border: var(--ebhro-serv20-media-border) !important;
  box-shadow: var(--ebhro-serv20-media-shadow) !important;
}

.ebhro-serv20-media-img-wrapper {
  border-radius: var(--ebhro-serv20-img-radius) !important;
  height: var(--ebhro-serv20-img-height) !important;
}

/* Staggered Vertical Offset Feature Cards */
.ebhro-serv20-features-grid {
  grid-template-columns: var(--ebhro-serv20-feat-columns) !important;
  gap: var(--ebhro-serv20-feat-gap) !important;
  padding: var(--ebhro-serv20-feat-padding-grid) !important;
}

.ebhro-serv20-feat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: right !important;
  border-radius: var(--ebhro-serv20-feat-radius) !important;
  background: var(--ebhro-serv20-feat-bg) !important;
  border: var(--ebhro-serv20-feat-border) !important;
  padding: var(--ebhro-serv20-feat-padding) !important;
  box-shadow: var(--ebhro-serv20-feat-shadow) !important;
}

.ebhro-serv20-feat-card:nth-child(odd) {
  transform: var(--ebhro-serv20-feat-stagger-odd);
}

.ebhro-serv20-feat-card:nth-child(even) {
  transform: var(--ebhro-serv20-feat-stagger-even);
}

.ebhro-serv20-feat-card:hover {
  transform: var(--ebhro-serv20-feat-hover-transform) !important;
  border-color: var(--ebhro-serv20-feat-hover-border) !important;
  box-shadow: var(--ebhro-serv20-feat-hover-shadow) !important;
}

.ebhro-serv20-feat-icon-wrapper {
  border-radius: var(--ebhro-serv20-icon-radius) !important;
  width: var(--ebhro-serv20-icon-size) !important;
  height: var(--ebhro-serv20-icon-size) !important;
  background: var(--ebhro-serv20-icon-bg) !important;
  color: var(--ebhro-serv20-icon-color) !important;
  margin-bottom: var(--ebhro-serv20-icon-margin-bottom) !important;
}

.ebhro-serv20-feat-title {
  width: 100% !important;
  font-size: var(--ebhro-serv20-feat-title-size) !important;
  margin-bottom: var(--ebhro-serv20-feat-title-margin) !important;
}

.ebhro-serv20-feat-desc {
  width: 100% !important;
  font-size: var(--ebhro-serv20-feat-desc-size) !important;
  line-height: var(--ebhro-serv20-feat-desc-height) !important;
}

.ebhro-serv20-btn {
  border-radius: var(--ebhro-serv20-btn-radius) !important;
}

.ebhro-serv20-btn-primary {
  background: var(--ebhro-serv20-btn-primary-bg) !important;
}

@media (max-width: 1024px) {
  .ebhro-serv20-features-grid {
    grid-template-columns: var(--ebhro-serv20-feat-columns-tablet) !important;
  }
  .ebhro-serv20-media-img-wrapper {
    height: 340px !important;
  }
}

@media (max-width: 640px) {
  .ebhro-serv20-features-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ebhro-serv20-feat-card {
    padding: 18px 16px !important;
    transform: none !important;
  }
  .ebhro-serv20-feat-card:nth-child(odd),
  .ebhro-serv20-feat-card:nth-child(even) {
    transform: none !important;
  }
  .ebhro-serv20-media-card {
    border-radius: 120px 120px 24px 24px !important;
    padding: 8px !important;
  }
  .ebhro-serv20-media-img-wrapper {
    border-radius: 110px 110px 20px 20px !important;
    height: 240px !important;
  }
  .ebhro-serv20-float-pill {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .ebhro-serv20-container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (max-width: 480px) {
  .ebhro-serv20-container { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
}
@media (max-width: 380px) {
  .ebhro-serv20-container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}


/* === MOBILE-COMPACT DISTRIBUTED: HERO-SERV 480 === */
@media (max-width: 480px) {
  .ebhro-serv20-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-inline: 0.75rem !important;
  }
}


/* === MOBILE-COMPACT DISTRIBUTED: HERO-SERV CTA MARGIN === */
.ebhro-serv20-hero .ebctaf20-buttons-row {
  margin-top: 0.25rem !important;
  margin-bottom: 0.15rem !important;
}


/* === MOBILE-COMPACT DISTRIBUTED: HERO-SERV 768 INLINE FIX === */
@media (max-width: 768px) {
  .ebhro-serv20-container {
    padding-inline: 0.75rem !important;
  }
}


/* === MOBILE-COMPACT DISTRIBUTED: HERO-SERV 380 INLINE FIX === */
@media (max-width: 380px) {
  .ebhro-serv20-container {
    padding-inline: 0.5rem !important;
  }
}