/* ============================================================
   HÒA CƯỜNG — Pexels image integration
   Adds banner images to about/contact/stub pages + section bg overlays
   ============================================================ */

/* ── 1. Page hero banner (about, contact, stubs) ── */
.hc-page-hero {
  position: relative;
  height: clamp(180px, 26vw, 320px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 32px;
  overflow: hidden;
}
.hc-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 77, 140, 0.78) 0%, rgba(13, 77, 140, 0.55) 100%);
}
.hc-page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 16px;
}
.hc-page-hero h1 {
  color: #fff !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  text-align: center !important;
}
.hc-page-hero h1::after {
  display: none !important;
}
.hc-page-hero p {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: clamp(14px, 1.4vw, 17px) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.hc-page-hero-content .hc-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.hc-page-hero-content .hc-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.hc-page-hero-content .hc-breadcrumb a:hover { color: #ff8a1a; }

/* Pre-defined backgrounds for specific pages */
.hc-page-hero.bg-about {
  background-image: url('/assets/custom/img/about-team.webp'),
                    url('/assets/custom/img/about-team.jpg');
}
.hc-page-hero.bg-contact {
  background-image: url('/assets/custom/img/contact-showroom.webp'),
                    url('/assets/custom/img/contact-showroom.jpg');
}
.hc-page-hero.bg-promo {
  background-image: url('/assets/custom/img/promo-banner.webp'),
                    url('/assets/custom/img/promo-banner.jpg');
}
.hc-page-hero.bg-news {
  background-image: url('/assets/custom/img/news-banner.webp'),
                    url('/assets/custom/img/news-banner.jpg');
}
.hc-page-hero.bg-showroom {
  background-image: url('/assets/custom/img/hero-showroom.webp'),
                    url('/assets/custom/img/hero-showroom.jpg');
}

/* ── 2. Category section subtle background (homepage) ── */
body.home .section.category-section {
  position: relative;
}

/* Add tinted thumb image to section title — small visual cue */
body.home .section.category-section .section-title-container::before {
  content: "";
  display: block;
  height: 6px;
  width: 60px;
  background: linear-gradient(90deg, #ff6a00, #c8102e);
  margin: 0 auto 12px;
  border-radius: 3px;
}

/* ── 3. About page restyle when has hc-page-hero ── */
body:not(.home) .hc-page-hero + #content,
body:not(.home) .hc-page-hero + .container,
body:not(.home) #content:has(+ .hc-page-hero) {
  padding-top: 0 !important;
}

/* Hide the old plain page-title section when hc-page-hero present */
body:has(.hc-page-hero) .page-title:not(.hc-page-hero),
body:has(.hc-page-hero) > main > .page-title-section {
  display: none !important;
}

/* ── 4. Floating quote card overlay for hero ── */
.hc-page-hero-cta {
  margin-top: 16px;
}
.hc-page-hero-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #ff8a00, #ff6a00);
  color: #fff !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(255, 106, 0, 0.35);
  transition: transform 180ms;
}
.hc-page-hero-cta a:hover {
  transform: translateY(-1px);
}