/* ==========================================================================
   Platform Health and Fitness — page-level styles
   Section spacing + small custom rules carried over from the live site.
   ========================================================================== */

/* Footer email + FAQ links */
.footer-email a { word-wrap: normal; }
#faq .accordion-content a { color: var(--brand-text-faq-link); }

/* Google review widget: hide "write a review" button */
.google-review-widget .ti-header-write-btn { display: none !important; }

/* --------------------------------------------------------------------------
   Section spacing (desktop / ≤1024px / ≤768px)
   -------------------------------------------------------------------------- */

/* Hero */
.container.is-fluid.has-space-0 { padding: 100px 30px 100px 30px; }

/* Standard content sections */
.text-with-image-section.has-space-1,
.testimonial-section.has-space-4,
.three-steps-section.has-space-5,
.accordion-section.has-space-6,
.lead-magnet-section.has-space-7 { padding: 110px 30px 110px 30px; }

/* Services */
.pages-section.has-space-2 {
  padding: 110px 30px 70px 30px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .hero.is-fullheight { min-height: auto; }
  .container.is-fluid.has-space-0 { padding: 150px 30px 180px 30px; }

  .text-with-image-section.has-space-1,
  .testimonial-section.has-space-4,
  .three-steps-section.has-space-5,
  .accordion-section.has-space-6,
  .lead-magnet-section.has-space-7 { padding: 80px 30px 80px 30px; }

  .pages-section.has-space-2 { padding: 80px 30px 50px 30px; }
}

@media (max-width: 768px) {
  .container.is-fluid.has-space-0 { padding: 130px 20px 50px 20px; }

  .text-with-image-section.has-space-1,
  .pages-section.has-space-2,
  .testimonial-section.has-space-4,
  .three-steps-section.has-space-5,
  .accordion-section.has-space-6,
  .lead-magnet-section.has-space-7 { padding: 50px 20px 50px 20px; }
}

/* --------------------------------------------------------------------------
   Elevated image cards
   Replaces the theme's brush-stroke masks with rounded, raised photo cards.
   -------------------------------------------------------------------------- */
.img-card,                                   /* reusable: add to any content <img> on new pages */
.hero-side-image,
.text-with-image-section .image-container img,
.lead-magnet-section .image-container img {
  -webkit-mask-image: none;
  mask-image: none;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-elevated);
  background-color: var(--brand-charcoal); /* placeholder tone while loading */
}

/* Hero: the glass feature box overlaps the bottom edge of the card.
   On desktop the card is capped by viewport height so it always clears the fixed header (125px). */
.hero .image-col { padding: 0 0 70px; }
@media (min-width: 1025px) {
  .hero .image-col {
    flex: 0 0 auto;
    width: min(50%, 540px, calc(100vh - 290px));
    min-width: 400px;
    margin-left: auto;
    margin-right: auto;     /* centred in the right half, balancing the gap either side */
  }
  /* Box overhangs the card's left edge into the column gap, so the 3 ticks have room */
  .hero .hero-feature-box {
    left: -12% !important;
    width: 108% !important;
    padding: 22px 20px;
  }
  .hero .hero-feature-item { max-width: none; flex: 1 1 0; }
}
.hero .hero-feature-box {
  left: 3%;
  width: 94%;
  bottom: 0;
  margin-top: 0;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / .8);
}

/* Lead magnet: keep the ebook card at its original size */
.lead-magnet-section .image-container img { max-width: 500px; margin: 0 auto; }

/* Breathing room so shadows/glow aren't clipped */
.text-with-image-section .image-container,
.lead-magnet-section .image-container { padding: 12px; }

@media (max-width: 768px) {
  :root { --radius-image: 18px; }
  /* Bulma's negative column margins push the hero photo to the screen edge; inset it to the 20px text gutter */
  .hero .image-col { padding: 0 16px 60px; }
  .hero .hero-feature-box { left: 16px; width: calc(100% - 32px); }
}

/* Services hover background: first image shown before any hover */
.hover-bg-overlay .bg-current {
  background-image: url(../images/personal-training.jpg);
}

/* ==========================================================================
   Design polish (UI review)
   Subtle depth + interaction cues. Everything below is self-contained;
   delete this block to return to the pre-polish look.
   ========================================================================== */

/* 1. Primary CTA buttons: warm glow + gentle lift on hover */
.button.button--mimas {
  box-shadow: 0 10px 28px -12px rgb(245 201 154 / .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.button.button--mimas:hover,
.button.button--mimas:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgb(245 201 154 / .75);
}

/* 2. Hero: ambient warm glow behind the photo card */
@media (min-width: 1025px) {
  .hero .image-col { isolation: isolate; }
  .hero .image-col::before {
    content: "";
    position: absolute;
    inset: -12% -12% 0;
    z-index: -1;
    background: radial-gradient(closest-side, rgb(201 151 101 / .22), transparent 75%);
    pointer-events: none;
  }
}

/* 3. Service cards: visible card at rest, gold edge + glow on hover */
.pages-section .card-equal-height .card {
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--radius-card);
  background: linear-gradient(to top, rgb(0 0 0 / .75) 0%, rgb(0 0 0 / .25) 45%, transparent 70%);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pages-section .card-equal-height { cursor: pointer; }
@media (min-width: 769px) {
  .pages-section .columns.custom-gap { justify-content: center; gap: 24px; }
}
.pages-section .card-equal-height:hover .card {
  border-color: rgb(245 201 154 / .55);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8), 0 0 40px -10px rgb(245 201 154 / .35);
}
.pages-section .card-equal-height:hover { border-radius: var(--radius-card); }

/* 4. Three steps: raised tiles with a gold step label */
.three-steps-section .columns.ast-container:has(.icon-box) { counter-reset: step; gap: 0; }
.three-steps-section .icon-box {
  counter-increment: step;
  position: relative;
  margin: 12px;
  padding: 36px 28px !important;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #1c1c1c 0%, #0f0f0f 100%);
  /* lighter elevation than photo cards: on the charcoal section a deep black shadow reads as a muddy halo */
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 18px 40px -24px rgb(245 201 154 / .3);
}
.three-steps-section .icon-box .card { background: none; box-shadow: none; }
.three-steps-section .icon-box-numbered-title::before {
  content: "Step " counter(step);
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-gold);
}

@media (max-width: 1024px) {
  .three-steps-section .icon-box { margin: 12px 0; }
}

/* 5. FAQ: hover cue on closed questions */
.accordion-item {
  transition: border-color .25s ease, box-shadow .25s ease;
}
.accordion-item:hover:not(:has(> .accordion-button[aria-expanded="true"])) {
  border-color: rgb(245 201 154 / .6);
  box-shadow: 0 0 0 1px rgb(245 201 154 / .15), 0 12px 30px -16px rgb(245 201 154 / .35);
}
.accordion-button { cursor: pointer; }

/* 6. Footer: gold hairline divider */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(1170px, 90%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(245 201 154 / .6), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .button.button--mimas,
  .button.button--mimas:hover { transition: none; transform: none; }
  .pages-section .card-equal-height .card,
  .accordion-item { transition: none; }
}

/* --------------------------------------------------------------------------
   Scroll-drawn underlines
   The gold bar under .text-underline words draws left→right as the heading
   scrolls up the screen (progress set by assets/js/site.js as --underline).
   Without JS, or with reduced motion, the line is simply shown in full.
   -------------------------------------------------------------------------- */
.text-underline::after {
  transform-origin: left center;
  transform: scaleX(var(--underline, 1));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .text-underline::after { transform: none; }
}

/* --------------------------------------------------------------------------
   Elevated image cards: inner pages
   Same treatment as the home page: the theme's brush-stroke masks are
   switched off and photos become rounded, raised cards.
   -------------------------------------------------------------------------- */

/* Page hero banners (About, Studio Info, Services, Blog, ...) */
.hero-pages .hero-background-figure {
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-pages .hero-image-wrapper { overflow: visible; }
.hero-pages figure.hero-background-figure {
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  background-color: var(--brand-charcoal);
}
.hero-pages img.hero-background-figure { object-fit: cover; }

/* Founders photo */
.owner-section .image-wrapper {
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}

/* Content photos: founders, coaches, services, classes, programme pages */
.owner-section .image-wrapper > img,
.coaches-section img,
.programs-section img,
.classes-section img,
.program-description-section .first-image img,
.program-description-section .second-image img,
.text-image-section .image-wrapper img {
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-elevated);
  background-color: var(--brand-charcoal);
}

/* --------------------------------------------------------------------------
   Facility Perks (About): photo collage + feature list
   -------------------------------------------------------------------------- */

/* Collage frames become rounded, raised cards (masks off) */
.text-image-section .image-wrapper { position: relative; isolation: isolate; }
.text-image-section .image-wrapper .image_1 img,
.text-image-section .image-wrapper .image_2 img,
.text-image-section .image-wrapper .image_3 img {
  -webkit-mask-image: none;
  mask-image: none;
}
.text-image-section .image-wrapper .image_1,
.text-image-section .image-wrapper .image_2,
.text-image-section .image-wrapper .image_3 {
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-elevated);
  background-color: var(--brand-charcoal);
}
/* Back cards tilt slightly in opposite directions; the front card carries a gold ring */
.text-image-section .image-wrapper .image_1 { transform: rotate(-2deg); }
.text-image-section .image-wrapper .image_3 { transform: rotate(2deg); }
.text-image-section .image-wrapper .image_2 {
  z-index: 2;
  box-shadow:
    0 0 0 2px rgb(245 201 154 / .55),
    0 30px 60px -18px rgb(0 0 0 / .95),
    0 0 50px -12px rgb(245 201 154 / .35);
}
/* Warm ambient glow behind the collage */
.text-image-section .image-wrapper::before {
  content: "";
  position: absolute;
  inset: 10% -5% 10% -5%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(201 151 101 / .2), transparent 75%);
  pointer-events: none;
}

/* Feature list: each perk is a glass tile */
.text-image-section .feature-item {
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 14px 30px -20px rgb(0 0 0 / .9);
}
.text-image-section .feature-icon {
  margin-top: 0;
  box-shadow: 0 8px 20px -8px rgb(245 201 154 / .6);
}
.text-image-section .feature-text p { margin: 0; }

@media (max-width: 768px) {
  /* The column sizes to its content on mobile; lazy-loaded images have no size until they
     load, so without an explicit width the column collapses and the images never appear. */
  .text-image-section .image-container { width: 100%; align-self: stretch; }
  .text-image-section .image-wrapper .image_1,
  .text-image-section .image-wrapper .image_3 { transform: none; }
  .text-image-section .feature-item { padding: 18px 16px; }
}

/* Form modal: the theme pulls the privacy line up into spare space below the form;
   the Free Intro form has none, so keep the line below it */
.privacy-content-form { top: 0 !important; margin-top: 10px; }

/* Form modal: fit the form on short screens without an inner scrollbar */
#modalIframeContainer iframe { display: block; }
#modalIframeContainer { margin-bottom: 0; }
.modal .modal-card .modal-card-body { scrollbar-width: thin; scrollbar-color: var(--brand-glass-border) transparent; }
@media (max-height: 820px) {
  .modal .modal-card .modal-card-head { padding: 16px 50px 0; }
  .modal .modal-card .modal-card-head .modal-card-title { font-size: 30px; line-height: 30px; margin-bottom: 6px; }
  .modal .modal-card .modal-card-description.small-p { font-size: 15px; line-height: 20px; }
  .modal .modal-card .modal-card-body { padding-top: 8px; padding-bottom: 8px; }
  .privacy-content-form { margin-top: 4px; font-size: 13px; }
}
@media (max-height: 680px) {
  .modal .modal-card .modal-card-description.small-p { display: none; }
}

/* Book a Call page */
.book-call-section { background: var(--brand-black); padding: 150px 30px 110px; }
.book-call-section .ast-container { display: block; }
.book-call-headline { max-width: 760px; margin: 0 auto 48px; }
.book-call-headline h1 { color: var(--brand-white); font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; }
.book-call-headline .text-underline { display: inline-block; }
.book-call-headline .text-underline::after { bottom: -6px; }
.book-call-headline p { color: var(--brand-white); font-size: 20px; line-height: 1.5; margin: 0; }
p > a[href="/book-a-call/"] { text-decoration: underline; }
.book-call-calendar { width: 100%; max-width: 680px; margin: 0 auto; background: var(--brand-white); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); overflow: hidden; }
.book-call-calendar iframe { display: block; }
.book-call-calendar br { display: none; }
@media (max-width: 1024px) {
  .book-call-section { padding: 130px 30px 80px; }
  .book-call-headline h1 { font-size: 60px; }
}
@media (max-width: 768px) {
  .book-call-section { padding: 110px 20px 50px; }
  .book-call-headline { margin-bottom: 32px; }
  .book-call-headline h1 { font-size: 46px; }
  .book-call-headline p { font-size: 18px; }
}