/* ==========================================================================
   04 Services (#services). Boards: m11b-services-v2 (390) and d11b-services-v2 (1280), canvas v353.
   Phone (up to 767): a swipe carousel (D-165, after Blacklane): native horizontal scroll with snap, each
     card the m11b card (photo, glass caption at the .89 floor), the next card peeking in, Previous and
     Next under the track (04-services.js; hidden without it). By the hour carries its evening timeline
     (the times are page text).
   768 to 1023: the desktop cards in two columns.
   1024 up: the four desktop cards, the first and last set 40px lower, every photo floating.
   ========================================================================== */

#services{position:relative;overflow:clip}             /* the glows stay inside; only the carousel track scrolls sideways */
#services a{color:var(--blue-300)}                       /* the Services boards use blue links, not teal */
#services a:hover{color:var(--bone)}

/* Glow pools, decorative. Phone positions first (m11b), desktop below (d11b). */
.sv-glows{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sv-glow{position:absolute;border-radius:50%;filter:blur(32px)}
.sv-glow--1{left:calc(50% - 300px);top:-150px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(23,212,208,.12) 0%,rgba(0,95,214,.20) 30%,rgba(0,95,214,.08) 50%,rgba(0,95,214,0) 70%)}
.sv-glow--2,.sv-glow--3{width:520px;height:520px;
  background:radial-gradient(circle,rgba(0,95,214,.22) 0%,rgba(0,95,214,.09) 40%,rgba(0,95,214,0) 70%)}
.sv-glow--2{left:calc(50% - 525px);top:38%}
.sv-glow--3{left:calc(50% + 5px);top:72%}

.sv-wrap{position:relative;z-index:1}

/* Heading and sub-line */
.sv-h{margin:0 auto;max-width:350px;font-family:var(--font-display);font-size:30px;line-height:1.1;font-weight:700;
  letter-spacing:-.02em;text-wrap:balance;text-align:center;color:var(--bone)}
.sv-sub{margin:16px auto 0;max-width:350px;text-align:center;color:var(--muted)}

/* The cards: a carousel track on phones, a grid from 768 */
.sv-list{margin-top:40px}

/* Shared card parts */
.sv-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy-900)}
.sv-media img{display:block;width:100%;object-fit:cover;object-position:50% 50%}
.sv-title{margin:0;font-family:var(--font-display);font-size:22px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:var(--bone)}
.sv-text{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.sv-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-size:16px;font-weight:600;
  color:var(--blue-300);text-decoration:none}
.sv-link svg{flex-shrink:0}

/* The evening timeline in the By the hour card. The times are text, never baked into a photo. */
.sv-strips{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
.sv-strip{position:relative;overflow:hidden}
.sv-strip img{position:absolute;left:0;width:100%}
.sv-time{position:absolute;left:8px;top:8px;z-index:1;padding:4px 8px;border-radius:var(--radius);
  background:rgba(4,16,39,var(--glass-tint,.89));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-img);white-space:nowrap}

/* Float tempo for Services (d11b): -2.1s, -4.2s, -6.3s */
#services .float-2{animation-delay:-2.1s}
#services .float-3{animation-delay:-4.2s}
#services .float-4{animation-delay:-6.3s}

/* --------------------------------------------------------------------------
   Phone: the swipe carousel (D-165), on the shared swipe row (site.css 6i, .nv-swipe: the bleed to
   both screen edges, snap to the gutter, hidden scrollbar; the page never scrolls sideways). Here:
   each card about 84% of the content width, so the next one peeks in; one card per swipe; all four
   take the height of the tallest (flex stretch), and each photo grows to fill it.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  #services .float{animation:none}                       /* no floating photos inside a swipe track */
  /* the cards are not reveal items here: only the heading and sub-line reveal (m11b) */
  #services.nv-rv.nv-pre .sv-card.nv-it{opacity:1;transform:none}

  .sv-list{align-items:stretch;gap:16px}
  .sv-card{flex:0 0 min(84%,420px);display:flex;scroll-snap-stop:always}

  /* the card (m11b), one template for all four (D-182): panel blue, the light rim round the whole card, a photo area
     of one fixed shape (49:60 of the card's width, never grown or shrunk by its caption) fading into the panel blue
     over its last 48px, and the glass caption overlapping that fade. All four cards stretch to the tallest, and every
     caption fills the rest, so caption tops, caption heights and the link at their foot line up on all four. */
  .sv-frame{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;border-radius:var(--radius);
    overflow:hidden;background:var(--navy-900)}
  .sv-media.rim::before{content:none}                    /* the frame carries the rim here */
  .sv-media{flex:0 0 auto;aspect-ratio:49 / 60;border-radius:0}   /* 294 by 360 at 390: the photo's own shape, fixed */
  .sv-card--airport .sv-media > img,
  .sv-card--cruise .sv-media > img,
  .sv-card--corporate .sv-media > img{position:absolute;inset:0;height:100%;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}

  /* By the hour: the three evening strips share the photo area, the time on each photo (as d11b); like the
     other three photos they fade into the panel blue over their last 48px, under the caption (D-181) */
  .sv-card--hour .sv-media{display:flex;flex-direction:column}
  .sv-strips{flex:1;gap:2px;background:var(--navy);
    -webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}
  .sv-strip img{top:0;height:100%}
  /* the caption overlaps the last strip's lower 48px and that photo's car sits low (38 to 89% of its height): the
     last strip gets more room, and its photo is drawn 14% larger and lifted 14%, so the car rides up while the photo
     still runs to the foot of the area and fades into the panel blue exactly like the other three (D-182) */
  .sv-card--hour .sv-strips{grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)}
  .sv-card--hour .sv-strip:last-child img{top:-14%;height:114%}

  .sv-body{position:relative;z-index:3;flex:1 1 auto;display:flex;flex-direction:column;margin:-48px 12px 12px;padding:16px 16px 4px;
    border-radius:var(--radius);background:rgba(4,16,39,var(--glass-tint,.89));
    -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)}
  /* D-181, D-182: the hour card's caption is the same glass, padding and overlap as the other three; the link sits
     at the foot of every caption, at least 4px under the words */
  .sv-body .sv-text{margin-bottom:4px}
  .sv-body .sv-link{margin-top:auto;align-self:flex-start;align-items:flex-end;padding-bottom:10px}   /* a link that wraps (320) ends on the same line as one that does not */
  /* Previous and Next under the track: the shared .nv-swipe-ctrl (site.css 6i), driven by 04-services.js */
}

/* --------------------------------------------------------------------------
   768 up: the desktop card (d11b). Photo box on top, the words under it, no glass.
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  .sv-h{max-width:720px;font-size:var(--fs-h2)}
  .sv-sub{max-width:560px}
  .sv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;align-items:start;margin-top:48px}
  .sv-media{aspect-ratio:248 / 331}
  /* the first and last cards sit 40px lower (of 248): every photo still ends on one line */
  .sv-card--airport .sv-media,.sv-card--hour .sv-media{aspect-ratio:248 / 291;margin-top:16.129%}
  .sv-media > img{height:100%}
  .sv-strips{height:100%;gap:2px;background:var(--navy)}
  .sv-strip img{top:0;height:100%}
  .sv-body.rim::before,.sv-frame.rim::before{content:none}   /* those rims belong to the phone card only */
  .sv-title{margin-top:24px;font-size:20px;line-height:1.08}
  .sv-text{font-size:15px}
  .sv-link{font-size:15px}
}

@media (min-width:1024px){
  #services{font-size:16.64px}                            /* the desktop boards' base size */
  .sv-h{font-size:40px;line-height:1.08}
  .sv-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-inline:-2px}   /* 1064 wide at 1280, as d11b */
  .sv-glow--1{left:calc(50% - 400px);top:-120px;width:800px;height:800px}
  .sv-glow--2{left:calc(50% - 820px);top:420px;width:600px;height:600px}
  .sv-glow--3{left:calc(50% + 260px);top:380px;width:560px;height:560px}
}

@media (prefers-reduced-motion:reduce){#services .float{animation:none}}