/* ============================================================================
   SERVICE HERO COMPONENT — THEME 2: LUXURY OBSIDIAN & CENTERED GOLD
   Prefix: ebhro-serv20
   ============================================================================ */

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

:root {
  /* ===== COLORS ===== */
  --ebhro-serv20-bg: #faf8f5;
  --ebhro-serv20-text-primary: #1c1917;
  --ebhro-serv20-text-secondary: #57534e;
  --ebhro-serv20-text-muted: #78716c;

  --ebhro-serv20-primary: #b89020;
  --ebhro-serv20-primary-hover: #8c6d1d;
  --ebhro-serv20-primary-light: rgba(184, 144, 32, 0.08);
  --ebhro-serv20-primary-border: rgba(184, 144, 32, 0.4);
  /* Solid, darker-than-primary badge background so white badge text/icon
     has real contrast — #b89020 itself is too light for white text on it.
     Reuses the existing --primary-hover token rather than a new hardcoded color. */
  --ebhro-serv20-badge-bg: var(--ebhro-serv20-primary-hover);

  --ebhro-serv20-accent-gradient: linear-gradient(135deg, #b89020 0%, #d4af37 50%, #8c6d1d 100%);
  --ebhro-serv20-gold-accent: #c5a059;

  --ebhro-serv20-card-bg: #ffffff;
  --ebhro-serv20-card-border: rgba(184, 144, 32, 0.25);

  /* ===== BORDER ===== */
  --ebhro-serv20-radius-sm: 0px;
  --ebhro-serv20-radius-md: 0px;
  --ebhro-serv20-radius-lg: 0px;
  --ebhro-serv20-radius-full: 0px;

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

  /* ===== LAYOUT (OVERRIDES) ===== */
  --ebhro-serv20-grid-max: 900px;
  --ebhro-serv20-grid-margin: 0 auto 40px auto;
  --ebhro-serv20-text-col-margin-bottom: 28px;
  --ebhro-serv20-desc-max: 750px;

  /* ===== HIGHLIGHTS (OVERRIDES) ===== */
  --ebhro-serv20-hl-flex: row;
  --ebhro-serv20-hl-justify: center;
  --ebhro-serv20-hl-gap: 24px;
  --ebhro-serv20-hl-padding: 12px 24px;
  --ebhro-serv20-hl-bg: rgba(184, 144, 32, 0.05);
  --ebhro-serv20-hl-border-top: 1px solid rgba(184, 144, 32, 0.2);
  --ebhro-serv20-hl-border-bottom: 1px solid rgba(184, 144, 32, 0.2);
  --ebhro-serv20-hl-margin-bottom: 20px;

  /* ===== MEDIA CARD (OVERRIDES) ===== */
  --ebhro-serv20-media-max: 820px;
  --ebhro-serv20-media-radius: 0px;
  --ebhro-serv20-media-padding: 14px;
  --ebhro-serv20-media-bg: #ffffff;
  --ebhro-serv20-media-border: 1px solid #b89020;
  --ebhro-serv20-media-shadow: 0 20px 50px rgba(184, 144, 32, 0.1);

  /* ===== CORNER ACCENT ===== */
  --ebhro-serv20-corner-size: 20px;
  --ebhro-serv20-corner-border: 2px solid #b89020;
  --ebhro-serv20-corner-offset: -6px;

  /* ===== IMAGE ===== */
  --ebhro-serv20-img-height: 380px;
  --ebhro-serv20-img-radius: 0px;

  /* ===== FLOAT PILL ===== */
  --ebhro-serv20-pill-radius: 0px;
  --ebhro-serv20-pill-bg: #1c1917;
  --ebhro-serv20-pill-border: 1px solid #b89020;

  /* ===== FEATURES GRID (OVERRIDES) ===== */
  --ebhro-serv20-feat-columns: repeat(2, 1fr);
  --ebhro-serv20-feat-gap: 24px;

  /* ===== FEATURE CARD (OVERRIDES) ===== */
  --ebhro-serv20-feat-radius: 0px;
  --ebhro-serv20-feat-bg: #ffffff;
  --ebhro-serv20-feat-border: 1px solid rgba(184, 144, 32, 0.25);
  --ebhro-serv20-feat-accent-width: 4px;
  --ebhro-serv20-feat-accent-color: #b89020;
  --ebhro-serv20-feat-padding: 28px 24px;
  --ebhro-serv20-feat-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);

  --ebhro-serv20-feat-hover-translate: translateY(-5px);
  --ebhro-serv20-feat-hover-border: #b89020;
  --ebhro-serv20-feat-hover-shadow: 0 15px 35px rgba(184, 144, 32, 0.15);

  /* ===== FEATURE ICON (OVERRIDES) ===== */
  --ebhro-serv20-icon-radius: 0px;
  --ebhro-serv20-icon-bg: rgba(184, 144, 32, 0.08);
  --ebhro-serv20-icon-color: #b89020;
  --ebhro-serv20-icon-border: 1px solid rgba(184, 144, 32, 0.25);
  --ebhro-serv20-icon-size: 50px;
  --ebhro-serv20-icon-margin-bottom: 16px;

  /* ===== FEATURE TEXT (OVERRIDES) ===== */
  --ebhro-serv20-feat-title-size: 1.2rem;
  --ebhro-serv20-feat-title-margin: 10px;
  --ebhro-serv20-feat-desc-size: 0.95rem;
  --ebhro-serv20-feat-desc-height: 1.7;
}

/* Single Column Centered Layout */
.ebhro-serv20-grid {
  grid-template-columns: 1fr !important;
  max-width: var(--ebhro-serv20-grid-max);
  margin: var(--ebhro-serv20-grid-margin) !important;
  text-align: center;
}

.ebhro-serv20-text-col {
  align-items: center !important;
  text-align: center !important;
  margin-bottom: var(--ebhro-serv20-text-col-margin-bottom);
}

.ebhro-serv20-desc {
  max-width: var(--ebhro-serv20-desc-max) !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Centered Highlights */
.ebhro-serv20-highlights-list {
  flex-direction: var(--ebhro-serv20-hl-flex) !important;
  justify-content: var(--ebhro-serv20-hl-justify) !important;
  flex-wrap: wrap;
  gap: var(--ebhro-serv20-hl-gap) !important;
  padding: var(--ebhro-serv20-hl-padding);
  background: var(--ebhro-serv20-hl-bg);
  border-top: var(--ebhro-serv20-hl-border-top);
  border-bottom: var(--ebhro-serv20-hl-border-bottom);
  margin-bottom: var(--ebhro-serv20-hl-margin-bottom) !important;
}

.ebhro-serv20-cta-row {
  justify-content: center !important;
}

/* Media Card with Gold Corner Accents */
.ebhro-serv20-visual-col {
  width: 100%;
}

.ebhro-serv20-media-card {
  max-width: var(--ebhro-serv20-media-max) !important;
  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;
  position: relative;
}

.ebhro-serv20-media-card::before,
.ebhro-serv20-media-card::after {
  content: '';
  position: absolute;
  width: var(--ebhro-serv20-corner-size);
  height: var(--ebhro-serv20-corner-size);
  border: var(--ebhro-serv20-corner-border);
  z-index: 10;
}
.ebhro-serv20-media-card::before { top: var(--ebhro-serv20-corner-offset); right: var(--ebhro-serv20-corner-offset); border-left: none; border-bottom: none; }
.ebhro-serv20-media-card::after { bottom: var(--ebhro-serv20-corner-offset); left: var(--ebhro-serv20-corner-offset); border-right: none; border-top: none; }

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

.ebhro-serv20-float-card {
  display: none !important;
}

.ebhro-serv20-float-pill {
  border-radius: var(--ebhro-serv20-pill-radius) !important;
  background: var(--ebhro-serv20-pill-bg) !important;
  border: var(--ebhro-serv20-pill-border) !important;
}

/* Features Grid */
.ebhro-serv20-features-grid {
  grid-template-columns: var(--ebhro-serv20-feat-columns) !important;
  gap: var(--ebhro-serv20-feat-gap) !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;
  border-right: var(--ebhro-serv20-feat-accent-width) solid var(--ebhro-serv20-feat-accent-color) !important;
  padding: var(--ebhro-serv20-feat-padding) !important;
  box-shadow: var(--ebhro-serv20-feat-shadow) !important;
}

.ebhro-serv20-feat-card:hover {
  transform: var(--ebhro-serv20-feat-hover-translate) !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;
  background: var(--ebhro-serv20-icon-bg) !important;
  color: var(--ebhro-serv20-icon-color) !important;
  border: var(--ebhro-serv20-icon-border) !important;
  width: var(--ebhro-serv20-icon-size) !important;
  height: var(--ebhro-serv20-icon-size) !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;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .ebhro-serv20-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ebhro-serv20-media-img-wrapper {
    height: 320px !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;
  }
  .ebhro-serv20-media-card {
    padding: 8px !important;
  }
  .ebhro-serv20-media-img-wrapper {
    height: 220px !important;
  }
  .ebhro-serv20-highlights-list {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 16px !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;
  }
}