/* =============================================================================
   ATG Simple Lists — Combined Plugin CSS
   https://andtecgro.com/sqsp-scripts/atg-simple-lists.css

   Contains styles for two plugins:
     1. ATG Showcase Card List   — scoped to [id*="atg-showcase-card-list"]
     2. ATG List Slides          — scoped to [id*="atg-list-slides"]

   Shared resets and utilities appear first. Plugin-specific rules are
   clearly separated and fully namespaced so they never collide.

   Installation:
     Header Code Injection:
       <link rel="stylesheet" href="https://andtecgro.com/sqsp-scripts/atg-simple-lists.css">
   ============================================================================= */


/* =============================================================================
   PLUGIN 1 — ATG SHOWCASE CARD LIST
   ============================================================================= */

/* ── Hide native Simple list li items — replaced by our card grid ── */
[id*="atg-showcase-card-list"] .user-items-list-simple .list-item {
  display: none !important;
}

/* ── Grid wrapper ──
     Horizontal padding applied by JS based on data-layout-width:
       "inset" → var(--sqs-site-gutter) on each side
       "full"  → 0px                                                   ── */
[id*="atg-showcase-card-list"] .atg-card-grid-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* ── Card grid ──
     CSS custom properties set by JS from Squarespace design panel:
       --atg-cols       from data-num-columns        (fallback 3)
       --atg-col-gap    from data-space-between-columns (fallback 20px)
       --atg-row-gap    from data-space-between-rows    (fallback 20px) ── */
.atg-card-grid {
  display: grid;
  grid-template-columns: repeat(var(--atg-cols, 3), 1fr);
  column-gap: var(--atg-col-gap, 20px);
  row-gap: var(--atg-row-gap, 20px);
  padding: 40px 0;
  margin: 0;
  list-style: none;
}

/* ── Card shell ── */
.atg-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease;
  cursor: pointer;
}

.atg-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Image wrap ──
     position: relative + overflow: hidden clips the desc panel as it
     slides up from the bottom.
     clip-path + isolation: isolate fix a Chrome/Edge bug where
     absolutely-positioned children with z-index escape overflow:hidden
     clipping when the parent has border-radius.                        ── */
.atg-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  clip-path: inset(0 round 22px);
  isolation: isolate;
  margin: 6px 6px 0;
  flex-shrink: 0;
  /* --atg-aspect-ratio set by JS from data-image-crop; fallback 4/3 */
  aspect-ratio: var(--atg-aspect-ratio, 4 / 3);
}

.atg-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.atg-card:hover .atg-card__image-wrap img {
  transform: scale(1.03);
}

/* ── Gradient for text legibility ── */
.atg-card__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ── Title + subtitle overlay ── */
.atg-card__overlay {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  z-index: 2;
  color: #fff;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.atg-card.is-expanded .atg-card__overlay {
  transform: translateY(-8px);
}

.atg-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 3px;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.atg-card__subtitle {
  font-size: 0.82rem;
  font-weight: 500;
  margin: 0;
  opacity: 0.88;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ── Description panel ──
     Pinned to the bottom of image-wrap, slides upward on expand.
     z-index 9999 ensures it renders above all Squarespace UI chrome.  ── */
.atg-card__desc-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.atg-card.is-expanded .atg-card__desc-wrap {
  max-height: 100%;
}

.atg-card__desc-inner {
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* White frosted glass — backdrop-filter applied via JS to avoid
     Squarespace LESS parser treating saturate() as a color fn.        */
  background: rgba(255,255,255,0.72);
}

.atg-card__desc-heading {
  font-size: 0.88rem;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.35;
}

.atg-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.atg-card__tag {
  background: rgba(0,0,0,0.07);
  color: #222;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 50px;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.10);
}

.atg-card__desc-body {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.atg-card__desc-body p {
  margin: 0 0 6px;
}

.atg-card__desc-body p:last-child {
  margin-bottom: 0;
}

/* ── CTA button — glossy skeuomorphic pill ──
     Light bevel on top-left, dark shadow on bottom-right,
     soft grey gradient fill, inner gloss highlight band.              ── */
.atg-card__cta-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 48px;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: linear-gradient(
    to bottom,
    #f0efed 0%,
    #dddbd8 40%,
    #d0cecc 60%,
    #c8c6c3 100%
  );
  border: none;
  outline: none;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.95),
    -1px 0 0 0 rgba(255,255,255,0.7),
    0 2px 4px rgba(0,0,0,0.22),
    1px 1px 0 0 rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 2px rgba(0,0,0,0.10);
  transition: box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.atg-card__cta-btn:hover {
  background: linear-gradient(
    to bottom,
    #e8e6e3 0%,
    #d5d3d0 40%,
    #c8c6c3 60%,
    #bfbdba 100%
  );
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.95),
    -1px 0 0 0 rgba(255,255,255,0.7),
    0 2px 6px rgba(0,0,0,0.28),
    1px 1px 0 0 rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 2px rgba(0,0,0,0.12);
}

.atg-card__cta-btn:active {
  background: linear-gradient(
    to bottom,
    #c8c6c3 0%,
    #d0cecc 60%,
    #dddbd8 100%
  );
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.6),
    inset 0 1px 3px rgba(0,0,0,0.18),
    inset 0 -1px 1px rgba(255,255,255,0.5);
}

/* ── Toggle bar ──
     The label text is set by CONFIG.toggleLabel in the JS.
     To override the label text per-site without editing the JS, add this
     to the Squarespace Custom CSS editor (the data-label attr is always
     present but content: overrides the visible text via CSS):

       .atg-card__toggle-label { font-size: 0; }
       .atg-card__toggle-label::after { content: "Details"; font-size: 0.82rem; }

     To hide the label entirely on a specific site:
       .atg-card__toggle-label { display: none; }                          ── */
.atg-card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 20px;
  color: #222;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.atg-card__toggle-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Chevron rotates 180° on expand (points up to indicate collapse).
   Plus rotates 45° to become an X. Info and hamburger don't rotate —
   override this per-site if needed:
     .atg-card.is-expanded .atg-card__toggle-icon { transform: none; } */
/* Rotation amount set via --atg-toggle-rotation CSS custom property,
   applied by JS from CONFIG.toggleIconRotation per card.
   Default 180deg suits chevron. Override per site:
     window.ATG_CARD_CONFIG = { toggleIconRotation: 45 }  // plus → ×
     window.ATG_CARD_CONFIG = { toggleIconRotation: 0  }  // info / hamburger */
.atg-card.is-expanded .atg-card__toggle-icon {
  transform: rotate(var(--atg-toggle-rotation, 180deg));
}

.atg-card__toggle-label {
  transition: opacity 0.2s ease;
}

.atg-card.is-expanded .atg-card__toggle-label {
  opacity: 0;
  pointer-events: none;
}

/* ── Responsive ──
     min() avoided — Squarespace LESS evaluates it as a math function. ── */
@media (max-width: 768px) {
  .atg-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .atg-card-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   PLUGIN 2 — ATG LIST SLIDES
   Original CSS preserved exactly as authored.
   ============================================================================= */

/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
[id*="atg-list-slides"] {
  --atg-numeral-color: var(--color-3, transparent);
  --atg-numeral-active: var(--color-1, #1a1a1a);
  --atg-title-inactive: var(--color-3, #999);
  --atg-title-active: var(--color-1, #1a1a1a);
  /* --brand-accent-color is intentionally NOT redefined here.
     It inherits from :root so per-site overrides via :root work correctly.
     Fallback chain: site override → --brandColor (Squarespace) → green default. */
  --atg-body-color: var(--color-2, #444);
  --atg-italic-color: var(--color-3, #999);
  --atg-item-height: 380px;
  --atg-border-width: 4px;
  --atg-img-radius: 4px;
  --atg-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --atg-reveal-delay-1: 0.08s;
  --atg-reveal-delay-2: 0.24s;
  --atg-reveal-delay-3: 0.20s;
  --atg-reveal-delay-4: 0.26s;
  --atg-numeral-size: clamp(2.2rem, 4.5vw, 3.4rem);
  --atg-title-size: clamp(1rem, 1.8vw, 1.4rem);
  --atg-body-size: var(--body-font-size, 0.875rem);
  --atg-caption-size: 0.78rem;
  --atg-cta-size: 0.72rem;
}

/* ── 2. GRID LAYOUT ── */
[id*="atg-list-slides"] .user-items-list-simple,
[id*="atg-list-slides"] .list-section-container {
  display: grid !important;
  grid-template-columns: repeat(var(--atg-max-cols, 3), 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

[id*="atg-list-slides"] .user-items-list-carousel__gutter {
  display: none !important;
}

/* ── 3. LIST ITEM SHELL ── */
[id*="atg-list-slides"] .list-item,
[id*="atg-list-slides"] .user-items-list-carousel__slide {
  position: relative !important;
  padding: 2.2rem 2rem 2rem !important;
  min-height: var(--atg-item-height) !important;
  overflow: hidden !important;
  border-left: var(--atg-border-width) solid #eee !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  cursor: pointer !important;
  background: transparent !important;
  transform: none !important;
  transition: border-color var(--atg-transition), background var(--atg-transition) !important;
}

[id*="atg-list-slides"] .list-item:hover,
[id*="atg-list-slides"] .user-items-list-carousel__slide:hover {
  border-left-color: color-mix(in srgb, var(--brand-accent-color, var(--brandColor, #4caf6e)) 35%, transparent) !important;
}

[id*="atg-list-slides"] .list-item.atg-active,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active {
  border-left-color: var(--brand-accent-color, var(--brandColor, #4caf6e)) !important;
  background: rgba(255,255,255,.25) !important;
}

/* ── 4. NUMERAL ── */
.atg-numeral {
  display: block;
  font-size: var(--atg-numeral-size);
  font-family: var(--heading-font-family, inherit);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--atg-numeral-color);
  margin-bottom: 0.5rem;
  transition: color var(--atg-transition);
  user-select: none;
  pointer-events: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, .77);
}

[id*="atg-list-slides"] .list-item.atg-active .atg-numeral,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .atg-numeral {
  color: var(--atg-numeral-active);
}

/* ── 5. TITLE ── */
[id*="atg-list-slides"] .list-item-content__title,
[id*="atg-list-slides"] h2.list-item-content__title {
  font-size: var(--atg-title-size) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--atg-title-inactive) !important;
  opacity: 0.5;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  transition: color var(--atg-transition), opacity var(--atg-transition) !important;
}

[id*="atg-list-slides"] .list-item.atg-active .list-item-content__title,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .list-item-content__title {
  color: var(--atg-title-active) !important;
  opacity: 1;
}

/* ── 6. EXPAND BODY ── */
.atg-expand-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--atg-transition);
}

[id*="atg-list-slides"] .list-item.atg-active .atg-expand-body,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .atg-expand-body {
  max-height: 900px;
}

.atg-expand-inner {
  padding-bottom: 1.5rem;
}

/* ── 7. DESCRIPTION TEXT ── */
.atg-description-text {
  font-size: var(--atg-body-size);
  font-family: var(--body-font-family, inherit);
  color: var(--atg-body-color);
  line-height: 1.65;
  margin: 1rem 0 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--atg-transition), transform var(--atg-transition);
}

[id*="atg-list-slides"] .list-item.atg-active .atg-description-text,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .atg-description-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--atg-reveal-delay-1);
}

/* ── 8. IMAGE ── */
.atg-image-wrap {
  margin: 0.9rem 0 0;
  border-radius: var(--atg-img-radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity var(--atg-transition), transform var(--atg-transition);
  aspect-ratio: var(--atg-img-ratio, auto);
}

[id*="atg-list-slides"] .list-item.atg-active .atg-image-wrap,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .atg-image-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--atg-reveal-delay-2);
}

.atg-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ── 9. ITALIC CAPTION ── */
.atg-italic-caption {
  display: block;
  font-size: var(--atg-caption-size);
  font-style: italic;
  color: var(--atg-italic-color);
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity var(--atg-transition);
  transition-delay: var(--atg-reveal-delay-3);
}

[id*="atg-list-slides"] .list-item.atg-active .atg-italic-caption,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .atg-italic-caption {
  opacity: 1;
}

/* ── 10. CTA LINK ── */
.atg-cta-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: var(--atg-cta-size);
  font-family: var(--body-font-family, inherit);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-accent-color, var(--brandColor, #4caf6e));
  text-decoration: none;
  border-bottom: 1px solid var(--brand-accent-color, var(--brandColor, #4caf6e));
  padding-bottom: 1px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--atg-transition), transform var(--atg-transition),
              color 0.2s ease, border-color 0.2s ease;
  transition-delay: var(--atg-reveal-delay-4);
}

.atg-cta-link:hover {
  color: var(--atg-title-active);
  border-color: var(--atg-title-active);
}

[id*="atg-list-slides"] .list-item.atg-active .atg-cta-link,
[id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active .atg-cta-link {
  opacity: 1;
  transform: translateY(0);
}

/* ── 11. HIDE SQS NATIVE ELEMENTS ── */
[id*="atg-list-slides"] .list-item-media,
[id*="atg-list-slides"] .user-items-list-carousel__media-container,
[id*="atg-list-slides"] .list-item-content__description,
[id*="atg-list-slides"] .list-item-content__button-wrapper,
[id*="atg-list-slides"] .list-item-content__button-container {
  display: none !important;
}

/* ── 12. MOBILE — STICKY + ALWAYS EXPANDED ── */
@media (max-width: 767px) {
  [id*="atg-list-slides"] {
    --atg-item-height: auto;
  }

  [id*="atg-list-slides"] .user-items-list-simple,
  [id*="atg-list-slides"] .list-section-container {
    display: block !important;
    grid-template-columns: none !important;
  }

  [id*="atg-list-slides"] .list-item,
  [id*="atg-list-slides"] .user-items-list-carousel__slide {
    position: sticky !important;
    top: 0 !important;
    z-index: var(--atg-z, 1) !important;
    overflow: visible !important;
    min-height: 0 !important;
    background: var(--background-color, var(--color-background, #fff)) !important;
    border-left: none !important;
    border-top: var(--atg-border-width) solid #eee !important;
    border-bottom: none !important;
  }

  [id*="atg-list-slides"] .list-item.atg-sticky-last,
  [id*="atg-list-slides"] .user-items-list-carousel__slide.atg-sticky-last {
    position: relative !important;
  }

  [id*="atg-list-slides"] .list-item.atg-active,
  [id*="atg-list-slides"] .user-items-list-carousel__slide.atg-active {
    border-top-color: var(--brand-accent-color, var(--brandColor, #4caf6e)) !important;
    background: color-mix(
      in srgb,
      var(--background-color, var(--color-background, #fff)) 94%,
      var(--brand-accent-color, var(--brandColor, #4caf6e)) 6%
    ) !important;
  }

  .atg-sticky-sentinel {
    position: absolute;
    top: -1px;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
  }

  [id*="atg-list-slides"] .atg-expand-body {
    max-height: none !important;
    overflow: visible !important;
  }

  [id*="atg-list-slides"] .atg-description-text,
  [id*="atg-list-slides"] .atg-image-wrap,
  [id*="atg-list-slides"] .atg-italic-caption,
  [id*="atg-list-slides"] .atg-cta-link {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }

  [id*="atg-list-slides"] .list-item-content__title {
    opacity: 1 !important;
  }
}

html.squarespace-damask .sqs-blockStatus,
.sqs-block .removed-script {
  display: none !important;
}


/* =============================================================================
   PLUGIN 3 — ATG SIMPLE PROJECT CARD
   Scoped to [id*="atg-simple-project-cards"]
   ============================================================================= */

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

/* ── Grid wrapper ── */
[id*="atg-simple-project-cards"] .atg-proj-grid-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* ── Project card grid — inherits --atg-cols/gap from ATG.readSqsDesignSettings ── */
.atg-proj-grid {
  display: grid;
  grid-template-columns: repeat(var(--atg-cols, 3), 1fr);
  column-gap: var(--atg-col-gap, 24px);
  row-gap: var(--atg-row-gap, 24px);
  padding: 40px 0;
  margin: 0;
  list-style: none;
}

/* ── Card shell ── */
.atg-proj-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}

/* ── Image wrap ──
     position: relative so the hover overlay anchors inside it.
     overflow: hidden clips the overlay and image scale transform.    ── */
.atg-proj-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: var(--atg-aspect-ratio, 4 / 3);
  flex-shrink: 0;
}

.atg-proj-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.atg-proj-card:hover .atg-proj-card__image-wrap img {
  transform: scale(1.04);
}

/* ── Toggle button — open/close affordance icon ──
     A real <button> element injected by JS, positioned bottom-right of
     the image. Always visible. Rotates 45° when the overlay is open,
     forming an × to signal "tap to close".
     Using a real element (not ::after) gives us a clean independent
     click target — no conflict with the image open listener or CTA link. ── */
.atg-proj-card__toggle-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.atg-proj-card__toggle-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* Rotate to × when overlay is open (JS class, desktop + mobile) */
.atg-proj-card.atg-proj-is-open .atg-proj-card__toggle-btn {
  transform: rotate(45deg);
}

/* Also rotate on desktop hover — the overlay appears on hover so the
   icon should reflect the open state whenever content is visible.    */
.atg-proj-card:hover:not(.atg-proj-manually-closed) .atg-proj-card__toggle-btn {
  transform: rotate(45deg);
}

/* ── Open state — overlay stays visible ── */
.atg-proj-card.atg-proj-is-open .atg-proj-card__hover-overlay {
  opacity: 1;
}

/* ── Hover overlay ──
     Covers the full image, fades in on card hover.
     Contains optional body copy and the CTA pill.
     backdrop-filter is set inline via JS (LESS parser workaround).   ── */
.atg-proj-card__hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Only apply hover overlay when card has NOT been manually closed.
   Without :not(.atg-proj-is-open), hovering after a manual close
   re-shows the overlay via CSS and the JS close state is overridden. */
.atg-proj-card:hover:not(.atg-proj-manually-closed) .atg-proj-card__hover-overlay {
  opacity: 1;
}

/* ── Hover body text ── */
.atg-proj-card__hover-body {
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
  margin: 0;
  max-width: 85%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── CTA pill button over image ──
     Frosted glass — backdrop-filter set inline via JS.               ── */
.atg-proj-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 44px;
  border-radius: 50px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* .atg-proj-card__cta::before {
  content: "→";
  font-size: 0.88em;
} */

.atg-proj-card__cta:hover {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.65);
}

/* ── Info bar ──
     Sits below the image, white pill with title, subtitle, and date.
     On card hover, background tints to a warm accent and text adjusts. ── */
.atg-proj-card__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-top: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  min-height: 52px;
}

.atg-proj-card:hover .atg-proj-card__info {
  background: var(--brand-accent-color, #ff6b35);
  box-shadow: 0 4px 20px rgba(255,107,53,0.35);
}

/* ── Info left — title + separator + subtitle ── */
.atg-proj-card__info-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.atg-proj-card__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.atg-proj-card:hover .atg-proj-card__title {
  color: #fff;
}

.atg-proj-card__sep {
  color: #bbb;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.atg-proj-card:hover .atg-proj-card__sep {
  color: rgba(255,255,255,0.6);
}

.atg-proj-card__subtitle {
  font-size: 0.85rem;
  font-weight: 400;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.atg-proj-card:hover .atg-proj-card__subtitle {
  color: rgba(255,255,255,0.9);
}

/* ── Date — right-aligned ── */
.atg-proj-card__date {
  font-size: 0.82rem;
  font-weight: 400;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.atg-proj-card:hover .atg-proj-card__date {
  color: rgba(255,255,255,0.85);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .atg-proj-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .atg-proj-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile scroll reveal ──
     .atg-proj-is-visible is added by JS via IntersectionObserver when a
     card enters the viewport centre band on mobile (≤767px).

     Two affordances fire on visible:
       1. Info bar tints to --brand-accent-color (mirrors the desktop hover)
       2. A plus-in-circle icon appears in the bottom-left of the image,
          hinting that the card is tappable for more content.

     The + icon is a pure CSS ::after on the image-wrap — no extra DOM node.
     It uses an SVG data URI so no external asset is needed.               ── */
@media (max-width: 767px) {
  /* Info bar tints to accent colour when in view */
  .atg-proj-card.atg-proj-is-visible .atg-proj-card__info {
    background: var(--brand-accent-color, #ff6b35);
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
  }

  /* Invert info bar text to white when tinted */
  .atg-proj-card.atg-proj-is-visible .atg-proj-card__title,
  .atg-proj-card.atg-proj-is-visible .atg-proj-card__subtitle,
  .atg-proj-card.atg-proj-is-visible .atg-proj-card__date {
    color: #fff;
  }

  .atg-proj-card.atg-proj-is-visible .atg-proj-card__sep {
    color: rgba(255, 255, 255, 0.6);
  }

  /* Keep icon rotated and info tinted when open on mobile */
  .atg-proj-card.atg-proj-is-open .atg-proj-card__info {
    background: var(--brand-accent-color, #ff6b35);
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
  }

  .atg-proj-card.atg-proj-is-open .atg-proj-card__title,
  .atg-proj-card.atg-proj-is-open .atg-proj-card__subtitle,
  .atg-proj-card.atg-proj-is-open .atg-proj-card__date {
    color: #fff;
  }

  .atg-proj-card.atg-proj-is-open .atg-proj-card__sep {
    color: rgba(255, 255, 255, 0.6);
  }
}


/* =============================================================================
   PLUGIN 4 — ATG STACK CARDS
   Scoped to [id*="atg-stack-cards"]
   ============================================================================= */

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

/* ── Grid wrapper ── */
[id*="atg-stack-cards"] .atg-stack-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* ── Stack grid — each cell is one card.
     Columns and gaps driven by ATG.readSqsDesignSettings.
     Cards stack vertically inside each column via flex-direction: column.  ── */
.atg-stack-grid {
  display: grid;
  grid-template-columns: repeat(var(--atg-cols, 1), 1fr);
  column-gap: var(--atg-col-gap, 24px);
  row-gap: var(--atg-row-gap, 16px);
  padding: 40px 0;
  margin: 0;
  list-style: none;
}

/* ── Card shell ──
     Horizontal flex row: image left, content right.
     Min-height 0 ensures the card height is driven by content, not the grid. ── */
.atg-stack-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.atg-stack-card:hover {
  box-shadow: 0 6px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
}

/* ── Image wrap ──
     Fixed width column on the left; height stretches to match the content.
     aspect-ratio on the wrap maintains proportions from the SQS design panel. ── */
.atg-stack-card__image-wrap {
  flex-shrink: 0;
  width: 180px;
  aspect-ratio: var(--atg-aspect-ratio, 3 / 4);
  overflow: hidden;
  border-radius: 12px;
  margin: 10px 0 10px 10px;
  align-self: stretch;
}

.atg-stack-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.atg-stack-card:hover .atg-stack-card__image-wrap img {
  transform: scale(1.04);
}

/* ── Content area ──
     Flex column — title + body grow to fill, footer pins to the bottom.     ── */
.atg-stack-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
}

/* ── Title ── */
.atg-stack-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: #111;
  margin: 0 0 10px;
  transition: color 0.22s ease;
}

.atg-stack-card:hover .atg-stack-card__title {
  color: var(--brand-highlight-color, var(--brand-accent-color, var(--brandColor, #ff6b35)));
}

/* ── Body text ── */
.atg-stack-card__body {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
  flex-grow: 1;
}

/* ── Footer: tag left, chevron link right ── */
.atg-stack-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

/* ── ALL CAPS tag ── */
.atg-stack-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #888;
  text-transform: uppercase;
}

/* ── Chevron link button ──
     Circle background with a chevron icon. On hover:
       - Circle fills with --brand-accent-color
       - Icon slides right then snaps back (translate animation)            ── */
.atg-stack-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  color: #333;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.atg-stack-card:hover .atg-stack-card__link {
  background: var(--brand-accent-color, var(--brandColor, #ff6b35));
  border-color: var(--brand-accent-color, var(--brandColor, #ff6b35));
  color: #fff;
}

/* ── Chevron icon — slides right on hover then returns ── */
.atg-stack-card__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.atg-stack-card:hover .atg-stack-card__link-icon {
  transform: translateX(3px);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .atg-stack-card__image-wrap {
    width: 130px;
  }

  .atg-stack-card__title {
    font-size: 1.05rem;
  }
}

@media (max-width: 540px) {
  /* Force single column regardless of Squarespace column setting */
  .atg-stack-grid {
    grid-template-columns: 1fr;
  }

  /* Flip card to vertical layout */
  .atg-stack-card {
    flex-direction: column;
  }

  .atg-stack-card__image-wrap {
    width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    aspect-ratio: 16 / 9;
  }

  .atg-stack-card__content {
    padding: 16px 18px 16px;
  }
}

/* ── Mobile scroll reveal ──
     .atg-stack-is-visible is added by JS via IntersectionObserver when a
     card enters the viewport centre band (-50% rootMargin) on mobile.
     Mirrors the desktop hover state: title colour, chevron fill, shadow.  ── */
@media (max-width: 767px) {
  .atg-stack-card.atg-stack-is-visible {
    box-shadow: 0 6px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
  }

  .atg-stack-card.atg-stack-is-visible .atg-stack-card__title {
    color: var(--brand-highlight-color, var(--brand-accent-color, var(--brandColor, #ff6b35)));
  }

  .atg-stack-card.atg-stack-is-visible .atg-stack-card__link {
    background: var(--brand-accent-color, var(--brandColor, #ff6b35));
    border-color: var(--brand-accent-color, var(--brandColor, #ff6b35));
    color: #fff;
  }

  .atg-stack-card.atg-stack-is-visible .atg-stack-card__link-icon {
    transform: translateX(3px);
  }
}


/* =============================================================================
   PLUGIN 5 — ATG WILD CARDS
   Scoped to [id*="atg-wild-cards"]
   ============================================================================= */

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

[id*="atg-wild-cards"] .atg-wc-wrapper {
  width: 100%;
  box-sizing: border-box;
  /* Wrapper stays full-width so it doesn't cause page-level scroll */
  overflow: hidden;
}

/* ── Scroll container ──
     This is the actual scroll surface. overflow-x: auto enables horizontal
     scroll; overflow-y: hidden clips tilt overflow above/below.
     The vertical padding (80px) gives tilted cards room to breathe without
     being clipped. -80px negative margin pulls the section back to its
     natural height so vertical spacing isn't affected.
     -webkit-overflow-scrolling for momentum scroll on iOS.               ── */
[id*="atg-wild-cards"] .atg-wc-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide the scrollbar visually on most browsers while keeping it functional */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

[id*="atg-wild-cards"] .atg-wc-scroll::-webkit-scrollbar {
  display: none;                /* Chrome/Safari */
}

[id*="atg-wild-cards"] .atg-wc-scroll:active {
  cursor: grabbing;
}

/* ── Grid ──
     Single-row flex layout — cards sit side by side and scroll horizontally.
     Fixed card width (280px default) ensures cards are always fully visible
     and the scroll content width is predictable.
     --atg-col-gap is still applied from readSqsDesignSettings.           ── */
.atg-wc-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--atg-col-gap, 28px);
  /* Vertical padding lives on the grid (scroll content), not the scroll
     container — padding on the container gets clipped by overflow-y: hidden.
     4rem (~64px) clears: tilt extent (14px) + scale-up (11px) + shadow (40px). */
  padding: 4rem var(--sqs-site-gutter, 40px);
  margin: 0;
  list-style: none;
  width: max-content;          /* lets the flex row expand as wide as needed */
}

/* ── Card shell ──
     --atg-wc-bg and --atg-wc-tilt are set per-card by JS.
     Fixed width + min-height defines the card size in the flex row.
     aspect-ratio is also set so the card scales proportionally.    ── */
.atg-wild-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  width: 280px;
  min-height: 300px;
  aspect-ratio: var(--atg-aspect-ratio, 3 / 4);
  background: var(--atg-wc-bg, #7c3aed);
  transform: rotate(var(--atg-wc-tilt, 0deg)) scale(1);
  transform-origin: center center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    opacity 0.3s ease;
  will-change: transform;
  z-index: 1;
}

/* ── Hover — levels out and lifts ── */
.atg-wild-card:hover {
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 20px 60px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.16);
  z-index: 10;
}

/* ── Active — snaps upright, comes to foreground ── */
.atg-wild-card.atg-wc-active {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 0 28px 80px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.2);
  z-index: 20;
}

/* ── Sibling dim — other cards fade when one is active ── */
.atg-wild-card.atg-wc-sibling-dim {
  opacity: 0.45;
  transform: rotate(var(--atg-wc-tilt, 0deg)) scale(0.97);
}

/* ── Image card ── */
.atg-wild-card--image .atg-wild-card__image-wrap {
  position: absolute;
  inset: 0;
}

.atg-wild-card--image .atg-wild-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.atg-wild-card:hover .atg-wild-card__image-wrap img {
  transform: scale(1.05);
}

/* ── Text card ── */
.atg-wild-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px 24px;
  color: #fff;
}

/* ── Numeral — large display number, top of content area ──
     Positioned absolutely at top so it anchors to the card top
     regardless of title/body length.                               ── */
.atg-wild-card__numeral {
  position: absolute;
  top: 18px;
  left: 20px;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.03em;
  /* Subtle text shadow for depth on darker cards */
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
  user-select: none;
}

/* ── Title ── */
.atg-wild-card__title {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Body copy ── */
.atg-wild-card__body {
  font-size: clamp(0.78rem, 1.3vw, 0.9rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* ── Liquid glass scroll indicator ──
     A custom position indicator below the card row — no native scrollbar.
     The thumb position is driven by --atg-wc-thumb-x set by JS on the track.

     Liquid glass effect achieved by layering:
       1. Semi-transparent white background
       2. backdrop-filter blur + saturate for the frosted glass look
       3. A top-edge specular highlight via ::before
       4. A soft inner shadow and outer drop shadow for depth               ── */

/* ── Navigation arrows ──
     A dark translucent pill containing prev/next chevron buttons,
     right-aligned below the card row.
     Dark semi-transparent background picks up section background via
     backdrop-filter. Hidden (.atg-wc-nav) until JS adds --visible.      ── */
[id*="atg-wild-cards"] .atg-wc-wrapper {
  position: relative;
}

.atg-wc-nav {
  /* Hidden by default — shown by JS when content overflows */
  display: none;
  justify-content: flex-end;
  padding: 12px var(--sqs-site-gutter, 40px) 0;
  /* Pull nav up closer to the cards, partially offsetting the
     4rem grid padding-bottom used for tilt/shadow clearance.  */
  margin-top: -2rem;
}

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

/* Pill wraps both buttons as one unit — matches the reference */
.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:active {
  background: rgba(255, 255, 255, 0.25);
}

/* Thin divider line between the two buttons */
.atg-wc-nav__btn--prev {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* Dim state — at start (prev) or end (next) */
.atg-wc-nav__btn--dim {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Mobile tilt-to-upright on scroll ──
     .atg-wc-in-view is toggled by IntersectionObserver when a card enters
     the horizontal centre band of the scroll container.
     Overrides the resting rotate(var(--atg-wc-tilt)) with 0deg.
     Only meaningful on mobile — desktop :hover already handles levelling.    ── */
@media (max-width: 767px) {
  .atg-wild-card.atg-wc-in-view {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 14px 48px rgba(0,0,0,0.25), 0 3px 12px rgba(0,0,0,0.14);
  }
}

/* ── Responsive ──
     The flex scroll layout works on all screen sizes — no breakpoints needed.
     Cards are always fixed-width and scroll horizontally.
     On mobile, reduce card width slightly to hint at more cards off-screen.  ── */
@media (max-width: 768px) {
  .atg-wild-card {
    width: 240px;
  }
}

@media (max-width: 480px) {
  .atg-wild-card {
    width: 200px;
    min-height: 260px;
    border-radius: 20px;
  }
}


/* =============================================================================
   ATG CAROUSEL MODE
   Applied by atg-carousel-mode.js when a section is converted to carousel.
   Scoped to .atg-carousel-active so it never affects normal grid layout.
   ============================================================================= */

/* ── Scroll container ── */
.atg-carousel-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Negative vertical margin offsets the 4rem grid padding used for
     shadow/tilt clearance so section spacing stays natural */
  margin-top: -2rem;
  margin-bottom: -2rem;
}

/* ── Zero out wrapper and section gutters in carousel mode ──
     Ensures cards scroll flush to the section edge.
     JS also applies these as inline styles for specificity.   ── */
.atg-carousel-active .atg-card-grid-wrapper,
.atg-carousel-active .atg-proj-grid-wrapper,
.atg-carousel-active .atg-stack-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.atg-carousel-active .user-items-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.atg-carousel-scroll::-webkit-scrollbar {
  display: none;
}

.atg-carousel-scroll:active {
  cursor: grabbing;
}

/* ── List Slides in carousel mode ──
     The native <ul> needs overflow: visible so the sticky positioning
     used on mobile doesn't interfere, and the fixed-height grid rules
     from the List Slides CSS are overridden by the inline flex styles. ── */
.atg-carousel-active[id*="atg-list-slides"] .user-items-list-simple {
  overflow: visible !important;
}

/* Reset List Slides item sticky positioning when in carousel mode
   (sticky is mobile-only anyway but belt-and-suspenders) */
.atg-carousel-active[id*="atg-list-slides"] .list-item {
  position: relative !important;
  transform: none !important;
}

/* ── Nav arrows positioning for carousel mode ──
     The .atg-wc-nav styles already handle appearance; this just ensures
     right-alignment below the scroll row.                               ── */
.atg-carousel-active .atg-wc-nav {
  margin-top: 0;
}

/* ── Mobile carousel ──
     Default: carousel is disabled on mobile (scroll/flex reset, nav hidden).
     When mobileCarousel is enabled via config, JS skips the desktop guard
     and the carousel functions normally. The CSS below applies universally;
     the JS controls whether convertSection() runs on mobile at all.    ── */
@media (max-width: 767px) {
  /* When carousel mode is NOT active on mobile, reset to normal layout */
  .atg-carousel-scroll:not(.atg-mobile-carousel) {
    overflow: visible;
    margin: 0;
    cursor: default;
  }

  /* Hide nav on mobile unless mobileCarousel is explicitly enabled.
     JS adds .atg-mobile-carousel class to scrollEl when mobile is on. */
  .atg-carousel-active .atg-wc-nav {
    display: none;
  }

  .atg-carousel-active .atg-wc-nav.atg-mobile-carousel-nav {
    display: flex;
  }
}