/* Default Theme - Home Builder / Landing Modules
   Purpose: provide shared module styling (hero, icon cards, stats, testimonials, video banner, slider) 
   without changing Default theme layout structure.
   No box-shadow. Flat premium look via spacing, borders, typography.
*/

:root{
  --hb-radius: 16px;
  --hb-radius-sm: 12px;
  --hb-border: rgba(17,24,39,.10);
  --hb-muted: rgba(17,24,39,.70);
  --hb-muted-2: rgba(17,24,39,.55);
  --hb-bg-soft: rgba(17,24,39,.03);
  --hb-bg-soft-2: rgba(17,24,39,.06);
  --hb-black: #111827;
}

/* Generic section helpers used by shared modules */

.hb-cont{max-width: 1200px; margin: 0 auto; padding: 0 16px;}
.hb-sec--full{padding-left: 0; padding-right: 0;}

/* Buttons used by shared modules */
.hb-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; border-radius: 999px; padding: 12px 18px; border:1px solid transparent; text-decoration:none; line-height:1;}
.hb-btn--primary, .hb-btn--pri{background: var(--hb-black); color:#fff;}
.hb-btn--ghost{background: transparent; border-color: var(--hb-border); color: var(--hb-black);} 
.hb-btn--glass{background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color:#fff; backdrop-filter: blur(6px);} 
.hb-play{font-size: 12px; line-height:1;}

/* ============ HERO (shared/modules/hero.php) ============ */
.hb-hero{padding: 84px 0;}
.hb-hero__inner{max-width: 1100px; margin: 0 auto; padding: 0 16px;}
.hb-hero__title{margin:0; font-weight: 900; letter-spacing: -.02em; font-size: clamp(30px, 4.6vw, 56px); line-height:1.10; color: var(--hb-black);} 
.hb-hero__subtitle{margin: 14px 0 0; font-size: 18px; line-height:1.6; max-width: 720px; color: var(--hb-muted);} 
.hb-hero__actions{margin-top: 22px; display:flex; flex-wrap:wrap; gap:10px;}
.hb-hero--center{text-align:center;}
.hb-hero--center .hb-hero__subtitle{margin-left:auto; margin-right:auto;}
.hb-hero--center .hb-hero__actions{justify-content:center;}

/* ============ ICON CARDS + STATS + TESTIMONIALS (shared) ============ */
.hb-section{padding: 56px 0; max-width: 1200px; margin: 0 auto; padding-left:16px; padding-right:16px;}
.hb-section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom: 18px;}
.hb-title{margin:0; font-weight: 900; letter-spacing:-.01em; font-size: 26px; color: var(--hb-black);} 
.hb-subtitle{margin: 8px 0 0; color: var(--hb-muted); line-height:1.6; max-width: 760px;}

.hb-grid{display:grid; gap: 14px;}
.hb-grid--4{grid-template-columns: repeat(4, minmax(0,1fr));}
.hb-grid--3{grid-template-columns: repeat(3, minmax(0,1fr));}

@media (max-width: 1000px){
  .hb-grid--4{grid-template-columns: repeat(2, minmax(0,1fr));}
  .hb-grid--3{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .hb-grid--4, .hb-grid--3{grid-template-columns: 1fr;}
  .hb-hero{padding: 64px 0;}
}

.hb-card{border:1px solid var(--hb-border); border-radius: var(--hb-radius); background:#fff; padding: 18px;}
.hb-card__icon{font-size: 26px; line-height:1; margin-bottom: 12px;}
.hb-card__title{font-weight: 800; margin:0 0 6px; color: var(--hb-black);} 
.hb-card__text{color: var(--hb-muted); line-height:1.6;}

.hb-stat{border:1px solid var(--hb-border); border-radius: var(--hb-radius); background:#fff; padding: 18px; text-align:center;}
.hb-stat__val{font-weight: 900; letter-spacing:-.02em; font-size: 34px; color: var(--hb-black);} 
.hb-stat__lbl{margin-top: 6px; color: var(--hb-muted-2);}

.hb-quote{border:1px solid var(--hb-border); border-radius: var(--hb-radius); background:#fff; padding: 18px;}
.hb-quote__text{color: var(--hb-black); line-height: 1.7;}
.hb-quote__who{margin-top: 12px; font-weight: 800; color: var(--hb-black);} 
.hb-quote__role{font-weight: 600; color: var(--hb-muted-2); margin-left: 8px;}

.hb-empty{padding: 14px 16px; border:1px dashed var(--hb-border); border-radius: var(--hb-radius); color: var(--hb-muted); background: var(--hb-bg-soft);} 

/* ============ VIDEO BANNER (shared/modules/video_banner.php) ============ */
.vb{position: relative; border-radius: var(--hb-radius); overflow:hidden; border:0px solid var(--hb-border); background: #0b1220;}
.vb__media{position:absolute; inset:0;}
.vb__video{width:100%; height:100%; object-fit: cover; display:block;}
.vb__overlay{position:absolute; inset:0; background: linear-gradient(90deg, rgba(17,24,39,.78), rgba(17,24,39,.40));}
.vb__content{position: relative; z-index: 1; padding: 40px; max-width: 760px; color:#fff;}
.vb__kicker{display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size: 12px; opacity:.9; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);} 
.vb__title{margin: 14px 0 0; font-weight: 900; letter-spacing:-.02em; font-size: clamp(26px, 4vw, 44px); line-height:1.12;}
.vb__sub{margin: 12px 0 0; opacity:.92; line-height:1.7;}
.vb__actions{margin-top: 18px; display:flex; flex-wrap:wrap; gap:10px;}
@media (max-width: 700px){
  .vb__content{padding: 22px;}
  .vb__overlay{background: linear-gradient(180deg, rgba(17,24,39,.80), rgba(17,24,39,.55));}
}

/* ============ SLIDER STYLE 1 (s1) ============ */
:root{--s1-header-offset:180px;}
.s1{position: relative; border-radius: var(--hb-radius); overflow:hidden; border: 1px solid var(--hb-border); background: #0b1220; height: calc(100vh - var(--s1-header-offset)); min-height: 360px;}
.s1-track{display:flex; width:100%; height:100%; transition: transform .45s ease;}
.s1-slide{position: relative; min-width:100%; height: 100%;}
.s1-img{position:absolute; inset:0; width:100%; height:100%; object-fit: cover;}
.s1-ov{position:absolute; inset:0; background: linear-gradient(90deg, rgba(17,24,39,.80), rgba(17,24,39,.35));}
.s1-c{position: relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; padding: 44px; color:#fff;}
.s1-k{display:inline-flex; font-weight: 900; font-size: 12px; letter-spacing:.06em; text-transform:uppercase; opacity:.95; margin-bottom: 10px;}
.s1-t{margin:0; font-weight: 900; letter-spacing:-.02em; font-size: clamp(26px, 4vw, 48px); line-height:1.10;}
.s1-s{margin: 12px 0 0; opacity:.92; line-height:1.7;}

/* Slider text position helpers (HB: top/middle/bottom + left/center/right) */
.s1-c.s1-v-top{justify-content:flex-start; padding-top: 54px;}
.s1-c.s1-v-middle{justify-content:center;}
.s1-c.s1-v-bottom{justify-content:flex-end; padding-bottom: 54px;}

.s1-c.s1-h-left{align-items:flex-start; text-align:left;}
.s1-c.s1-h-center{align-items:center; text-align:center; margin-left:auto; margin-right:auto;}
.s1-c.s1-h-right{align-items:flex-end; text-align:right; margin-left:auto;}

/* Slider Style 1 section padding reset */
.hb-sec.hb-slider.s1 {
  padding: 0 !important;
}/* Slider base */
.hb-slider.s1 {
  position: relative;
  height: calc(100vh - 180px);
}

/* content box */
.hb-slider.s1 .s1-content {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 48px;
}

/* vertical alignment */
.hb-slider.s1 .s1-content.middle-left,
.hb-slider.s1 .s1-content.middle-center,
.hb-slider.s1 .s1-content.middle-right {
  align-items: center;
}

.hb-slider.s1 .s1-content.top-left,
.hb-slider.s1 .s1-content.top-center,
.hb-slider.s1 .s1-content.top-right {
  align-items: flex-start;
}

.hb-slider.s1 .s1-content.bottom-left,
.hb-slider.s1 .s1-content.bottom-center,
.hb-slider.s1 .s1-content.bottom-right {
  align-items: flex-end;
}

/* horizontal alignment */
.hb-slider.s1 .s1-content.middle-left,
.hb-slider.s1 .s1-content.top-left,
.hb-slider.s1 .s1-content.bottom-left {
  justify-content: flex-start;
  text-align: left;
}

.hb-slider.s1 .s1-content.middle-center,
.hb-slider.s1 .s1-content.top-center,
.hb-slider.s1 .s1-content.bottom-center {
  justify-content: center;
  text-align: center;
}

.hb-slider.s1 .s1-content.middle-right,
.hb-slider.s1 .s1-content.top-right,
.hb-slider.s1 .s1-content.bottom-right {
  justify-content: flex-end;
  text-align: right;
}
.s1-nav{position:absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background: rgba(17,24,39,.22); color:#fff; font-size: 22px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.s1-prev{left: 12px;}
.s1-next{right: 12px;}
.s1-dots{position:absolute; left:0; right:0; bottom: 14px; display:flex; gap:8px; justify-content:center; z-index: 2;}
.s1-dot{width: 10px; height: 10px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.10); cursor:pointer;}
.s1-dot.is-a{background: rgba(255,255,255,.95);} 
@media (max-width: 720px){
  .s1-c{padding: 22px;}
  :root{--s1-header-offset:180px;}
}

/* ============ SLIDER STYLE 2 (s2) - 4 tile grid like screenshot ============ */
.s2{padding: 22px 16px; margin: 0 auto;}
.s2-g{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;}
.s2-t{position: relative; display:block; border-radius: var(--hb-radius); overflow:hidden; border:1px solid var(--hb-border); background:#0b1220; min-height: 220px; text-decoration:none;}
.s2-i{position:absolute; inset:0; width:100%; height:100%; object-fit: cover;}
.s2-ov{position:absolute; inset:0; background: linear-gradient(180deg, rgba(17,24,39,.15), rgba(17,24,39,.70));}
.s2-pill{position:absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; border-radius: 999px; padding: 10px 14px; text-align:center; font-weight: 800; background: rgba(255,255,255,.92); color: var(--hb-black);} 
.s2-center{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 18px; color:#fff;}
.s2-badge{display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size: 12px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);} 
.s2-big{margin-top: 12px; font-weight: 900; letter-spacing:-.02em; font-size: 26px; line-height:1.15;}
.s2-mid{margin-top: 10px; opacity:.92; line-height:1.6; max-width: 520px;}


@media (max-width: 1100px){
  .s2-g{grid-template-columns: repeat(2, minmax(0,1fr));}
  .s2-t.is-h{grid-column: span 2; min-height: 360px;}
}
@media (max-width: 640px){
  .s2-g{grid-template-columns: 1fr;}
  .s2-t.is-h{grid-column: span 1; grid-row: span 1; min-height: 260px;}
}