/* =====================================================================
   Services — Sand & Skies Travels
   Built entirely on the tokens already defined in style.css
   (:root vars, .container 1220px, .sub-title, .sec-title, .btn, floatY)
   and on the shared .page-hero / .dest-jump / .chip rules from
   destinations.css, so this page matches the Trip pages exactly.
   Every selector below is svc-scoped — no global rule is overridden.
   ===================================================================== */

/* ---------- BAND (mirrors .trip-band spacing + glow) ---------- */
.svc-band{position:relative;padding:82px 0;overflow:hidden;scroll-margin-top:24px}
.svc-band--tint{background:var(--light)}
.svc-band::before{content:"";position:absolute;top:-160px;right:-180px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(26,134,199,.12),transparent 62%);
  pointer-events:none;z-index:0}
.svc-band--tint::before{left:-180px;right:auto}

/* ---------- CARD SHELL ---------- */
.svc-card{position:relative;z-index:1;background:#fff;border:1px solid var(--border);
  border-radius:24px;padding:20px;
  box-shadow:0 18px 44px -26px rgba(9,80,130,.45);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(26,134,199,.3);
  box-shadow:0 34px 62px -28px rgba(9,80,130,.55)}

/* ---------- MEDIA · frame, reveal, zoom, sheen ---------- */
.svc-media{position:relative}
.svc-frame{position:relative;height:380px;border-radius:20px;overflow:hidden;background:var(--light);
  box-shadow:0 30px 56px -26px rgba(9,80,130,.5)}
.svc-frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform 1.5s cubic-bezier(.19,1,.22,1)}

/* bottom scrim — same treatment as .trip-slide::after */
.svc-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(8,30,37,.45),transparent 46%)}

/* hover sheen — same idiom as .btn::before */
.svc-sheen{position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:3;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-20deg);transition:left .95s ease}
.svc-card:hover .svc-sheen{left:165%}

/* glass badge — mirrors .trip-badge */
.svc-badge{position:absolute;left:22px;top:22px;z-index:4;
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:14px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 40px -14px rgba(9,80,130,.42);
  font-family:var(--font-title);font-weight:600;font-size:15px;color:var(--heading);
  opacity:1;animation:floatY 5s ease-in-out infinite;transition:opacity .5s ease .7s}
.svc-badge i{color:var(--blue);font-size:14px}
.svc-media--rev .svc-badge{left:auto;right:22px}

/* curtain wipe — sits above everything, slides away on reveal */
.svc-frame::after{content:"";position:absolute;inset:-1px;z-index:5;pointer-events:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft) 55%,var(--blue));
  transform:translate3d(101%,0,0);
  transition:transform 1.05s cubic-bezier(.77,0,.18,1)}
.svc-media--rev .svc-frame::after{transform:translate3d(-101%,0,0)}

/* ---------- CONTENT ---------- */
.svc-content{position:relative}
.svc-content>*{position:relative;z-index:1}
.svc-num{position:absolute;top:-4px;right:0;z-index:0;pointer-events:none;
  font-family:var(--font-title);font-weight:700;font-size:104px;line-height:1;
  color:rgba(26,134,199,.1);transition:transform .5s ease,color .5s ease}
.svc-card:hover .svc-num{transform:scale(1.06) rotate(-4deg);color:rgba(26,134,199,.17)}

/* icon tile — the same glyph shown on the image badge, tying heading to photo */
.svc-tag{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.svc-tag-ico{flex-shrink:0;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  box-shadow:0 16px 30px -14px rgba(9,80,130,.7);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
.svc-card:hover .svc-tag-ico{transform:translateY(-4px) rotate(-6deg);
  box-shadow:0 22px 36px -14px rgba(9,80,130,.8)}
.svc-tag .sub-title{margin-bottom:0}

.svc-title{font-size:34px;padding:4px 0 6px}
.svc-title span{color:var(--sky)}
.svc-intro{color:var(--body-strong);font-weight:500;font-size:16.5px;line-height:1.72;margin-bottom:4px}

/* meta tiles — mirrors .trip-meta */
.svc-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 26px}
.svc-meta li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  background:var(--light);border:1px solid var(--border);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.svc-meta li:hover{transform:translateY(-4px);border-color:rgba(26,134,199,.35);
  box-shadow:0 18px 32px -18px rgba(9,80,130,.6)}
.svc-mico{flex-shrink:0;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--blue))}
.svc-mlabel{display:block;font-size:11px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;color:var(--sky)}
.svc-mvalue{display:block;font-family:var(--font-title);font-weight:600;font-size:15px;
  color:var(--heading);line-height:1.35}

/* block heading — mirrors .trip-block-title */
.svc-block{margin-top:24px}
.svc-block-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--font-title);font-size:16px;font-weight:600;color:var(--heading)}
.svc-block-title i{color:var(--sky);font-size:14px}
.svc-block-title::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--border),transparent)}

/* checklist — mirrors .trip-exp, with a staggered entrance */
.svc-list{display:grid;gap:11px}
.svc-list li{position:relative;padding-left:30px;font-size:15.2px;line-height:1.65;color:var(--body);
  opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.svc-list li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;font-size:10px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--blue))}

.svc-chips{display:flex;flex-wrap:wrap;gap:10px}

.svc-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.svc-link{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-title);font-weight:600;font-size:15px;color:var(--accent);
  transition:gap .3s ease,color .3s ease}
.svc-link i{font-size:13px;color:var(--sky);transition:color .3s ease}
.svc-link:hover{gap:14px;color:var(--blue)}
.svc-link:hover i{color:var(--blue)}

/* =====================================================================
   PRE-ANIMATION STATES
   Applied only when scripting is available (.svc-js is set on <html>
   before first paint), so the page still renders fully without JS.
   ===================================================================== */
.svc-js .svc-frame img{transform:scale(1.16)}
.svc-js .svc-frame::after,
.svc-js .svc-media--rev .svc-frame::after{transform:translate3d(0,0,0)}
.svc-js .svc-badge{opacity:0}
.svc-js .svc-list li{opacity:0;transform:translateY(14px)}

/* ---------- REVEALED STATES (AOS adds .aos-animate) ---------- */
.svc-media.aos-animate .svc-frame img{transform:scale(1)}
.svc-media.aos-animate .svc-frame::after{transform:translate3d(101%,0,0)}
.svc-media--rev.aos-animate .svc-frame::after{transform:translate3d(-101%,0,0)}
.svc-media.aos-animate .svc-badge{opacity:1}
.svc-content.aos-animate .svc-list li{opacity:1;transform:none}
.svc-content.aos-animate .svc-list li:nth-child(1){transition-delay:.16s}
.svc-content.aos-animate .svc-list li:nth-child(2){transition-delay:.26s}
.svc-content.aos-animate .svc-list li:nth-child(3){transition-delay:.36s}
.svc-content.aos-animate .svc-list li:nth-child(4){transition-delay:.46s}

/* image zoom on hover, once the reveal has settled */
.svc-card:hover .svc-media.aos-animate .svc-frame img{transform:scale(1.07);transition-duration:.9s}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Desktop: the content column sets the row height and the frame is pinned
   to fill the media column, so both columns line up top and bottom —
   the same technique used by .trip-slider on the Trip pages. */
@media (min-width:1024px){
  .svc-media{min-height:470px}
  .svc-frame{position:absolute;inset:0;height:auto}
  .svc-card{padding:24px}
}
@media (max-width:1024px){
  .svc-title{font-size:30px}
}
@media (max-width:992px){
  .svc-band{padding:60px 0}
  .svc-num{top:-2px;font-size:86px}
  .svc-frame{height:340px}
  .svc-media--rev .svc-badge{left:22px;right:auto}
}
@media (max-width:600px){
  .svc-band{padding:48px 0}
  .svc-card{padding:14px;border-radius:20px}
  .svc-card:hover{transform:none}
  .svc-frame{height:250px;border-radius:16px}
  .svc-num{display:none}
  .svc-title{font-size:26px}
  .svc-tag-ico{width:46px;height:46px;border-radius:14px;font-size:18px}
  .svc-meta{grid-template-columns:1fr}
  .svc-badge,.svc-media--rev .svc-badge{left:14px;right:auto;top:14px;padding:9px 14px;font-size:13.5px}
  .svc-actions{gap:14px}
  .svc-actions .btn{width:100%;justify-content:center}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .svc-frame img,.svc-sheen,.svc-list li,.svc-badge,.svc-card,.svc-num,.svc-tag-ico{
    transition:none!important;animation:none!important}
  .svc-js .svc-frame img,.svc-card:hover .svc-media.aos-animate .svc-frame img{transform:none!important}
  .svc-js .svc-list li{opacity:1!important;transform:none!important}
  .svc-js .svc-badge{opacity:1!important}
  .svc-frame::after{display:none}
  .svc-card:hover{transform:none}
}