/* =====================================================================
   360 HOTEL SOLUTIONS — hotel-photography.css
   Page-specific styles for the Hotel Photography & Videography page.
   Reuses the global theme (tokens, header, footer, .flow-step,
   .flow-steps, .why, .results, .final-cta). Responsive at the bottom.
   ===================================================================== */

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

/* ===== HERO — camera viewfinder framing the property ===== */
.hp-hero .hero-sub{max-width:520px;}
.hp-hero .hero-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;}

.hp-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px;padding:0 30px;}
.hp-frame{width:100%;max-width:440px;position:relative;z-index:2;border-radius:20px;overflow:hidden;background:#0D1530;box-shadow:0 44px 90px -30px rgba(2,15,77,0.5);border:1px solid rgba(2,15,77,0.12);}
.hp-shot{position:relative;aspect-ratio:4/3;background:url('../images/stock/hotel-website-demo-hero.webp') center/cover;}

/* viewfinder overlay */
.hp-vf-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0.6),transparent);}
.hp-rec{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;}
.hp-rec .dot{width:9px;height:9px;border-radius:50%;background:#ff3b30;animation:hpRec 1.4s ease-in-out infinite;}
@keyframes hpRec{0%,100%{opacity:1;}50%{opacity:.25;}}
.hp-vf-spec{display:flex;gap:10px;font-size:10px;font-weight:700;opacity:.92;}
.hp-corner{position:absolute;width:26px;height:26px;border:2px solid rgba(255,255,255,0.85);}
.hp-corner.tl{top:40px;left:14px;border-right:0;border-bottom:0;border-radius:4px 0 0 0;}
.hp-corner.tr{top:40px;right:14px;border-left:0;border-bottom:0;border-radius:0 4px 0 0;}
.hp-corner.bl{bottom:44px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 4px;}
.hp-corner.br{bottom:44px;right:14px;border-left:0;border-top:0;border-radius:0 0 4px 0;}
.hp-focus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border:1.5px solid rgba(255,255,255,0.9);border-radius:6px;}
.hp-focus span{position:absolute;top:-15px;left:0;font-size:9px;font-weight:800;color:#fff;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.hp-vf-foot{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;color:#fff;font-size:10px;font-weight:700;background:linear-gradient(0deg,rgba(0,0,0,0.65),transparent);}
.hp-vf-foot .iso{display:flex;gap:9px;opacity:.9;}
.hp-drone{display:flex;align-items:center;gap:6px;color:var(--cyan);}
.hp-drone svg{width:12px;height:12px;}

/* deliverable strip under the frame */
.hp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.08);}
.hp-chip{background:#0D1530;padding:12px 6px;text-align:center;color:#fff;}
.hp-chip svg{width:17px;height:17px;color:var(--cyan);}
.hp-chip .l{font-size:9px;font-weight:700;margin-top:6px;letter-spacing:.02em;}

/* floating badges */
.hp-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;}
.hp-badge .i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hp-badge .i svg{width:15px;height:15px;}
.hp-badge .num{font-size:14px;font-weight:800;line-height:1.1;}
.hp-badge .lbl{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.hp-badge.b1{top:9%;left:-10px;animation-delay:.5s;} .hp-badge.b1 .i{background:rgba(14,99,255,0.1);color:var(--blue);}
.hp-badge.b2{bottom:8%;right:-10px;animation-delay:.9s;} .hp-badge.b2 .i{background:rgba(219,39,119,0.1);color:#db2777;}

/* ===== NAVY BAND — one shoot, every channel (reuses .why) ===== */
.hp-channels{display:flex;flex-direction:column;gap:10px;}
.hp-ch{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:13px 15px;}
.hp-ch-ico{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.07);color:var(--cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hp-ch-ico svg{width:18px;height:18px;}
.hp-ch-name{flex:1;color:#fff;font-size:13px;font-weight:700;line-height:1.25;}
.hp-ch-name small{display:block;color:var(--muted-light);font-size:11px;font-weight:500;margin-top:2px;}

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

/* ===== ENQUIRY NOTE ===== */
.hp-note{max-width:760px;margin:34px auto 0;background:var(--tint-blue);border:1px dashed rgba(14,99,255,0.35);border-radius:16px;padding:20px 24px;display:flex;align-items:flex-start;gap:14px;}
.hp-note-ico{width:38px;height:38px;border-radius:11px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hp-note-ico svg{width:19px;height:19px;}
.hp-note p{font-size:14px;color:var(--navy);line-height:1.6;margin:0;}
.hp-note p b{font-weight:800;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:920px){
  .hp-section{padding:56px 0;}
  .hp-visual{min-height:auto;padding:8px 0 0;}
  .hp-feature-grid{grid-template-columns:1fr 1fr;}
  .hp-badge.b1{left:-2px;} .hp-badge.b2{right:-2px;}
}

@media(max-width:640px){
  .hp-feature-grid{grid-template-columns:1fr;}
  .hp-badge{display:none;}
  .hp-note{flex-direction:column;gap:12px;padding:18px;}
}