/* =========================================================
   Split Hero
   Desktop: text left, photo right with animated badges on it.
   Mobile:  photo fills the top, heading over it, badges as a checklist.
   With a location chosen, its contacts and map follow underneath.
   ========================================================= */
.cl-shero { position: relative; background: #fff; overflow: hidden; }

/* ---------- Breadcrumbs ---------- */
.cl-shero__crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--cl-muted);
  margin-bottom: 28px;
}
.cl-shero__crumbs a { color: var(--cl-muted); }
.cl-shero__crumbs a:hover { color: var(--cl-purple); }
.cl-shero__crumbs .breadcrumb_last,
.cl-shero__crumb-current { color: var(--cl-dark); font-weight: 600; }

/* Pulled flush under the fixed header, the section needs clearance or the
   breadcrumbs end up hidden behind it. */
@media (min-width: 901px) {
  body.cl-hero-top .cl-shero__top { padding-top: calc(var(--cl-header-h) + 24px); }
}

/* ---------- Layout ---------- */
.cl-shero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title media"
    "body  media";
  /* The photo spans both rows. The first row must follow the heading as it is
     actually rendered — min-content would reserve the height of one word per
     line and leave a gap under it. */
  grid-template-rows: auto 1fr;
  column-gap: 60px;
  align-items: start;
}
.cl-shero__body { align-self: start; }
.cl-shero__title { grid-area: title; color: var(--cl-purple); margin: 0 0 20px; }
.cl-shero__body  { grid-area: body; }
.cl-shero__media { grid-area: media; position: relative; }

.cl-shero__text { color: var(--cl-text); margin: 0 0 26px; max-width: 34em; }

.cl-shero__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 40px;
}

/* ---------- Badges ---------- */
.cl-shero__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Covers the photo so the pills position against it — and so the rotation
     turns around the photo's centre. */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cl-shero__badge-in { pointer-events: auto; }
.cl-shero__badge {
  position: absolute;
  width: max-content;
  max-width: 78%;
}
/* The pill itself — this is what grows out of and back into its own centre. */
.cl-shero__badge-in {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cl-purple);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(22, 4, 66, 0.28);
  transform-origin: 50% 50%;
}
.cl-shero__badge-ico { display: inline-flex; flex: 0 0 auto; }
.cl-shero__badge-ico svg,
.cl-shero__badge-ico .cl-icon,
.cl-shero__badge-ico i { width: 18px; height: 18px; font-size: 16px; }

.cl-shero__badge:nth-child(1) { top: 9%;  left: 2%;   --depth: 0.82; }
.cl-shero__badge:nth-child(2) { top: 27%; right: -6%; --depth: 0.88; }
.cl-shero__badge:nth-child(3) { top: 45%; left: -6%;  --depth: 0.95; }
.cl-shero__badge:nth-child(4) { top: 63%; right: -2%; --depth: 1.02; }
.cl-shero__badge:nth-child(5) { top: 82%; left: 4%;   --depth: 1.08; }
.cl-shero__badge:nth-child(6) { top: 95%; right: 6%;  --depth: 1.12; }
/* The depth is refreshed by JS while the ring turns: a pill swinging lower
   grows, one rising higher shrinks. */
.cl-shero__badge { transform: scale(var(--depth, 1)); transform-origin: 50% 50%; }

/* Choreography.
   The whole ring turns around the centre of the photo, each pill counter-turns
   so its text stays upright, and every pill grows out of — and later shrinks
   back into — its own centre. JS only sets the per-pill delay. */
@media (min-width: 901px) {
  .cl-shero.has-anim.is-animated .cl-shero__badges {
    transform-origin: 50% 50%;
    animation: cl-ring 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .cl-shero.has-anim.is-animated .cl-shero__badge {
    animation: cl-ring-counter 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .cl-shero.has-anim.is-animated .cl-shero__badge-in {
    opacity: 0;
    transform: scale(0);
    animation: cl-badge-pop 9s cubic-bezier(0.34, 1.2, 0.5, 1) infinite;
  }
  .cl-shero.has-anim.is-animated .cl-shero__badges,
  .cl-shero.has-anim.is-animated .cl-shero__badge,
  .cl-shero.has-anim.is-animated .cl-shero__badge-in { animation-play-state: paused; }

  .cl-shero.has-anim.is-animated.is-visible .cl-shero__badges,
  .cl-shero.has-anim.is-animated.is-visible .cl-shero__badge,
  .cl-shero.has-anim.is-animated.is-visible .cl-shero__badge-in { animation-play-state: running; }
}

/* The ring unwinds into place, rests, then drifts on around the circle. */
@keyframes cl-ring {
  0%        { transform: rotate(-38deg); }
  32%       { transform: rotate(0deg); }
  60%       { transform: rotate(0deg); }
  100%      { transform: rotate(38deg); }
}
/* Same motion, mirrored, so the labels never tilt. */
@keyframes cl-ring-counter {
  0%        { transform: rotate(38deg) scale(var(--depth, 1)); }
  32%       { transform: rotate(0deg) scale(var(--depth, 1)); }
  60%       { transform: rotate(0deg) scale(var(--depth, 1)); }
  100%      { transform: rotate(-38deg) scale(var(--depth, 1)); }
}
/* Each pill opens out of its own centre and later closes back into it. */
@keyframes cl-badge-pop {
  0%        { opacity: 0; transform: scale(0); }
  10%       { opacity: 1; }
  32%, 60%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-shero__badges,
  .cl-shero__badge,
  .cl-shero__badge-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1100px) {
  .cl-shero__grid { column-gap: 34px; }
  .cl-shero__badge-in { font-size: var(--fs-body); padding: 9px 15px; }
}

/* ---------- Contacts + map ---------- */
/* The hero content — the photo above all — stays over the contacts strip. */
.cl-shero__top { position: relative; z-index: 2; }

/* Optional heading + text band between the hero and the contacts. It shares
   the lavender lower background with the contacts, so the section and the
   location read as one continuous band rather than a separate white strip. */
.cl-shero__section {
  position: relative;
  z-index: 1;
  background: var(--cl-shero-contactsbg, var(--cl-lavender));
  padding: 60px 0 0;
}
.cl-shero__section-title { color: var(--cl-heading); margin: 0 0 16px; text-align: center; }
.cl-shero__section-text { color: var(--cl-text); }
.cl-shero__section-text p { margin: 0 0 1em; }
.cl-shero__section-text > :first-child { margin-top: 0; }
.cl-shero__section-text > :last-child { margin-bottom: 0; }


.cl-shero__contacts {
  position: relative;
  z-index: 1;
  background: var(--cl-shero-contactsbg, var(--cl-lavender));
  margin-top: 40px;
  padding: 60px 0 80px;
}
/* The diagonal is cut out of the strip itself, so the two blocks meet with no
   seam, and the strip is pulled up behind the photo. */
.cl-shero.has-wedge .cl-shero__contacts {
  clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%);
  margin-top: -110px;
  padding-top: 170px;
}
/* When a section leads the lower band, the section carries the wedge and the
   contacts sit flush beneath it — one continuous lavender area, no seam. */
.cl-shero.has-section .cl-shero__contacts { margin-top: 0; padding-top: 24px; }
.cl-shero.has-wedge.has-section .cl-shero__section {
  clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%);
  margin-top: -110px;
  padding-top: 170px;
}
.cl-shero.has-wedge.has-section .cl-shero__contacts {
  clip-path: none;
  margin-top: 0;
  padding-top: 24px;
}
.cl-shero__cgrid {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr);
  gap: 26px;
  align-items: stretch;
}
.cl-shero__cgrid.is-single { grid-template-columns: 1fr; }

.cl-shero__card { background: #fff; border-radius: 22px; padding: 28px 30px; }
.cl-shero__clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cl-shero__crow { display: flex; align-items: flex-start; gap: 16px; }
.cl-shero__cico {
  flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 9px; background: var(--cl-purple); color: #fff;
  display: grid; place-items: center;
}
.cl-shero__cico svg { width: 19px; height: 19px; }
.cl-shero__cval {
  flex: 1; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 4px; color: var(--cl-text);
}
.cl-shero__cval a { color: var(--cl-text); }
.cl-shero__cval a:hover { color: var(--cl-purple); }
.cl-shero__hours { display: flex; gap: 18px; flex-wrap: wrap; }
.cl-shero__days { font-weight: 500; }
.cl-shero__time { color: var(--cl-text); }

.cl-shero__map {
  min-height: 300px; border-radius: 22px; overflow: hidden;
  background: #fff; border: 8px solid #fff;
}
.cl-shero__map .leaflet-container { border-radius: 14px; }

/* ---------- Directions: arrow that opens into a pill ---------- */
.cl-directions {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 6px;
  border-radius: 999px; background: #2D6BFF; color: #fff !important;
  text-decoration: none; overflow: hidden;
  transition: background 0.2s ease;
}
.cl-directions__ico { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; }
.cl-directions__ico svg,
.cl-directions__ico .cl-icon { width: 15px; height: 15px; }
/* Only the label changes size — the icon never moves, so the pill grows
   smoothly instead of jumping. */
.cl-directions__label {
  max-width: 0; opacity: 0; margin-left: 0;
  white-space: nowrap;
  font-size: var(--fs-small); font-weight: 600;
  transition: max-width 0.3s ease, opacity 0.22s ease, margin 0.3s ease;
}
.cl-directions:hover, .cl-directions:focus-visible { background: #1F55D8; }
.cl-directions:hover .cl-directions__label,
.cl-directions:focus-visible .cl-directions__label {
  max-width: 170px; opacity: 1; margin-left: 7px; margin-right: 5px;
}

@media (min-width: 782px) {
  /* Keep the pill on the address line while it opens; the info column is
     content-sized (auto), so it grows by exactly the pill's width — no empty
     gap on expand — and shrinks the map only by that much. */
  .cl-shero__cval { flex-wrap: nowrap; }
  .cl-shero__cval > span:first-child { min-width: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .cl-shero { padding-top: 0 !important; }
  .cl-shero__crumbs { display: none; }

  /* The photo runs to the very top of the page, with the header floating on it. */
  body.cl-hero-top .cl-shero .cl-shero__media { margin-top: 0; }

  .cl-shero__grid {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body";
  }
  .cl-shero__media { margin-inline: calc(-1 * var(--cl-gutter)); }
  .cl-shero__img { aspect-ratio: 3 / 4; border-radius: 0 0 32px 32px; }
  .cl-shero__media::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 0 0 32px 32px;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.62) 100%);
    pointer-events: none;
  }
  .cl-shero__title {
    position: absolute; top: 15%; left: 0; right: 0; z-index: 2;
    margin: 0; padding-inline: 4px;
    color: #fff; text-align: center;
    font-size: 11vw;
    line-height: 1.05;
  }

  /* Static checklist card — no animation, plain check marks. */
  .cl-shero__badges {
    position: absolute; top: auto;
    left: var(--cl-gutter); right: var(--cl-gutter);
    bottom: 7%; z-index: 2;
    display: grid; gap: 5px;
    padding: 20px 18px; border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    margin-top: 20px;
  }
  .cl-shero__badge {
    position: static; max-width: none; width: auto;
    --depth: 1;
    animation: none !important; transform: none !important;
  }
  /* Wrapped lines keep the marker beside the first one, not in the middle. */
  .cl-shero__badge-in { align-items: flex-start; }
  .cl-shero__badge-ico { margin-top: 3px; }
  .cl-shero__badge-in {
    padding: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--cl-text); font-weight: 500; gap: 12px;
    font-size: var(--fs-small);
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .cl-shero__badge-ico {
    width: 24px; height: 18px; flex: 0 0 24px;
    border-radius: 10px;
    background: var(--cl-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  }
  .cl-shero__badge-ico svg,
  .cl-shero__badge-ico i { display: none; }

  .cl-shero__body { text-align: center; padding-top: 34px; }
  .cl-shero__text { margin-inline: auto; }

  /* No badges: lift the intro text + button onto the photo, directly under the
     heading, instead of leaving them in a block beneath it. The photo becomes a
     full-height background and the heading/text/button stack over it in white. */
  .cl-shero.is-nobadges.has-photo .cl-shero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Top clears the floating header; bottom keeps some photo under the button. */
    padding: calc(var(--cl-header-h, 68px) + 46px) 6px 84px;
  }
  .cl-shero.is-nobadges.has-photo { padding-bottom: 0 !important; }
  .cl-shero.is-nobadges.has-photo .cl-shero__media {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(-1 * var(--cl-gutter));
    right: calc(-1 * var(--cl-gutter));
    margin: 0;
    z-index: 1;                    /* photo sits above the band that tucks under it */
    border-radius: 0 0 32px 32px;  /* rounded bottom belongs to the photo */
    overflow: hidden;              /* clip the image + dark veil to that shape */
  }
  .cl-shero.is-nobadges.has-photo .cl-shero__img {
    width: 100%; height: 100%;
    aspect-ratio: auto;
    border-radius: 0;              /* the media clips it */
  }
  /* Darker, more even veil + a soft text shadow so the copy stays legible even
     over the bright glass reflections in the photo. */
  .cl-shero.is-nobadges.has-photo .cl-shero__media::before {
    background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.56) 45%, rgba(0,0,0,.72) 100%);
  }
  .cl-shero.is-nobadges.has-photo .cl-shero__title,
  .cl-shero.is-nobadges.has-photo .cl-shero__text {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  }
  .cl-shero.is-nobadges.has-photo .cl-shero__title {
    position: static;
    z-index: 2;
    margin: 0 0 18px;
  }
  .cl-shero.is-nobadges.has-photo .cl-shero__body {
    position: relative;
    z-index: 2;
    color: #fff;
    padding-top: 0;
  }
  .cl-shero.is-nobadges.has-photo .cl-shero__text { color: #fff; }
  /* The band below tucks UP UNDER the photo: pulled behind its rounded bottom
     so the lavender fills the corners and continues below — the rounding stays
     on the photo, the band just slides under it. */
  .cl-shero.is-nobadges.has-photo .cl-shero__section,
  .cl-shero.is-nobadges.has-photo .cl-shero__contacts {
    position: relative;
    z-index: 0;                    /* behind the photo */
    margin-top: -34px !important;  /* pull up under the 32px rounded corners */
    border-radius: 0;
    padding-top: 108px !important; /* 34px hidden behind photo + ~74px visible */
    padding-bottom: 44px !important;
  }
  /* If a section already tucks under the photo, the contacts sit flush beneath
     the section — not under the photo — so the 108px tuck-gap doesn't repeat. */
  .cl-shero.is-nobadges.has-photo.has-section .cl-shero__contacts {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }

  .cl-shero__contacts { margin-top: 30px; padding: 34px 0 44px; }
  .cl-shero.has-wedge .cl-shero__contacts { clip-path: none; margin-top: 30px; padding-top: 34px; }
  .cl-shero__section { padding: 34px 0 22px; }
  .cl-shero.has-wedge.has-section .cl-shero__section { clip-path: none; margin-top: 30px; padding-top: 34px; }
  .cl-shero.has-section .cl-shero__contacts { margin-top: 0; padding-top: 12px; }
  .cl-shero.has-wedge.has-section .cl-shero__contacts { margin-top: 0; padding-top: 12px; }
  .cl-shero__cgrid { grid-template-columns: 1fr; gap: 18px; }
  .cl-shero__card { padding: 22px; border-radius: 18px; }
  .cl-shero__clist { gap: 22px; }
  .cl-shero__map { min-height: 260px; }

  /* No hover on touch: the pill stays open. */
  .cl-directions { height: 34px; padding: 0 10px; }
  .cl-directions__label { max-width: 200px; opacity: 1; margin-left: 7px; margin-right: 3px; }
  .cl-shero__cval { align-items: flex-start; }
  .cl-shero__hours { gap: 0; }
}

/* ---------- Editor ---------- */
.editor-styles-wrapper .cl-shero__badge { position: static; margin: 0 8px 8px 0; }
.editor-styles-wrapper .cl-shero__badges { display: flex; flex-wrap: wrap; margin-top: 14px; }
/* The shared icon picker renders a coloured chip; inside a badge the icon
   should sit bare on the purple pill. */
.editor-styles-wrapper .cl-shero__badge-ico .cl-icon-chip {
  background: transparent !important;
  color: inherit !important;
  width: 18px; height: 18px;
  border-radius: 0;
}

.cl-shero .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.72);
  color: #8A8A99;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px 0 0 0;
}
.cl-shero .leaflet-control-attribution a { color: #8A8A99; }

/* ---------- Directories (optional row under the location contacts) ---------- */
.cl-shero__dirs {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 44px;
}
.cl-shero__dirs-text {
  margin: 0;
  color: var(--cl-text, #222);
  font-size: var(--fs-body, 18px);
  font-weight: 700;
  max-width: 520px;
}
.cl-shero__dirs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 38px;
}
.cl-shero__dir img {
  display: block;
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
.cl-shero__dir a { display: block; transition: opacity 0.2s ease; }
.cl-shero__dir a:hover { opacity: 0.7; }

@media (max-width: 782px) {
  .cl-shero__dirs { flex-direction: column; gap: 16px; text-align: center; margin-top: 22px; }
  .cl-shero__dirs-list { justify-content: center; gap: 16px 24px; }
}