/* =====================================================================
   360 HOTEL SOLUTIONS — hotel-website.css
   Page-specific styles for the Hotel Website solution page.
   Reuses the global theme in style.css (tokens, header, footer,
   .flow-step, .service-card, .results, .final-cta, etc.).
   Responsive rules live at the bottom of this file.
   ===================================================================== */

/* ===== GENERIC SUB-PAGE SECTION ===== */
.hw-section{padding:90px 0;background:var(--white);}
.hw-section.tint-cyan{background:var(--tint-cyan);}
.hw-section.tint-purple{background:var(--tint-purple);}

/* ===== HERO — browser mockup of a hotel website ===== */
.hw-hero .hero-sub{max-width:500px;}
/* feature pills as a 2x2 grid on desktop (mobile.css already makes them 2x2) */
.hw-hero .hero-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px;}
.hw-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:460px;padding:0 8px;}

.browser{width:100%;max-width:560px;background:#fff;border-radius:16px;border:1px solid var(--gray);box-shadow:0 44px 90px -32px rgba(2,15,77,0.45);overflow:hidden;position:relative;z-index:2;}
.browser-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg);border-bottom:1px solid var(--gray);}
.browser-dots{display:flex;gap:6px;flex-shrink:0;}
.browser-dots span{width:10px;height:10px;border-radius:50%;display:block;}
.browser-dots .r{background:#FF5F57;} .browser-dots .y{background:#FEBC2E;} .browser-dots .g{background:#28C840;}
.browser-url{flex:1;background:#fff;border:1px solid var(--gray);border-radius:8px;padding:6px 12px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.browser-url svg{width:11px;height:11px;color:#16A34A;flex-shrink:0;}

.browser-body{position:relative;}
.hw-site-hero{position:relative;height:300px;display:flex;flex-direction:column;}
.hw-site-bg{position:absolute;inset:0;background:url('../images/stock/hotel-website-demo-hero.webp') center/cover;}
.hw-site-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,15,77,0.28) 0%,rgba(2,15,77,0.68) 100%);}
.hw-site-nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;color:#fff;}
.hw-site-logo{font-size:14px;font-weight:800;letter-spacing:-0.02em;}
.hw-site-menu{display:flex;gap:14px;font-size:11px;font-weight:600;opacity:.92;}
.hw-site-center{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 20px 22px;}
.hw-site-eyebrow{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;opacity:.85;margin-bottom:8px;}
.hw-site-title{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-0.02em;}
.hw-site-sub{font-size:11.5px;opacity:.9;margin-top:7px;}

/* in-mock booking search bar */
.hw-bookbar{position:relative;z-index:2;margin:-26px 18px 0;background:#fff;border-radius:14px;box-shadow:0 18px 40px -16px rgba(2,15,77,0.32);display:grid;grid-template-columns:1fr 1fr 0.9fr auto;overflow:hidden;border:1px solid var(--gray);}
.hw-bb-field{padding:10px 14px;border-right:1px solid var(--gray);}
.hw-bb-field .l{font-size:8.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-light);font-weight:700;}
.hw-bb-field .v{font-size:12px;font-weight:700;color:var(--navy);margin-top:3px;}
.hw-bb-btn{background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;padding:0 18px;font-size:12px;font-weight:700;gap:6px;}
.hw-bb-btn svg{width:14px;height:14px;}

.hw-site-foot{padding:18px;display:flex;gap:8px;}
.hw-site-card{flex:1;height:50px;border-radius:8px;background:var(--bg);border:1px solid var(--gray);}

/* floating stat badges over the mockup — reuse global float-in keyframe */
.hw-badge{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 16px 36px -12px rgba(2,15,77,0.26);display:flex;align-items:center;gap:9px;white-space:nowrap;opacity:0;animation:float-in .6s ease forwards;}
.hw-badge .i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hw-badge .i svg{width:15px;height:15px;}
.hw-badge .num{font-size:15px;font-weight:800;line-height:1;}
.hw-badge .lbl{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.hw-badge.b1{top:9%;left:-8px;animation-delay:.5s;} .hw-badge.b1 .i{background:rgba(37,211,102,0.12);color:#25D366;}
.hw-badge.b2{bottom:7%;right:-8px;animation-delay:.9s;} .hw-badge.b2 .i{background:rgba(123,46,255,0.1);color:var(--purple);}

/* ===== FEATURE GRID (reuses .flow-step card styling) ===== */
.hw-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* ===== ALTERNATING FEATURE ROWS ===== */
.feature-rows{display:flex;flex-direction:column;gap:64px;}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;}
.feature-row.flip .fr-text{order:2;}
.fr-text h3{font-size:clamp(22px,2.6vw,28px);line-height:1.25;margin-bottom:14px;}
.fr-text p{color:var(--muted);font-size:15.5px;line-height:1.7;}
.fr-list{display:flex;flex-direction:column;gap:11px;margin-top:20px;}
.fr-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--navy);font-weight:500;}
.fr-list .ck{width:22px;height:22px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.fr-list .ck svg{width:12px;height:12px;color:#fff;}

.fr-media{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--gray);box-shadow:0 30px 64px -30px rgba(2,15,77,0.32);min-height:320px;background-size:cover;background-position:center;}
.fr-media::after{content:'';position:absolute;inset:0;background:linear-gradient(150deg,rgba(2,15,77,0.10) 0%,rgba(14,99,255,0.28) 100%);}
.fr-media .fr-tag{position:absolute;z-index:1;left:16px;bottom:16px;background:rgba(255,255,255,0.94);backdrop-filter:blur(6px);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
.fr-media .fr-tag .d{width:8px;height:8px;border-radius:50%;background:#16A34A;flex-shrink:0;}
.fm-1{background-image:url('../images/stock/hotel-website-direct-booking-feature.webp');}
.fm-2{background-image:url('../images/stock/hotel-website-mobile-first-feature.webp');}
.fm-3{background-image:url('../images/stock/hotel-website-google-rates-feature.webp');}
.fm-4{background-image:url('../images/stock/hotel-website-direct-traffic-feature.webp');}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1024px){
  .hw-feature-grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:920px){
  .hw-section{padding:56px 0;}
  .hw-visual{min-height:auto;width:100%;max-width:520px;margin:0 auto;padding:8px 0 0;}
  .browser{max-width:460px;}
  .hw-feature-grid{grid-template-columns:1fr 1fr;}
  .feature-rows{gap:44px;}
  .feature-row{grid-template-columns:1fr;gap:22px;}
  .feature-row .fr-text{order:1 !important;}
  .feature-row .fr-media{order:2 !important;min-height:240px;}
  .hw-badge.b1{left:0;} .hw-badge.b2{right:0;}
}

@media(max-width:640px){
  .hw-feature-grid{grid-template-columns:1fr;}
  .hw-site-title{font-size:22px;}
  .hw-badge{display:none;}
  .hw-bb-field .l{font-size:8px;}
}