/* 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{}
.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-bottom: 40px; padding-top: 110px;}
.hb-hero__inner{max-width: 1100px; margin: 0 auto; padding: 0 16px;}
.hb-hero__title{margin:0; text-align: center;font-weight: 900; letter-spacing: -.02em; font-size: clamp(30px, 4.6vw, 80px); line-height:1.10; color: var(--hb-black);} 
.hb-hero__subtitle{ font-size: clamp(16px, 1.6vw, 80px); line-height: 1.6; text-align: center; color: var(--hb-muted);} 
.hb-hero__actions{margin-top: 22px; display:flex; flex-wrap:wrap; gap:10px; justify-content: center;}
.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-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;}
}
/* Codecex Home Builder Banner - ecommerce clean system */
.home-section-banner{margin:22px 0}.hb-banner-grid{display:grid;gap:16px}.hb-banner-grid--style1{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-banner-grid--style2{grid-template-columns:repeat(3,minmax(0,1fr))}.hb-banner-grid--style3{grid-template-columns:repeat(4,minmax(0,1fr))}.hb-banner-grid.hb-cols-1{grid-template-columns:1fr}.hb-banner{position:relative;display:block;overflow:hidden;border:1px solid #e5e7eb;border-radius:24px;background:#fff;color:inherit;text-decoration:none;min-height:180px}.hb-banner__media{position:absolute;inset:0;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.hb-banner__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.hb-banner:hover .hb-banner__media img{transform:scale(1.035)}.hb-banner__overlay{position:relative;z-index:1;min-height:220px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;background:linear-gradient(180deg,rgba(15,23,42,0) 10%,rgba(15,23,42,.72) 100%);color:#fff}.hb-banner__title{font-size:24px;line-height:1.15;font-weight:900;max-width:520px}.hb-banner__desc{margin-top:8px;font-size:14px;line-height:1.55;max-width:560px;opacity:.92}.hb-banner__btn{margin-top:14px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#fff;color:#0f172a;padding:10px 14px;font-weight:800;font-size:13px}.hb-banner__btn:after{content:'→'}
.hb-banner-grid--style1 .hb-banner:first-child{min-height:280px}.hb-banner-grid--style1 .hb-banner:first-child .hb-banner__title{font-size:32px}.hb-style2-mosaic{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:170px}.hb-style2-mosaic .hb-banner{min-height:170px}.hb-style2-mosaic .hb-b2-1{grid-row:span 2}.hb-style2-mosaic .hb-b2-1 .hb-banner__overlay{min-height:356px}.hb-style2-flow .hb-banner__overlay{min-height:210px}.hb-banner-grid--style3 .hb-banner{min-height:260px}.hb-banner-grid--style3 .hb-banner__media{position:relative;height:170px}.hb-banner-grid--style3 .hb-banner__content,.hb-banner-grid--style3 .hb-banner__overlay{position:relative;background:#fff;color:#0f172a;min-height:auto;padding:16px}.hb-banner-grid--style3 .hb-banner__title{font-size:18px}.hb-banner-grid--style3 .hb-banner__desc{color:#64748b}.hb-banner-grid--style3 .hb-banner__btn{background:#0f172a;color:#fff}.skel-banner-fixed .skel-grid{display:grid;gap:16px}.skel-grid.cols-2{grid-template-columns:repeat(2,1fr)}.skel-grid.cols-3{grid-template-columns:repeat(3,1fr)}.skel-grid.cols-4{grid-template-columns:repeat(4,1fr)}.skel-card{border:1px solid #e5e7eb;border-radius:24px;overflow:hidden;background:#f8fafc}.skel-banner-thumb{height:220px}.skel-shimmer{background:linear-gradient(90deg,#f8fafc 25%,#e5e7eb 50%,#f8fafc 75%);background-size:200% 100%;animation:ccxShimmer 1.3s infinite}@keyframes ccxShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hb-ph{border:1px dashed #cbd5e1;border-radius:22px;background:#f8fafc;padding:24px;text-align:center}.hb-ph__badge{display:inline-flex;border:1px solid #e5e7eb;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;color:#475569;background:#fff}.hb-ph__title{margin-top:10px;font-weight:900;font-size:18px}.hb-ph__hint{margin-top:4px;color:#64748b}
@media(max-width:900px){.hb-banner-grid--style1,.hb-banner-grid--style2,.hb-banner-grid--style3,.hb-style2-mosaic{grid-template-columns:1fr}.hb-style2-mosaic{grid-auto-rows:auto}.hb-style2-mosaic .hb-b2-1{grid-row:auto}.hb-style2-mosaic .hb-b2-1 .hb-banner__overlay,.hb-banner__overlay{min-height:220px}.skel-grid.cols-2,.skel-grid.cols-3,.skel-grid.cols-4{grid-template-columns:1fr}}