/* =============================================================================
   ATG Canvas Layouts
   CSS for shared-canvas Squarespace list section plugins.

   Requires: atg-simple-lists.css (for .atg-wc-nav__pill, .atg-wc-nav__btn)
   OR include the nav pill styles below if deploying standalone.

   If deploying standalone (without atg-simple-lists.css), uncomment the
   ── Standalone nav pill styles ── block at the bottom of this file.
   ============================================================================= */



/* =============================================================================
   SHARED CANVAS STYLES — CTA button + no-image placeholder
   Used across all ATG canvas plugins.
   ============================================================================= */

/* ── CTA button ──
     Pill-shaped link that matches the nav pill in colour and radius.
     1px white/current border. Sizing mirrors the nav button height.
     Placed in .atg-ps-slide__left, .atg-bp-cta-slot, .atg-gh-cta-slot. ── */
.atg-canvas-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.atg-canvas-cta:hover {
  background: rgba(0, 0, 0, 0.62);
  border-color: rgba(255, 255, 255, 0.9);
}

/* On light-background sections the dark pill may not read well.
   Sections can override with --atg-cta-bg and --atg-cta-color.  */
.atg-canvas-cta {
  background: var(--atg-cta-bg, rgba(0, 0, 0, 0.42));
  color: var(--atg-cta-color, #fff);
}

/* ── No-image placeholder ──
   Simple flat background colour. Cascades through three fallbacks:
     1. --brand-thumbnail-color  (set per-section for fine control)
     2. --brand-accent-color     (site-wide ATG accent variable)
     3. rgba(0,0,0,.77)          (universal dark fallback)

   A CSS ::after pseudo-element sits centred on the card and renders
   whatever is set in --atg-ph-content. Defaults to empty (no glyph).
   To add a Font Awesome icon or text, set the variable in Custom CSS:
     #my-section .atg-canvas-placeholder { --atg-ph-content: "\f007"; }
   or for plain text:
     #my-section .atg-canvas-placeholder { --atg-ph-content: "No Image"; }  */
.atg-canvas-placeholder {
  --atg-ph-content: "";       /* override per-section to add a glyph/text */
  background-color: var(--brand-thumbnail-color,
                    var(--brand-accent-color,
                    rgba(0, 0, 0, .77)));
  position: relative;
}

.atg-canvas-placeholder::after {
  content: var(--atg-ph-content, "");
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 8cqi, 4rem);
  font-family: inherit;
  color: #fff;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* =============================================================================
   PLUGIN A — ATG PROFILE SLIDER
   Scoped to [id*="atg-profile-slider"]
   ============================================================================= */

/* ── Hide native list items and section title ── */
[id*="atg-profile-slider"] .user-items-list-simple .list-item {
  display: none !important;
}

/* ── Canvas wrapper ──
     Full-width container that provides padding aligned to the site gutter.
     Position relative establishes the stacking context for the slides.    ── */
.atg-ps-canvas {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* Horizontal padding owned by ATG.applyLayoutWidth inline styles.
     Vertical padding only here.                                     */
  padding: clamp(48px, 7vw, 96px) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* min-height is set by JS (lockSlidesHeight) on the .atg-ps-slides child
     rather than here, so no hardcoded fallback is needed. */
}

/* ── Section label ──
     Derived from .list-section-title. Sits top-left with a small
     decorative diamond prefix added via CSS ::before.                     ── */
.atg-ps-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.6;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.atg-ps-label::before {
  content: "◆";
  font-size: 0.6em;
  opacity: 0.7;
}

/* ── Slides container ──
     The height is driven by the tallest slide. All slides are absolute
     so they stack perfectly. The container needs an explicit height so
     the canvas doesn't collapse — we set it via min-height and let the
     first active slide determine the natural height.                      ── */
.atg-ps-slides {
  position: relative;
  width: 100%;
  flex: 1;
}

/* ── Slide base ──
     All slides are stacked. Default: invisible, pointer-events off.
     No min-height here — the slides container height is locked by JS to
     the tallest slide on init, preventing layout collapse on transition.  ── */
.atg-ps-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr min(44%, 520px);
  gap: clamp(32px, 5vw, 80px);
  /* stretch: both columns grow to the same height — left column matches
     the image height so the footer can pin to the bottom.              */
  align-items: stretch;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.55s ease-in-out;
  will-change: opacity;
}

/* Active slide — in flow, visible, interactive */
.atg-ps-slide.atg-ps--active {
  position: relative;
  align-items: stretch;   /* ensure stretch persists on active state */
  opacity: 1;
  pointer-events: all;
}

/* Leaving slide — fade out while still positioned */
.atg-ps-slide.atg-ps--leaving {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Entering slide — ready to fade in */
.atg-ps-slide.atg-ps--entering {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* No-image variant — keep the 2-column grid intact.
   The placeholder div occupies the right column just like an image would.
   (Old single-column override removed — placeholder replaces the image.) */

/* ── Left column ──
     height: 100% fills the grid cell (which stretches to match the right
     column / image height). The footer uses margin-top: auto to pin to the
     bottom regardless of quote length.                                     */
.atg-ps-slide__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

/* ── Quote text ──
     Fixed height creates a stable, consistent reading area across all
     slides. overflow-y: auto adds scrollbar only when content exceeds
     the height — in practice most quotes will fit comfortably.           ── */
.atg-ps-slide__quote {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.45;
  font-weight: 400;
  color: inherit;
  height: clamp(180px, 22vw, 260px);
  overflow-y: auto;
  /* Subtle scrollbar — only visible when needed */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
  padding-right: 4px;   /* prevents text touching scrollbar */
  margin-bottom: 24px;
}

.atg-ps-slide__quote::-webkit-scrollbar {
  width: 4px;
}

.atg-ps-slide__quote::-webkit-scrollbar-track {
  background: transparent;
}

.atg-ps-slide__quote::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.atg-ps-slide__quote p {
  margin: 0 0 0.5em;
}

.atg-ps-slide__quote p:last-child {
  margin-bottom: 0;
}

/* ── Italic caption ── */
.atg-ps-slide__caption {
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.6;
  margin: 0;
}

/* ── CTA button — optional, sits between caption and footer ── */
.atg-ps-slide .atg-canvas-cta {
  margin-top: 16px;
  align-self: flex-start;
}

/* ── Footer row — byline left, nav pill right ── */
.atg-ps-slide__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;        /* pushes footer to the bottom of the left column */
  padding-top: 24px;
}

.atg-ps-slide__byline {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.atg-ps-slide__name {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: inherit;
}

.atg-ps-slide__role {
  font-size: 0.82rem;
  opacity: 0.6;
  margin: 0;
  color: inherit;
}

/* ── Right column — image ──
     aspect-ratio is set by JS from SQS data-aspect-ratio attribute.
     overflow: hidden clips the image to the container bounds.           */
.atg-ps-slide__right {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.atg-ps-slide__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;   /* JS overrides with SQS focal point */
  display: block;
  /* No border-radius here — applied to the container (.atg-ps-slide__right) */
}

/* ── Pagination ──
     Thin horizontal segments centred between byline and nav.
     Active segment transitions to full opacity; inactive are dim.
     Segments are `span` elements — no JS positioning needed.              */
.atg-ps-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.atg-ps-pagination__seg {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.18;
  transition: opacity 0.35s ease, width 0.35s ease;
}

.atg-ps-pagination__seg--active {
  opacity: 1;
  width: 32px;   /* active segment is slightly wider — subtle emphasis */
}

/* ── Nav pill — inside .atg-ps-slide__footer, right-aligned ──
     No extra padding needed — footer row handles spacing.                 */
.atg-ps-nav {
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .atg-ps-slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
    gap: 24px;
  }

  /* Image moves above text on mobile */
  .atg-ps-slide__right {
    order: -1;
  }

  .atg-ps-slide__right {
    border-radius: 12px;
    /* On mobile let aspect-ratio drive the height naturally */
    min-height: 240px;
  }

  .atg-ps-slide__quote {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  }

  .atg-ps-slide__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .atg-ps-nav {
    align-self: flex-end;
  }
}

@media (max-width: 480px) {
  .atg-ps-canvas {
    /* Horizontal padding owned by applyLayoutWidth wrapper */
    padding: 40px 0;
  }

  .atg-ps-slide__right {
    border-radius: 10px;
    min-height: 200px;
  }
}


/* =============================================================================
   STANDALONE NAV PILL STYLES
   Uncomment this block if deploying WITHOUT atg-simple-lists.css.
   If atg-simple-lists.css is already loaded these rules are redundant
   but harmless (identical declarations).
   ============================================================================= */
/*
.atg-wc-nav {
  display: none;
  justify-content: flex-start;
}

.atg-wc-nav.atg-wc-nav--visible {
  display: flex;
}

.atg-wc-nav__pill {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border-radius: 50px;
  padding: 3px;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.atg-wc-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: background 0.18s ease, opacity 0.18s ease;
  flex-shrink: 0;
}

.atg-wc-nav__btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.atg-wc-nav__btn--prev {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.atg-wc-nav__btn--dim {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
*/


/* =============================================================================
   PLUGIN B — ATG BOUNCING PROFILES
   Scoped to [id*="atg-bouncing-profiles"]
   ============================================================================= */

/* ── Hide native list items ── */
[id*="atg-bouncing-profiles"] .user-items-list-simple .list-item {
  display: none !important;
}

/* ── Canvas ── */
.atg-bp-canvas {
  width: 100%;
  box-sizing: border-box;
  /* Horizontal padding owned by outer wrapper via ATG.applyLayoutWidth */
  padding: clamp(48px, 7vw, 96px) 0;
}

/* ── Section label ── */
.atg-bp-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* No horizontal padding — canvas outer wrapper owns it */
}

.atg-bp-label::before {
  content: "◆";
  font-size: 0.6em;
  opacity: 0.7;
}

/* ── Main row ── */
.atg-bp-row {
  display: grid;
  grid-template-columns: min(44%, 440px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* ── Image column ── */
.atg-bp-img-col {
  position: relative;
  /* Extra room for the stack offset layers to breathe */
  padding: 20px 20px 20px 0;
}

/* ── Stack ──
     The 3-layer card deck. Transform-origin bottom-center so the
     idle bounce feels grounded rather than floating freely.         */
.atg-bp-stack {
  position: relative;
  transform-origin: bottom center;
  /* width:100% ensures aspect-ratio on child layers can resolve a height
     even when no image is present (images normally provide intrinsic sizing). */
  width: 100%;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.28));
  transition: transform 0.14s ease-out, filter 0.14s ease-out;
}

/* Stack compresses before a swap (anticipate phase).
   animation: none on the child active layer is handled by
   the --exit class which follows immediately after.        */
.atg-bp-stack--anticipate {
  transform: scale(0.95) rotate(-3deg);
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.36));
  transition: transform 0.14s ease-out, filter 0.14s ease-out;
}

/* ── Idle float keyframes ── */
@keyframes atg-bp-float {
  0%, 100% {
    transform: translateY(0)    rotate(-2deg);
    filter: drop-shadow(0 24px 32px rgba(0,0,0,0.28));
  }
  50% {
    transform: translateY(-14px) rotate(-1deg);
    filter: drop-shadow(0 40px 48px rgba(0,0,0,0.14));
  }
}

/* ── Card layer base ──
     All three layers are position:absolute, stacked.
     Transform-origin bottom-center for grounded bounce feel.       */
.atg-bp-layer {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  transform-origin: bottom center;
  transition:
    transform  0.48s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity    0.36s ease,
    filter     0.36s ease;
  will-change: transform, opacity, filter;
}

/* ── Active layer — top of deck, the only one that bounces ── */
.atg-bp-layer[data-depth="active"] {
  position: relative;   /* drives stack height */
  z-index: 3;
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: none;
  aspect-ratio: 3 / 4;
  /* width:100% inherited from .atg-bp-stack; aspect-ratio then resolves height.
     min-height is a safety net for very narrow viewports.                    */
  min-height: 200px;
  /* Only the active card floats — mid/back are static offsets */
  animation: atg-bp-float 3.6s ease-in-out infinite;
  transform-origin: bottom center;
}

/* ── Mid layer — one step back ── */
.atg-bp-layer[data-depth="mid"] {
  z-index: 2;
  /* Static offset — no bounce, gives the fan depth illusion */
  transform: translate(10px, 10px) rotate(2deg) scale(0.96);
  opacity: 0.72;
  filter: brightness(0.82);
  animation: none;
}

/* ── Back layer — furthest back ── */
.atg-bp-layer[data-depth="back"] {
  z-index: 1;
  /* Static offset — furthest back in the deck */
  transform: translate(20px, 20px) rotate(4deg) scale(0.91);
  opacity: 0.44;
  filter: brightness(0.65);
  animation: none;
}

/* Mid/back parallax animations removed — only active card bounces.
   The static transforms on [data-depth="mid"] and [data-depth="back"]
   already provide the fan depth effect without motion.               */

/* Mid layer floats with slightly less amplitude */
@keyframes atg-bp-float-mid {
  0%, 100% { transform: translate(10px, 10px)  rotate(2deg) scale(0.96); }
  50%       { transform: translate(10px,  4px)  rotate(1.4deg) scale(0.96); }
}

/* Back layer floats with even less amplitude */
@keyframes atg-bp-float-back {
  0%, 100% { transform: translate(20px, 20px)  rotate(4deg) scale(0.91); }
  50%       { transform: translate(20px, 15px)  rotate(3deg) scale(0.91); }
}

/* ── Exit — active card fades and recedes smoothly ── */
.atg-bp-layer--exit {
  animation: none !important;   /* pause bounce during exit */
  transform: translate(14px, 14px) rotate(3deg) scale(0.90) !important;
  opacity: 0 !important;
  filter: brightness(0.6) blur(2px) !important;
  transition:
    transform  0.36s ease-out,
    opacity    0.30s ease-out,
    filter     0.30s ease-out !important;
  z-index: 0 !important;
}

/* ── Promote — mid card springs up with overshoot, bounce starts after ──
     animation: none during the spring so the float doesn't fight
     the cubic-bezier transform. The bounce restarts automatically
     when JS reassigns data-depth="active" after the transition.    */
.atg-bp-layer--promote {
  animation: none !important;
  transform: translate(0, 0) rotate(0deg) scale(1) !important;
  opacity: 1 !important;
  filter: none !important;
  transition:
    transform  0.50s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity    0.38s ease,
    filter     0.38s ease !important;
  z-index: 4 !important;
}

/* ── Image inside layer ── */
.atg-bp-layer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* ── Colour overlay for mid/back darkening ── */
.atg-bp-layer__overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  border-radius: inherit;
}

/* ── Text column ── */
.atg-bp-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* ── Text animation states ── */
.atg-bp-text--out {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

.atg-bp-text--in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Name ── */
.atg-bp-text__name {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}

/* ── Role / title ── */
.atg-bp-text__role {
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  opacity: 0.6;
  margin: 0;
  color: inherit;
}

/* ── Quote ── */
.atg-bp-text__quote {
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  line-height: 1.68;
  color: inherit;
  margin-top: 8px;
  max-height: clamp(140px, 18vw, 200px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.atg-bp-text__quote::-webkit-scrollbar       { width: 4px; }
.atg-bp-text__quote::-webkit-scrollbar-track { background: transparent; }
.atg-bp-text__quote::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.atg-bp-text__quote p { margin: 0 0 0.5em; }
.atg-bp-text__quote p:last-child { margin-bottom: 0; }

/* ── Italic caption ── */
.atg-bp-text__caption {
  font-size: 0.82rem;
  font-style: italic;
  opacity: 0.55;
  margin: 0;
}

/* ── CTA slot ── */
.atg-bp-cta-slot {
  margin-top: 16px;
}

.atg-bp-cta-slot .atg-canvas-cta {
  align-self: flex-start;
}

/* ── Nav footer — inside text column, bottom ── */
.atg-bp-text-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .atg-bp-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
  }

  .atg-bp-img-col {
    max-width: 340px;
    margin: 0 auto;
  }

  .atg-bp-text {
    text-align: left;
  }

  .atg-bp-text-footer {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .atg-bp-canvas {
    /* Horizontal padding owned by applyLayoutWidth wrapper */
    padding: 40px 0;
  }

  .atg-bp-layer[data-depth="mid"] {
    transform: translate(7px, 7px) rotate(2deg) scale(0.96);
  }

  .atg-bp-layer[data-depth="back"] {
    transform: translate(14px, 14px) rotate(4deg) scale(0.91);
  }

  @keyframes atg-bp-float-mid {
    0%, 100% { transform: translate(7px, 7px)  rotate(2deg) scale(0.96); }
    50%       { transform: translate(7px, 2px)  rotate(1.4deg) scale(0.96); }
  }

  @keyframes atg-bp-float-back {
    0%, 100% { transform: translate(14px, 14px) rotate(4deg) scale(0.91); }
    50%       { transform: translate(14px, 9px)  rotate(3deg) scale(0.91); }
  }
}


/* =============================================================================
   PLUGIN C — ATG GALLERY HIGHLIGHTS
   Scoped to [id*="atg-gallery-highlights"]
   ============================================================================= */

/* ── Hide native list items ── */
[id*="atg-gallery-highlights"] .user-items-list-simple .list-item {
  display: none !important;
}

/* ── Canvas ──
     Three-column grid: left (counter+label+thumbs) | image | right (text)
     The left column is narrow — it holds vertically oriented elements.    */
.atg-gh-canvas {
  display: grid;
  grid-template-columns: 72px 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 64px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  /* Horizontal padding owned by outer wrapper via ATG.applyLayoutWidth */
  padding: 0 0 clamp(40px, 6vw, 80px);
}

/* ── Left column ──
     Flex column: counter at top, thumbnails grow to fill the space below.
     Label has moved above the canvas so no spacer needed here.            */
.atg-gh-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 400px;
  gap: 16px;
}

/* ── Counter ── */
.atg-gh-counter {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.55;
  white-space: nowrap;
  margin-bottom: 24px;
  transition: opacity 0.3s ease;
}

/* ── Section label ──
     Now above the canvas grid (same pattern as .atg-ps-label and
     .atg-bp-label). Horizontal, small, with the ◆ prefix.
     No longer rotated — the vertical rotation was only needed when
     constrained to the 72px left column.                           */
.atg-gh-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Horizontal padding owned by ATG.applyLayoutWidth inline styles.
     Vertical top padding separates label from section edge.           */
  padding: clamp(40px, 6vw, 80px) 0 0;
}

.atg-gh-label::before {
  content: "◆";
  font-size: 0.6em;
  opacity: 0.7;
}

/* ── Thumbnail strip ──
     Vertical stack of square thumbnails, bottom of left column.          */
.atg-gh-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

.atg-gh-thumb {
  width: 56px;
  /* height is not fixed — aspect-ratio is applied per-item by JS from
     the SQS data-aspect-ratio attribute, matching the CMS image crop.
     Falls back to 1/1 (square) if no crop is set.                    */
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  opacity: 0.55;
  flex-shrink: 0;
}

.atg-gh-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ── Placeholder inside thumbnail ──
   .atg-gh-thumb has background:none which would override the placeholder.
   Restore the accent background and constrain the ::after glyph size.   */
.atg-gh-thumb.atg-canvas-placeholder {
  background-color: var(--brand-thumbnail-color,
                    var(--brand-accent-color,
                    rgba(0, 0, 0, .77))) !important;
}

.atg-gh-thumb.atg-canvas-placeholder::after {
  font-size: 1rem;   /* smaller glyph for 56px thumb */
}

.atg-gh-thumb:hover {
  opacity: 0.85;
  transform: translateX(3px);
}

.atg-gh-thumb--active {
  border-color: currentColor;
  opacity: 1;
  transform: translateX(3px);
}

/* ── Main image wrap ──
     Relative container — two img elements stack for cross-fade.          */
.atg-gh-img-wrap {
  position: relative;
  width: 100%;
  /* aspect-ratio is set inline by JS from SQS data-aspect-ratio (Image Crop
     setting). Falls back to 2/3 if unset. Removing it from CSS prevents the
     hardcoded value from conflicting with the CMS-driven JS value.         */
  border-radius: 18px;
  overflow: hidden;
  align-self: stretch;
}

/* ── Image cross-fade ── */
.atg-gh-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  will-change: opacity;
}

.atg-gh-img--active {
  opacity: 1;
}

/* ── Right column ──
     Flex column — role/name at top, quote fills middle, nav at bottom.   */
.atg-gh-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
}

/* ── Text animation states ── */
.atg-gh-text--out {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

.atg-gh-text--in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s ease, transform 0.42s ease;
}

/* ── Role ── */
.atg-gh-role {
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  opacity: 0.55;
  margin: 0 0 4px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ── Name ── */
.atg-gh-name {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}

/* ── Quote ── */
.atg-gh-quote {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  flex: 1;
  overflow-y: auto;
  max-height: clamp(160px, 28vw, 320px);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.atg-gh-quote::-webkit-scrollbar        { width: 4px; }
.atg-gh-quote::-webkit-scrollbar-track  { background: transparent; }
.atg-gh-quote::-webkit-scrollbar-thumb  {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.atg-gh-quote p { margin: 0 0 0.5em; }
.atg-gh-quote p:last-child { margin-bottom: 0; }

/* ── Italic caption ── */
.atg-gh-caption {
  font-size: 0.82rem;
  font-style: italic;
  opacity: 0.5;
  margin: 8px 0 0;
}

/* ── CTA slot ── */
.atg-gh-cta-slot {
  margin-top: 16px;
}

/* ── Nav ── */
.atg-gh-nav {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: flex-start;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .atg-gh-canvas {
    grid-template-columns: 56px 1fr 1fr;
    gap: 0 20px;
  }
}

@media (max-width: 768px) {
  /* Stack: image top, text below, left col becomes top bar */
  .atg-gh-canvas {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 24px 0;
    /* Horizontal padding owned by applyLayoutWidth wrapper */
    padding: 40px 0;
  }

  /* Left col becomes a horizontal bar: counter left, thumbs right */
  .atg-gh-left {
    flex-direction: row;
    align-items: center;
    min-height: unset;
    height: auto;
    order: 1;
  }

  .atg-gh-counter {
    margin-bottom: 0;
    margin-right: auto;
  }

  /* Label is above canvas on mobile too.
     applyLayoutWidth owns horizontal padding; only adjust vertical here. */
  .atg-gh-label {
    padding-top: 40px;
  }

  /* Thumbs go horizontal on mobile */
  .atg-gh-thumbs {
    flex-direction: row;
    gap: 8px;
    padding-bottom: 0;
  }

  .atg-gh-img-wrap {
    order: 2;
    aspect-ratio: 3 / 2;   /* landscape on mobile to save vertical space */
    border-radius: 12px;
  }

  .atg-gh-right {
    order: 3;
  }

  .atg-gh-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .atg-gh-thumb {
    width: 48px;
    height: 48px;
  }
}