/* ==========================================================================
   Service inner pages - shared layout & components
   Used by: /services/school-outing, corporate-outing, family-friends,
            parties-celebrations, paramotoring
   ========================================================================== */

:root {
  --svc-orange: #FF7B00;
  --svc-orange-2: #FF7B00;
  --svc-orange-dark: #d96200;
  --svc-cream: #fff8f1;
  --svc-line: #ffe0c2;
  --svc-ink: #1f2229;
  --svc-body: #4a4f57;
  --svc-radius: 18px;
}

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
/* The fixed header is cleared by main's padding, which leaves a white strip
   above the dark hero. Move that clearance into the hero itself so its
   background runs flush under the header. */
.svc-page main {
  padding-top: 0;
}

.svc-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 640px;
  background: var(--svc-ink);
  padding: calc(var(--header-h, 100px) + 30px) 0 60px;
}

.svc-hero>.container {
  width: 100%;
}

.svc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.svc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15, 17, 21, .82) 0%, rgba(15, 17, 21, .70) 45%, rgba(15, 17, 21, .88) 100%);
}

/* The site-wide breadcrumb rule adds outer padding; the hero handles its own. */
.svc-hero nav[aria-label="Breadcrumb"] {
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

.svc-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

.svc-hero__crumbs a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}

.svc-hero__crumbs a:hover {
  color: #fff;
}

.svc-hero__crumbs [aria-current="page"] {
  color: var(--svc-orange-2);
  font-weight: 500;
}

.svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 44px;
}

.svc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
}

.svc-hero__eyebrow i {
  color: var(--svc-orange-2);
}

.svc-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.4px;
}

.svc-hero__sub {
  max-width: 56ch;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .80);
  font-size: 17px;
  line-height: 1.6;
}

.svc-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}

.svc-hero__facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
}

.svc-hero__facts i {
  flex: 0 0 18px;
  width: 18px;
  color: var(--svc-orange-2);
  font-size: 15px;
  text-align: center;
}

/* ---- Price card ---- */
.svc-price {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--svc-radius);
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.svc-price__label {
  margin: 0;
  color: var(--svc-orange);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.svc-price__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  color: var(--svc-ink);
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
}

.svc-price__amount span {
  font-size: 16px;
  font-weight: 500;
  color: #6b7078;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Struck-through "was" price: its own line above the current price, so the
   headline figure and its unit always stay together on one line. */
.svc-price__was {
  flex: 0 0 100%;
  margin: 0 0 2px;
  color: #9aa1a9;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Inside the sticky bar it stays inline - there is no room for two lines. */
.svc-stickybar__price .svc-price__was {
  flex: none;
  margin: 0 5px 0 0;
  font-size: 15px;
}

.svc-price__from {
  display: block;
  margin: 0 0 -2px;
  color: #6b7078;
  font-size: 14px;
  font-weight: 500;
}

.svc-price__note {
  margin: 10px 0 0;
  color: #6b7078;
  font-size: 14px;
  line-height: 1.55;
}

.svc-price__perk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--svc-cream);
  color: #3d4249;
  font-size: 14px;
  line-height: 1.5;
}

.svc-price__perk i {
  margin-top: 2px;
  color: var(--svc-orange);
}

.svc-price .svc-btn {
  width: 100%;
  margin-top: 16px;
}

.svc-price .svc-btn+.svc-btn {
  margin-top: 10px;
}

/* ---- Buttons ---- */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.svc-btn--primary {
  background: var(--svc-orange);
  color: #fff !important;
}

.svc-btn--primary:hover {
  background: var(--svc-orange-dark);
  color: #fff !important;
}

.svc-btn--ghost {
  background: #fff;
  border-color: var(--svc-orange);
  color: var(--svc-orange) !important;
}

.svc-btn--ghost:hover {
  background: var(--svc-cream);
  color: var(--svc-orange-dark) !important;
}

.svc-btn--light {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff !important;
}

.svc-btn--light:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   2. SECTION RHYTHM
   -------------------------------------------------------------------------- */
.svc-main {
  /* Content lines up with the hero and every other section on the page. */
  --svc-measure: 100%;
}

.svc-section {
  padding: 72px 0;
  border-top: 1px solid #ededed;
}

.svc-section:first-of-type {
  border-top: 0;
}

.svc-section--flush {
  border-top: 0;
}

.svc-section--tint {
  background: var(--svc-cream);
  border-top: 0;
}

.svc-wrap {
  max-width: var(--svc-measure);
  margin: 0 auto;
}

.svc-eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--svc-orange);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.svc-h2 {
  margin: 0;
  color: var(--svc-ink);
  font-size: clamp(24px, 3.2vw, 33px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.3px;
}

.svc-h3 {
  margin: 44px 0 0;
  color: var(--svc-ink);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}

.svc-lead {
  max-width: 68ch;
  margin: 18px 0 0;
  color: var(--svc-body);
  font-size: 17px;
  line-height: 1.7;
}

.svc-p {
  max-width: 68ch;
  margin: 16px 0 0;
  color: var(--svc-body);
  line-height: 1.75;
}

/* Body links follow the site-wide treatment: black text, orange underline. */
.svc-main a:not(.svc-btn):not(.button):not([class*="button"]):not(.js-gallery) {
  color: #000;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--svc-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.svc-main a:not(.svc-btn):not(.button):not([class*="button"]):not(.js-gallery):hover {
  color: var(--svc-orange);
  text-decoration-color: var(--svc-orange);
}

/* --------------------------------------------------------------------------
   2b. EXPLORE ACTIVITIES STRIP
   Legacy slider re-housed in the service-page rhythm: one container, one
   measure, a proper heading block and a phone CTA in place of "See all".
   -------------------------------------------------------------------------- */
.svc-explore {
  border-top: 1px solid #ededed;
}

.svc-explore__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.svc-explore__head .svc-lead {
  max-width: 58ch;
}

.svc-explore__cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* The slider sits inside .svc-wrap, so it no longer needs its own container. */
.svc-explore .js-section-slider {
  padding-top: 34px;
}

.svc-explore .featureImage__title {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.35;
}

.svc-explore .pagination.-type-1 {
  padding-top: 34px;
}

@media (max-width: 767px) {
  .svc-explore__head {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .svc-explore__cta {
    width: 100%;
  }

  .svc-explore .js-section-slider {
    padding-top: 24px;
  }

  .svc-explore .pagination.-type-1 {
    padding-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   3. CARDS / PANELS
   -------------------------------------------------------------------------- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.svc-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.svc-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.svc-card {
  padding: 22px 20px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
}

.svc-card i {
  color: var(--svc-orange);
  font-size: 22px;
}

.svc-card h3 {
  margin: 14px 0 0;
  color: var(--svc-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.svc-card p {
  margin: 7px 0 0;
  color: #6b7078;
  font-size: 14.5px;
  line-height: 1.6;
}

.svc-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 4px solid var(--svc-orange-2);
  border-radius: 12px;
  background: var(--svc-cream);
}

.svc-note i {
  margin-top: 3px;
  flex: 0 0 18px;
  color: var(--svc-orange);
}

.svc-note p {
  margin: 0;
  color: #3d4249;
  line-height: 1.65;
}

/* ---- Package panel (big price + inclusions) ---- */
.svc-package {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  margin-top: 30px;
  border: 1px solid var(--svc-line);
  border-radius: var(--svc-radius);
  overflow: hidden;
  background: #fff;
}

.svc-package__price {
  padding: 32px 28px;
  background: var(--svc-cream);
  border-right: 1px solid var(--svc-line);
}

.svc-package__price .svc-price__amount {
  font-size: clamp(38px, 5.5vw, 52px);
}

.svc-package__price .svc-btn {
  width: 100%;
}

.svc-package__body {
  padding: 30px 28px;
}

.svc-inout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 36px;
}

.svc-inout h4 {
  margin: 0 0 14px;
  color: var(--svc-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.svc-inout ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-inout li {
  position: relative;
  padding-left: 28px;
  line-height: 1.55;
  font-size: 15px;
  color: #3d4249;
}

.svc-inout li+li {
  margin-top: 11px;
}

.svc-inout li::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  text-align: center;
}

.svc-inout__in li::before {
  content: "\f00c";
  color: #2f9e6a;
}

.svc-inout__out li::before {
  content: "\f00d";
  color: #d05252;
}

/* --------------------------------------------------------------------------
   MENU CARDS - white cards with a solid header band so they never blend
   into the tinted section behind them.
   -------------------------------------------------------------------------- */
.svc-main .school-menu-card,
.svc-main .corp-menu-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0e2d2;
  border-top: 0;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(31, 34, 41, .08);
}

.svc-main .school-menu-card__title,
.svc-main .corp-menu-card__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  padding: 16px 22px;
  background: var(--svc-orange);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.svc-main .school-menu-card__title i,
.svc-main .corp-menu-card__title i {
  width: auto;
  flex: 0 0 auto;
  color: #fff;
  font-size: 17px;
}

.svc-main .school-menu-card__sub,
.svc-main .corp-menu-card__sub,
.svc-main .corp-menu-card__time {
  padding: 0 22px;
  color: #a2621f;
}

.svc-main .school-menu-card__list,
.svc-main .corp-menu-card__list {
  padding: 0 22px;
}

.svc-main .school-menu-card__list li,
.svc-main .corp-menu-card__list li {
  color: #33373d;
}

/* ---- Photo grid sizing inside service pages ---- */
.svc-main .vx-photo-grid {
  grid-auto-rows: 185px;
}

.svc-main .vx-photo-grid img {
  height: 100%;
  min-height: 0;
}

@media (max-width: 991px) {
  .svc-main .vx-photo-grid {
    grid-auto-rows: 150px;
  }
}

@media (max-width: 575px) {
  .svc-main .vx-photo-grid {
    grid-auto-rows: 130px;
  }

  .svc-main .vx-photo-grid li:first-child {
    grid-row: span 2;
  }
}

/* ---- CTA band ---- */
.svc-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 28px 32px;
  border-radius: var(--svc-radius);
  background: var(--svc-ink);
}

.svc-band h3 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.svc-band p {
  max-width: 52ch;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.6;
}

.svc-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   4. STICKY MOBILE CTA
   -------------------------------------------------------------------------- */
.svc-stickybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .10);
}

.svc-stickybar__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.svc-stickybar__price b {
  color: var(--svc-ink);
  font-size: 24px;
  font-weight: 700;
}

.svc-stickybar__price span {
  color: #6b7078;
  font-size: 12.5px;
}

.svc-stickybar .svc-btn {
  flex: 1;
  max-width: 220px;
  padding: 13px 20px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .svc-hero__grid {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 32px;
  }
}

@media (max-width: 991px) {
  .svc-hero {
    min-height: 0;
    padding: calc(var(--header-h, 100px) + 16px) 0 44px;
  }

  .svc-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .svc-hero__facts {
    max-width: none;
  }

  .svc-section {
    padding: 52px 0;
  }

  .svc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .svc-package {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-package__price {
    border-right: 0;
    border-bottom: 1px solid var(--svc-line);
  }

  .svc-stickybar {
    display: flex;
  }

  body.svc-page {
    padding-bottom: 76px;
  }
}

@media (max-width: 767px) {
  .svc-hero {
    padding: calc(var(--header-h, 100px) + 10px) 0 32px;
  }

  .svc-hero__crumbs {
    margin-bottom: 18px;
    font-size: 12.5px;
  }

  .svc-hero__sub {
    margin-top: 12px;
    font-size: 15.5px;
  }

  .svc-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
  }

  .svc-hero__facts li {
    padding: 10px 12px;
    font-size: 13px;
    gap: 8px;
  }

  .svc-price {
    padding: 22px 20px;
  }

  .svc-section {
    padding: 42px 0;
  }

  .svc-h3 {
    margin-top: 34px;
  }

  .svc-lead,
  .svc-p {
    font-size: 15.5px;
    line-height: 1.7;
  }

  .svc-cards,
  .svc-cards--3,
  .svc-cards--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 26px;
  }

  .svc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
  }

  .svc-card i {
    margin-top: 3px;
    flex: 0 0 20px;
    font-size: 18px;
  }

  .svc-card h3 {
    margin-top: 0;
  }

  .svc-package__price,
  .svc-package__body {
    padding: 22px 20px;
  }

  .svc-inout {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .svc-band {
    padding: 24px 20px;
  }

  .svc-band__actions .svc-btn {
    width: 100%;
  }

  .svc-note {
    padding: 16px 16px;
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   6. TIGHTEN LEGACY COMPONENTS ON SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  .school-chip-list,
  .vx-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 16px;
  }

  .school-chip-list li,
  .vx-chip-list li {
    font-size: 14px;
  }

  .school-entertainment,
  .school-menu-card,
  .school-carry-card,
  .school-know-card {
    padding: 18px;
  }

  /* Stacked tables: drop the redundant label on the title cell and tighten rows */
  .svc-main .vx-table-wrap .vx-table--stack>tbody>tr>td:first-child::before {
    display: none;
  }

  .svc-main .vx-table-wrap .vx-table--stack>tbody>tr>td {
    padding: 9px 14px;
  }

  .svc-main .vx-table-wrap .vx-table--stack>tbody>tr>td:first-child {
    padding: 11px 14px;
  }

  .svc-main .vx-table-wrap .vx-table--stack>tbody>tr {
    margin-bottom: 10px;
  }

  .svc-main .vx-table-wrap .vx-table--stack>tbody>tr>td[data-label]::before {
    margin-bottom: 2px;
  }
}