/**
 * HyperDAF Core — Homepage Hero Styles
 * File Name: home-hero.css
 * Location: /wp-content/themes/hyperdaf-core/assets/css/home-hero.css
 *
 * Purpose:
 * - Styles the modular homepage hero slider.
 * - Preserves the approved desktop visual structure across desktop, tablet, and mobile.
 * - Keeps hero content and visual side-by-side on smaller screens instead of stacking.
 *
 * Responsibilities:
 * - Control homepage hero layout, spacing, typography, visual frame, and support highlights.
 * - Keep mobile/tablet rendering visually aligned with desktop composition.
 * - Prevent hero layout breakage without introducing a new mobile design.
 *
 * Related Files:
 * - /wp-content/themes/hyperdaf-core/inc/home/sections/hero.php
 *
 * Notes:
 * - This file intentionally preserves the desktop-style hero structure on tablet/mobile.
 * - Tablet/mobile keeps the same hero composition, only scaled tighter.
 * - Today badge is hidden on tablet/mobile.
 * - Support features stay in one inline swipe row on tablet/mobile.
 */

.hdaf-home-hero{padding:0 0 5px;background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);border-top:1px solid #E2E8F0;overflow:hidden}
.hdaf-home-hero .hdaf-container{overflow:hidden}
.hdaf-home-hero__slider{position:relative;overflow:hidden;width:100%;transform:translateY(-20px);padding-top:18px}
.hdaf-home-hero__track{display:flex;width:100%;transition:transform .55s ease;will-change:transform}
.hdaf-home-hero__slide{flex:0 0 100%;min-width:100%;max-width:100%;width:100%}
.hdaf-home-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(500px,620px);gap:34px;align-items:center;width:100%}
.hdaf-home-hero__content{min-width:0;padding:6px 0}
.hdaf-home-hero__eyebrow{display:block;margin:0 0 12px;color:#64748B;font-size:15px;font-weight:500;line-height:1.5}
.hdaf-home-hero__eyebrow strong{color:#16A34A;font-weight:700}
.hdaf-home-hero__label{display:inline-flex;align-items:center;justify-content:center;margin:0 0 10px;padding:6px 12px;border:1px solid #BFDBFE;border-radius:999px;background:#EFF6FF;color:#2563EB;font-size:13px;font-weight:700;line-height:1;letter-spacing:.01em}
.hdaf-home-hero__title{max-width:760px;margin:0 0 14px;line-height:1.08;font-weight:800;letter-spacing:-.03em}
.hdaf-home-hero__title-line,.hdaf-home-hero__title-accent{display:block;font-size:35px}
.hdaf-home-hero__title-line{color:#0F172A}
.hdaf-home-hero__title-accent{color:#16A34A}
.hdaf-home-hero__desc{max-width:620px;margin:0 0 20px;font-size:16px;line-height:1.68;color:#334155}
.hdaf-home-search{display:flex;align-items:center;max-width:580px;overflow:hidden;border:1px solid #D8E1EA;border-radius:12px;background:#FFFFFF;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.hdaf-home-search__input{flex:1;min-width:0;height:54px;padding:0 18px;border:0;outline:0;background:transparent;font-size:15px;color:#0F172A}
.hdaf-home-search__input::placeholder{color:#94A3B8}
.hdaf-home-search__btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:118px;height:54px;padding:0 24px;border:0;background:#2563EB;color:#FFFFFF;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s ease}
.hdaf-home-search__btn:hover{background:#1D4ED8}

.hdaf-home-hero__visual{position:relative;min-width:0;z-index:2;transform:translateY(-24px)}
.hdaf-home-hero__visual-card{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:590px;margin-left:auto;padding-top:8px}

.hdaf-home-hero__laptop{position:relative;width:100%;max-width:590px;margin-left:auto;aspect-ratio:834/518;background:url("../images/laptop for hero visual.png") center center/100% 100% no-repeat;z-index:3;overflow:visible}
.hdaf-home-hero__laptop-top,.hdaf-home-hero__laptop-camera,.hdaf-home-hero__laptop-base{display:none!important}

.hdaf-home-hero__laptop-screen{position:absolute;top:40px;left:58px;right:58px;bottom:62px;overflow:hidden;border-radius:10px;background:transparent;z-index:1}

.hdaf-home-hero__visual-image,.hdaf-home-hero__visual-fallback{position:absolute;top:10px;right:10px;bottom:10px;left:10px;width:calc(100% - 25px);height:calc(100% - 18px);margin:auto;border-radius:10px;z-index:1;box-shadow:none;border:0;outline:0}
.hdaf-home-hero__visual-image{display:block;object-fit:contain;object-position:center calc(50% + 0px);background:transparent}
.hdaf-home-hero__visual-fallback{display:flex;align-items:flex-end;justify-content:center;padding:24px;background:radial-gradient(circle at top right,#FFFFFF 0%,#F1F5F9 100%);overflow:hidden}

.hdaf-home-hero__laptop:after{content:"";position:absolute;inset:0;background:url("../images/laptop for hero visual.png") center center/100% 100% no-repeat;pointer-events:none;z-index:2}

.hdaf-home-hero__cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.72)}
.hdaf-home-hero__cloud--one{top:28px;left:26px;width:110px;height:36px}
.hdaf-home-hero__cloud--two{top:54px;right:42px;width:126px;height:40px}
.hdaf-home-hero__cloud--three{bottom:48px;left:64px;width:96px;height:32px}
.hdaf-home-hero__device-stage{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:100%;max-width:520px;margin:0 auto}
.hdaf-home-hero__device-monitor{position:relative;flex:0 1 390px;height:236px;padding:12px 12px 16px;border:6px solid #D8E1EA;border-bottom-width:12px;border-radius:18px;background:#FFFFFF}
.hdaf-home-hero__device-monitor:after{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:108px;height:14px;border-radius:999px;background:#CBD5E1}
.hdaf-home-hero__device-screen{height:100%;border-radius:12px;background:linear-gradient(180deg,#CFE4FB 0%,#EEF5FC 100%);overflow:hidden}
.hdaf-home-hero__screen-top{display:flex;align-items:center;gap:6px;height:24px;padding:0 10px;background:#F8FAFC;border-bottom:1px solid #E2E8F0}
.hdaf-home-hero__screen-top span{width:7px;height:7px;border-radius:50%;background:#CBD5E1}
.hdaf-home-hero__screen-body{display:grid;grid-template-columns:92px 1fr;gap:10px;height:calc(100% - 24px);padding:12px}
.hdaf-home-hero__screen-sidebar{border-radius:10px;background:#E8F0F8}
.hdaf-home-hero__screen-content{display:flex;flex-direction:column;gap:8px}
.hdaf-home-hero__bar{height:10px;border-radius:999px;background:#A9C8E9}
.hdaf-home-hero__bar--sm{width:38%}
.hdaf-home-hero__bar--md{width:58%}
.hdaf-home-hero__bar--lg{width:84%}
.hdaf-home-hero__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:2px}
.hdaf-home-hero__mini-card{height:62px;border-radius:12px;background:#FFFFFF;border:1px solid #DCE5EE}
.hdaf-home-hero__device-phone{position:absolute;bottom:14px;width:66px;height:136px;padding:7px;border:4px solid #D8E1EA;border-radius:20px;background:#FFFFFF}
.hdaf-home-hero__device-phone--left{left:4px}
.hdaf-home-hero__device-phone--right{right:4px}
.hdaf-home-hero__device-phone-screen{height:100%;border-radius:12px;background:linear-gradient(180deg,#D9E9F8 0%,#F3F8FC 100%);overflow:hidden}
.hdaf-home-hero__device-phone-screen:before,.hdaf-home-hero__device-phone-screen:after{content:"";display:block;margin:10px auto 0;border-radius:999px;background:#ABC8E5}
.hdaf-home-hero__device-phone-screen:before{width:72%;height:8px}
.hdaf-home-hero__device-phone-screen:after{width:58%;height:36px;border-radius:10px}
.hdaf-home-hero__leaf{position:absolute;z-index:1;width:72px;height:72px;border-radius:20px;background:linear-gradient(180deg,#DCFCE7 0%,#BBF7D0 100%);opacity:.7}
.hdaf-home-hero__leaf--left{left:-2px;bottom:18px;transform:rotate(-18deg)}
.hdaf-home-hero__leaf--right{right:2px;bottom:26px;transform:rotate(16deg)}

.hdaf-home-hero__features{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px 20px;
width:100%;
margin:-18px 0 0;
padding:16px 18px;
list-style:none;
border:1px solid #E2E8F0;
border-radius:18px;
background:#FFFFFF;
overflow:hidden;
}
.hdaf-home-hero__features li{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:0;
font-size:14px;
font-weight:600;
color:#334155;
white-space:nowrap;
}
.hdaf-home-hero__features svg,.hdaf-home-hero__features i,.hdaf-home-hero__features .hdaf-home-hero__icon{flex:0 0 18px;width:18px;height:18px;color:#16A34A}

.hdaf-home-hero__controls,.hdaf-home-hero__dots,.hdaf-home-hero__dot{display:none!important}

@media (max-width:1279px){
.hdaf-home-hero__grid{grid-template-columns:minmax(0,1fr) minmax(430px,540px);gap:26px}
.hdaf-home-hero__title-line,.hdaf-home-hero__title-accent{font-size:35px}
.hdaf-home-hero__visual{transform:translateY(-18px)}
.hdaf-home-hero__visual-card,.hdaf-home-hero__laptop{max-width:540px}
.hdaf-home-hero__laptop-screen{top:36px;left:52px;right:52px;bottom:56px}
.hdaf-home-hero__visual-image,.hdaf-home-hero__visual-fallback{top:14px;right:14px;bottom:14px;left:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.hdaf-home-hero__features{margin:-12px 0 0;gap:12px 16px;padding:14px 16px;flex-wrap:wrap;justify-content:center}
.hdaf-home-hero__features li{font-size:13px}
}

@media (max-width:1024px){
.hdaf-home-hero{padding:0 0 5px}
.hdaf-home-hero__slider{transform:translateY(-12px);padding-top:10px}
.hdaf-home-hero__grid{grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:18px}
.hdaf-home-hero__content{padding:0}
.hdaf-home-hero__eyebrow{
margin:0 0 8px;
font-size:12px;
line-height:1.35;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.hdaf-home-hero__label{display:none!important}
.hdaf-home-hero__title{max-width:none;margin-bottom:10px}
.hdaf-home-hero__title-line,.hdaf-home-hero__title-accent{font-size:27px;line-height:1.1}
.hdaf-home-hero__desc{
max-width:none;
margin-bottom:12px;
font-size:13px;
line-height:1.45;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.hdaf-home-search{max-width:none}
.hdaf-home-hero__visual{transform:translateY(-8px)}
.hdaf-home-hero__visual-card,.hdaf-home-hero__laptop{max-width:460px;margin-left:auto}
.hdaf-home-hero__laptop-screen{top:32px;left:46px;right:46px;bottom:50px}
.hdaf-home-hero__visual-image,.hdaf-home-hero__visual-fallback{top:12px;right:12px;bottom:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.hdaf-home-hero__features{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
margin:0;
padding:12px 14px;
border-radius:16px;
overflow-x:auto;
overflow-y:hidden;
flex-wrap:nowrap;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.hdaf-home-hero__features::-webkit-scrollbar{display:none}
.hdaf-home-hero__features li{
flex:0 0 auto;
gap:8px;
font-size:11px;
white-space:nowrap;
}
.hdaf-home-hero__features svg,
.hdaf-home-hero__features i,
.hdaf-home-hero__features .hdaf-home-hero__icon{
flex:0 0 14px;
width:14px;
height:14px;
}
}

@media (max-width:767px){
.hdaf-home-hero{padding:6px 0 5px}
.hdaf-home-hero__slider{transform:none;padding-top:0}
.hdaf-home-hero__grid{grid-template-columns:minmax(0,1fr) minmax(180px,40%);gap:12px;align-items:center}
.hdaf-home-hero__content{padding:0}
.hdaf-home-hero__eyebrow{
margin:0 0 6px;
font-size:10px;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.hdaf-home-hero__label{display:none!important}
.hdaf-home-hero__title{max-width:none;margin-bottom:8px}
.hdaf-home-hero__title-line,.hdaf-home-hero__title-accent{font-size:19px;line-height:1.1}
.hdaf-home-hero__desc{
max-width:none;
margin-bottom:10px;
font-size:12px;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.hdaf-home-search{
flex-direction:column;
align-items:stretch;
max-width:none;
border-radius:14px;
}
.hdaf-home-search__input{height:44px;padding:0 12px;font-size:13px}
.hdaf-home-search__btn{width:100%;min-width:0;height:42px;font-size:13px}
.hdaf-home-hero__visual{transform:none}
.hdaf-home-hero__visual-card{padding-top:0}
.hdaf-home-hero__laptop{max-width:100%;margin-left:auto}
.hdaf-home-hero__laptop-screen{top:18px;left:24px;right:24px;bottom:26px;border-radius:6px}
.hdaf-home-hero__visual-image,.hdaf-home-hero__visual-fallback{top:7px;right:7px;bottom:7px;left:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:6px}
.hdaf-home-hero__visual-fallback{padding:12px}
.hdaf-home-hero__device-monitor{flex-basis:100%;height:124px;padding:8px 8px 10px;border-width:4px;border-bottom-width:7px}
.hdaf-home-hero__device-monitor:after{bottom:-14px;width:68px;height:8px}
.hdaf-home-hero__screen-top{height:18px;padding:0 8px}
.hdaf-home-hero__screen-top span{width:5px;height:5px}
.hdaf-home-hero__screen-body{grid-template-columns:50px 1fr;gap:6px;padding:6px;height:calc(100% - 18px)}
.hdaf-home-hero__bar{height:7px}
.hdaf-home-hero__mini-card{height:32px;border-radius:8px}
.hdaf-home-hero__device-phone{display:none}
.hdaf-home-hero__cloud--one,.hdaf-home-hero__cloud--two,.hdaf-home-hero__cloud--three{transform:scale(.58)}
.hdaf-home-hero__features{
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
margin-top:10px;
padding:10px 12px;
overflow-x:auto;
overflow-y:hidden;
flex-wrap:nowrap;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.hdaf-home-hero__features::-webkit-scrollbar{display:none}
.hdaf-home-hero__features li{
flex:0 0 auto;
gap:6px;
font-size:10px;
font-weight:700;
white-space:nowrap;
}
.hdaf-home-hero__features svg,
.hdaf-home-hero__features i,
.hdaf-home-hero__features .hdaf-home-hero__icon{
flex:0 0 12px;
width:12px;
height:12px;
}
}

@media (max-width:479px){
.hdaf-home-hero__grid{grid-template-columns:minmax(0,1fr) 34%;gap:8px}
.hdaf-home-hero__eyebrow{font-size:9px}
.hdaf-home-hero__title-line,.hdaf-home-hero__title-accent{font-size:16px}
.hdaf-home-hero__desc{
font-size:11px;
line-height:1.35;
-webkit-line-clamp:3;
}
.hdaf-home-search__input{height:42px;font-size:12px}
.hdaf-home-search__btn{height:40px;font-size:12px}
.hdaf-home-hero__laptop-screen{top:14px;left:18px;right:18px;bottom:20px}
.hdaf-home-hero__visual-image,.hdaf-home-hero__visual-fallback{top:6px;right:6px;bottom:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.hdaf-home-hero__features{padding:10px}
.hdaf-home-hero__features li{font-size:9px}
.hdaf-home-hero__features svg,
.hdaf-home-hero__features i,
.hdaf-home-hero__features .hdaf-home-hero__icon{
flex:0 0 11px;
width:11px;
height:11px;
}
}