/* A7.2 Home/About layout refinements only. No global typography overrides. */
/* The template's generic .btn-text color is white on this light hero. */
.ek-home-hero a.btn-text, .ek-home-hero a.btn-text:visited {
  color: #873951 !important; text-decoration: none;
}
.ek-home-hero a.btn-text:hover, .ek-home-hero a.btn-text:focus-visible {
  color: #69263c !important; text-decoration: underline;
}
.ek-home-hero a.btn-text:focus-visible {outline: 2px solid #873951; outline-offset: 4px;}

.text-justify {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Align text starts in the three existing equal-width introductory cards. */
@media (min-width: 768px) {
  .ek-home-benefits .row > .col-md-4 h2.hs-3 {
    min-height: 3.25em;
  }
}
.ek-home-services > .container > .row:first-child > .col-lg-12 {max-width: 100%;}
.ek-home-services > .container > .row:first-child p {max-width: 100%;}
/* The carousel stays unchanged; its existing controls follow the cards. */
.ek-home-services .ek-services-nav {
  gap: 12px; margin-top: 32px; justify-content: center !important;
  position: relative; z-index: 3;
}
.ek-home-services .ek-services-nav .d-prev,
.ek-home-services .ek-services-nav .d-next {flex: 0 0 auto;}
.ek-home-services .owl-carousel .item a.btn-text {color: #873951 !important;}
.ek-home-services .owl-carousel .item a.btn-text:hover {color: #69263c !important;}
/* Remove mid-card arrows and draw them in the reserved gap near the icons. */
@media (min-width: 768px) {
  .ek-home-steps .ek-steps-grid {--bs-gutter-x: 2.75rem;}
  .ek-home-steps .ek-steps-grid > .de-step {padding: 22px 23px 0;}
  .ek-home-steps .ek-steps-grid > .de-step-arrow::after {
    right: -22px; top: 44px; transform: none; font-size: 21px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ek-home-steps .ek-steps-grid {--bs-gutter-x: 2rem;}
  .ek-home-steps .ek-steps-grid > .de-step {padding-left: 16px; padding-right: 16px;}
  .ek-home-steps .ek-steps-grid > .de-step-arrow::after {right: -17px;}
}
@media (max-width: 767.98px) {
  .ek-home-benefits .row > .col-md-4 h2.hs-3 {min-height: 0;}
  .ek-home-steps .ek-steps-grid > .de-step-arrow::after {display: none;}
  .ek-home-services .ek-services-nav {margin-top: 22px;}
}
/* Justify body paragraphs in readable text columns, not labels, buttons, tiny
   cards, carousel cells, centered CTAs or phone-sized layouts. */
@media (min-width: 992px) {
  .ek-home-hero .ek-hero-intro,
  .ek-home-benefits .col-md-4 p,
  .ek-home-services > .container > .row:first-child p,
  .ek-about-page .lead,
  .ek-prose > p,
  .ek-prose > div > p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* A7.2 HOME REFINEMENT V4 BEGIN */
/* The internally generated carousel navigation is not our bottom custom nav. */
.ek-home-services #services-carousel .owl-nav,
.ek-home-services .owl-carousel .owl-nav,
.ek-home-services .owl-nav:not(.ek-services-nav) { display:none!important; }
/* Center the pictograms while keeping readable headings aligned below. */
.ek-home-benefits .row > .col-md-4 img.w-70px,
.ek-home-benefits .row > .col-md-4 .w-70px { display:block; margin-left:auto!important; margin-right:auto!important; }
/* About link sits beneath the first session note rather than beside the booking button. */
.ek-home-hero .ek-hero-about-link { display:flex; justify-content:flex-end; margin-top:.65rem; }
.ek-home-hero .ek-hero-about-link .btn-text { color:#873951!important; }
.ek-home-hero .ek-hero-about-link .btn-text:hover { color:#69263c!important; }
@media (min-width:768px) {
  .ek-home-steps .ek-steps-grid > .de-step { display:flex; flex-direction:column; align-items:center; }
  .ek-home-steps .ek-steps-grid > .de-step h3.hs-4 { width:100%; min-height:3.2em; margin-bottom:.5rem; }
  .ek-home-steps .ek-steps-grid > .de-step p { width:100%; }
}
@media (max-width:767.98px) {
  .ek-home-hero .ek-hero-about-link { justify-content:flex-start; }
  .ek-home-steps .ek-steps-grid > .de-step h3.hs-4 { min-height:0; }
}
/* A7.2 HOME REFINEMENT V4 END */

/* A8.1: keep uploaded portraits inside the approved hero frame.
   Wagtail fill renditions use the editor-selected focal area for cropping. */
.ek-home-hero img.ek-cms-hero-photo {
  display: block; width: 100%; height: auto; object-fit: cover;
  object-position: center; aspect-ratio: 5 / 6; max-height: 560px;
}
.ek-home-hero img.ek-cms-hero-photo.ek-cms-size-compact {
  aspect-ratio: 1 / 1; max-height: 480px;
}
.ek-home-hero img.ek-cms-hero-photo.ek-cms-size-tall {
  aspect-ratio: 5 / 7; max-height: 640px;
}
@media (max-width: 767.98px) {
  .ek-home-hero img.ek-cms-hero-photo { max-height: none; }
}


/* A8.2: explicit photo framing: full image, manually positioned crop, or natural.
   Use width-only Wagtail rendition; CSS never cuts original image pixels. */
.ek-home-hero img.ek-cms-hero-photo {
  width:var(--ek-photo-width,100%); max-width:100%; margin-left:auto; margin-right:0;
  height:auto; object-position:var(--ek-photo-x,50%) var(--ek-photo-y,50%);
  background:#f4e9e9; border-radius:12px;
}
.ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-contain {
  height: min(560px, 65vw); object-fit:contain;
}
.ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-cover {
  height:min(560px,65vw); object-fit:cover;
}
.ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-natural {
  object-fit:contain; width:auto; max-height:560px; max-width:var(--ek-photo-width,100%);
}
@media (max-width:991px) {
  .ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-contain,
  .ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-cover {height: min(72vw,560px);}
}
@media (max-width:767px) {
  .ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-contain,
  .ek-home-hero img.ek-cms-hero-photo.ek-cms-fit-cover {height: min(105vw,560px);}
}

/* A8.3: preserve the approved hero dimensions regardless of uploaded image ratio.
   The outer frame always fills its bootstrap column; the source image never
   changes the layout. Select focal point in Wagtail's image editor. */
.ek-home-hero .ek-cms-hero-frame {
  display:block; width:100%; max-width:100%; aspect-ratio:5/6;
  max-height:560px; overflow:hidden; border-radius:12px;
  background:#f4e9e9; position:relative;
}
.ek-home-hero .ek-cms-hero-frame img.ek-cms-hero-photo {
  display:block; width:100%; height:100%; max-width:none; max-height:none;
  aspect-ratio:auto; object-fit:cover;
  object-position:var(--ek-photo-x,50%) var(--ek-photo-y,50%);
  margin:0; border-radius:inherit;
}
@media(max-width:767.98px) {
  .ek-home-hero .ek-cms-hero-frame { max-height:none; }
}

/* A8.4: pan/zoom exclusively within the existing fixed Home hero frame.
   A new photo never changes the Bootstrap grid or frame dimensions. */
.ek-home-hero .ek-cms-hero-frame img.ek-cms-hero-photo {
  object-position: var(--ek-photo-x, 50%) var(--ek-photo-y, 50%);
  transform: scale(var(--ek-photo-zoom, 100%));
  transform-origin: var(--ek-photo-x, 50%) var(--ek-photo-y, 50%);
}

/* A8.4.1: identical editorial/public zoom-out composition. The frame never
   changes; less-than-100 zoom shows the whole photograph on a soft backdrop. */
.ek-home-hero .ek-cms-hero-frame img.ek-cms-hero-photo--zoom-out {
  object-fit:contain;
  transform-origin:center center;
}