/* Mobile Floating Type: wider photography, readable HTML and CSS-only depth.
   The established tablet/desktop layout starts at 681px and stays untouched. */
.services-open .sp-mobile-only { display: none; }

@media (max-width: 680px) {
  .services-open .sp-card {
    --sp-card-surface: radial-gradient(ellipse at 95% 0, #14355c, transparent 62%), #091529;
    display: flex; flex-direction: column; gap: 0;
    padding: 18px 18px 10px; border-radius: 22px;
    background: var(--sp-card-surface); border-color: #325f83;
    box-shadow: inset 0 1px 0 #80dfff18, 0 12px 28px #02071040;
  }
  .services-open .sp-card.featured {
    --sp-card-surface: radial-gradient(ellipse at 85% 0, #143b64, transparent 65%), #091529;
    border-color: #41c5e9;
  }
  .services-open .sp-card[data-service="mastery120"],
  .services-open .sp-card[data-service="class5sim"] {
    --sp-card-surface: radial-gradient(ellipse at 95% 0, #223456, transparent 68%), #0c162b;
    border-color: #5968a4;
  }
  .services-open .sp-grid,
  .services-open #sp-testprep .sp-grid,
  .services-open #sp-specialty .sp-grid { gap: 42px; }
  .services-open .sp-section-heading { margin-bottom: 40px; }
  .services-open .sp-section-note { margin-bottom: 40px; }

  /* One continuous photographic surface. The bottom fades before body copy. */
  .services-open .sp-card .sp-card-art {
    position: relative; flex: 0 0 168px; height: 168px;
    width: calc(100% + 36px); margin: -18px -18px -10px;
    align-self: auto; transform: none; grid-area: auto;
  }
  .services-open .sp-card-art::before { inset: 0; border-radius: 22px 22px 0 0; }
  .services-open .sp-card .sp-art-scene .sp-scene-object {
    inset: 0; width: 100%; height: 190px; overflow: hidden;
    border-radius: 22px 22px 0 0;
    mask-image: linear-gradient(to bottom, #000 48%, #000c 64%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 48%, #000c 64%, transparent 100%);
  }
  .services-open .sp-card .sp-art-scene .sp-art-motion { border-radius: 0; transform: none; }
  .services-open .sp-card .sp-art-scene img,
  .services-open .sp-card .sp-focus-slide:not(.sp-focus-parallel) img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center 54%; transform: none;
    mask-image: none; -webkit-mask-image: none; filter: none;
  }
  .services-open .sp-card .sp-art-core img { object-position: center 62%; }
  .services-open .sp-card .sp-art-defensive img { object-position: center 48%; }
  .services-open .sp-card-intro {
    position: relative; z-index: 1; display: block; min-height: 0;
    align-self: auto; padding: 0; margin: 0 0 9px;
  }
  .services-open .sp-card h3 {
    font-size: clamp(1.35rem, 5.7vw, 1.6rem); line-height: 1.16;
    letter-spacing: -.035em; margin: 0 0 6px; overflow-wrap: normal;
  }
  .services-open .sp-card .sp-duration { margin: 0; font-size: .82rem; line-height: 1.4; }
  .services-open .sp-card > p { font-size: .92rem; line-height: 1.5; margin: 0 0 12px; flex-grow: 0; }
  .services-open .sp-card .sp-card-head { margin: auto 0 12px; padding-top: 9px; border-top-color: #b4d0df1a; }
  .services-open .sp-price { font-size: 2.15rem; line-height: 1.12; font-weight: 800; }
  .services-open .sp-price-gst { font-size: .73rem; margin-left: 7px; }
  .services-open .sp-cta-group { gap: 2px; align-self: stretch; align-items: stretch; }
  .services-open .sp-card .sp-btn {
    width: 100%; min-height: 46px; border-radius: 12px; padding: 10px 14px;
    background: linear-gradient(110deg, #00d4ef, #23b6ff); color: #041527;
    border-color: #51daff; box-shadow: inset 0 1px 0 #e6fbff50;
  }
  .services-open .sp-card .sp-btn::after { content: none; }
  .services-open .sp-card .sp-btn:hover { background: #8ceaff; }
  .services-open .sp-card .sp-btn:focus-visible,
  .services-open .sp-details-link:focus-visible { outline: 2px solid #f4f8ff; outline-offset: 4px; }
  .services-open .sp-card .sp-details-link { width: 100%; min-height: 44px; font-size: .8rem; justify-content: center; }
  .services-open .sp-card > .sp-unavailable-msg { margin: 4px 0 8px; font-size: .84rem; }

  /* Decorative tokens stay separate from real duration, title and price text. */
  .services-open .sp-mobile-token,
  .services-open .sp-card .sp-number-object,
  .services-open [data-service="class5sim"] .sp-license-object {
    display: block; position: absolute; z-index: 3;
    top: -29px; right: 20px; width: auto; height: auto;
    transform: rotate(-8deg); pointer-events: none; user-select: none;
  }
  .services-open .sp-mobile-token > span,
  .services-open .sp-card .sp-art-number,
  .services-open [data-service="class5sim"] .sp-license-plate {
    display: block; font-size: 5.8rem; line-height: 1; font-weight: 900;
    letter-spacing: -.075em; color: #b7eaff;
    text-shadow: 1px 2px #70baf0, 2px 4px #5798d2, 3px 6px #3966af,
                 4px 8px #344fac, 5px 10px #413e8f, 6px 12px #362868,
                 0 16px 20px #02071499;
  }
  .services-open .sp-mobile-token small {
    display: block; width: fit-content; margin: -1px 0 0 auto;
    padding: 2px 7px 3px; color: #e8f8ff; background: linear-gradient(120deg,#207cdc,#38398e);
    border: 1px solid #83cfff66; border-radius: 4px; font-size: .85rem; font-weight: 800;
    line-height: 1; letter-spacing: -.025em; box-shadow: 2px 3px #25266b;
  }
  .services-open .sp-card .sp-art-mastery::before,
  .services-open .sp-card .sp-art-license::before {
    opacity: 1; height: 190px;
    background: url('/assets/images/services/mastery-daylight.webp') center 60% / cover no-repeat;
    mask-image: linear-gradient(to bottom, #000 40%, #000b 64%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, #000b 64%, transparent 100%);
  }
  .services-open .sp-card .sp-art-mastery .sp-art-route,
  .services-open .sp-card .sp-art-license .sp-art-check,
  .services-open [data-service="class7sim"] .sp-license-object { display: none; }
  .services-open .sp-card .sp-art-number { font-size: 5.35rem; }
  .services-open .sp-card:is(:hover, :focus-within) .sp-art-mastery::before,
  .services-open .sp-card:is(:hover, :focus-within) .sp-art-license::before { opacity: 1; }
  .services-open [data-service="class5sim"] .sp-license-plate {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    width: auto; height: auto; font-size: 6.6rem;
  }
  .services-open [data-service="class5sim"] .sp-license-plate::after { content: none; }
  .services-open [data-service="class5sim"] .sp-art-license::before {
    background-image: url('/assets/images/services/class5-driver-view.webp');
    background-position: center 40%;
  }
  .services-open [data-service="class7sim"] .sp-art-license::before {
    background-image: url('/assets/images/services/focus-pullover-v4.webp');
    background-position: center 56%;
  }
  .services-open .sp-mobile-licences {
    display: flex; align-items: center; gap: 7px; position: absolute; z-index: 3;
    top: -22px; right: 17px; pointer-events: none; user-select: none;
  }
  .services-open .sp-learner-sign,
  .services-open .sp-novice-sign {
    display: grid; place-items: center; width: 59px; height: 66px;
    border: 3px solid #f4f8ff; border-radius: 7px;
    background: linear-gradient(125deg,#ff4055,#c9132e); color: #fff;
    font-size: 3.1rem; font-weight: 850; line-height: 1;
    box-shadow: 2px 3px #18364e, 4px 6px #071e32, 0 10px 18px #02071088;
    transform: rotate(-12deg);
  }
  .services-open .sp-novice-sign { width: 51px; height: 57px; font-size: 2.6rem; background: linear-gradient(125deg,#26b584,#07784d); transform: rotate(9deg); margin-top: 22px; }
  .services-open .sp-licence-arrow { color: #b7f5ff; font-size: 1.65rem; text-shadow: 0 0 8px #00d4ff88; }
  .services-open .sp-newcomer-label {
    display: inline-block; width: fit-content; margin: -3px 0 8px; padding: 3px 9px;
    border: 1px solid #4ecff3; border-radius: 20px; background: #091e35;
    color: #8ae7ff; font-size: .7rem; line-height: 1.35; font-weight: 650;
  }
  .services-open .sp-card .sp-snow-object { width: 154px; height: 154px; top: -28px; right: 28px; transform: rotate(12deg); }
  .services-open .sp-art-snowflake::after { width: 160px; height: 130px; top: 12px; right: 30px; }

  /* Preserve the live gallery while keeping its caption and 44px controls compact. */
  .services-open .sp-focus-gallery { display: block; width: 100%; margin: 0 0 10px; }
  .services-open .sp-focus-gallery .sp-card-art { margin-bottom: -13px; }
  .services-open .sp-card .sp-parking-view { width: 112%; height: auto; aspect-ratio: 3 / 2; left: -6%; top: -12%; mask-image: none; -webkit-mask-image: none; }
  .services-open .sp-gallery-toolbar { display: flex; grid-area: auto; min-height: 48px; height: 48px; margin: 0; gap: 6px; }
  .services-open .sp-gallery-meta { font-size: .7rem; line-height: 1.3; }
  .services-open .sp-gallery-count { font-size: .62rem; margin-top: 2px; }
  .services-open .sp-gallery-controls { gap: 2px; }
  .services-open .sp-gallery-controls button { width: 44px; height: 44px; background: #091d33; border-color: #365572; }
  .services-open .sp-card.unavailable .sp-mobile-token { opacity: .5; }
}

/* Give landscape phones enough image height to keep the full car in view. */
@media (min-width: 480px) and (max-width: 680px) {
  .services-open .sp-card .sp-card-art { flex-basis: 232px; height: 232px; }
  .services-open .sp-card .sp-art-scene .sp-scene-object,
  .services-open .sp-card .sp-art-mastery::before,
  .services-open .sp-card .sp-art-license::before { height: 254px; }
}