/* PP Loop for Bricks — Frontend Styles */

/* Grid & List */
.pp-loop-grid{display:grid;gap:24px}
.pp-loop-list{display:flex;flex-direction:column;gap:24px}
.pp-loop-item{position:relative;min-height:20px}

/* Fallback */
.pp-loop-fallback{padding:16px;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:4px}
.pp-loop-fallback strong{display:block;margin-bottom:8px}
.pp-loop-fallback img{max-width:100%;height:auto;margin-top:8px;border-radius:4px}
.pp-loop-empty{text-align:center;padding:40px 20px;color:#999;font-style:italic}


/* =====================================================================
   TABS — Base
   ===================================================================== */
.pp-loop-tabs{
  display:flex;
  flex-direction:column;
  width:100%;
}

/* Vertical orientation */
.pp-loop-tabs.pp-loop-tabs--vertical{
  flex-direction:row !important;
  align-items:flex-start;
}

/* Tab nav — horizontal */
.pp-loop-tabs-nav{
  display:flex;
  gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  flex-shrink:0;
}
/* Tab nav — vertical */
.pp-loop-tabs--vertical > .pp-loop-tabs-nav{
  flex-direction:column;
  flex-shrink:0;
  min-width:180px;
  overflow-x:visible;
  overflow-y:auto;
  border-right:1px solid #e0e0e0;
  border-bottom:none;
}

/* Tab button — base reset */
.pp-loop-tab-btn{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:transparent;
  color:#666;
  padding:12px 24px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
  transition:all .2s ease;
  position:relative;
  text-align:left;
  outline:none;
}
.pp-loop-tab-btn:hover{color:#333}
.pp-loop-tab-btn.pp-active{color:#111;font-weight:600}

/* Tab content */
.pp-loop-tabs-content{flex:1;min-width:0}
.pp-loop-tab-panel{padding:24px 0}
.pp-loop-tabs--vertical .pp-loop-tab-panel{padding:0 0 0 24px}
.pp-loop-tab-panel[hidden]{display:none !important}


/* =====================================================================
   TABS — Preset: Clean (no decoration, just text)
   ===================================================================== */
.pp-tabs--clean .pp-loop-tab-btn{
  padding:10px 20px;
  color:#888;
}
.pp-tabs--clean .pp-loop-tab-btn:hover{color:#333;background:rgba(0,0,0,.03)}
.pp-tabs--clean .pp-loop-tab-btn.pp-active{color:#111}


/* =====================================================================
   TABS — Preset: Underline (active tab has bottom/left border line)
   ===================================================================== */
.pp-tabs--underline > .pp-loop-tabs-nav{
  border-bottom:2px solid #e5e5e5;
}
.pp-tabs--underline .pp-loop-tab-btn{
  padding:12px 24px;
  margin-bottom:-2px;
  border-bottom:2px solid transparent;
}
.pp-tabs--underline .pp-loop-tab-btn.pp-active{
  border-bottom-color:#111;
  color:#111;
}
/* Vertical underline */
.pp-tabs--underline.pp-loop-tabs--vertical > .pp-loop-tabs-nav{
  border-bottom:none;
  border-right:2px solid #e5e5e5;
}
.pp-tabs--underline.pp-loop-tabs--vertical .pp-loop-tab-btn{
  margin-bottom:0;
  margin-right:-2px;
  border-bottom:none;
  border-right:2px solid transparent;
}
.pp-tabs--underline.pp-loop-tabs--vertical .pp-loop-tab-btn.pp-active{
  border-right-color:#111;
  border-bottom-color:transparent;
}


/* =====================================================================
   TABS — Preset: Boxed (active tab has background box)
   ===================================================================== */
.pp-tabs--boxed > .pp-loop-tabs-nav{
  background:#f5f5f5;
  padding:4px;
  border-radius:8px;
  gap:4px;
}
.pp-tabs--boxed .pp-loop-tab-btn{
  padding:10px 20px;
  border-radius:6px;
}
.pp-tabs--boxed .pp-loop-tab-btn:hover{
  background:rgba(0,0,0,.05);
}
.pp-tabs--boxed .pp-loop-tab-btn.pp-active{
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  color:#111;
}
/* Vertical boxed */
.pp-tabs--boxed.pp-loop-tabs--vertical > .pp-loop-tabs-nav{
  border-right:none;
  flex-direction:column;
}


/* =====================================================================
   TABS — Preset: Pills (rounded pill buttons)
   ===================================================================== */
.pp-tabs--pills > .pp-loop-tabs-nav{
  gap:8px;
  padding:4px 0;
}
.pp-tabs--pills .pp-loop-tab-btn{
  padding:8px 20px;
  border-radius:999px;
  background:#f0f0f0;
  color:#555;
  font-size:13px;
}
.pp-tabs--pills .pp-loop-tab-btn:hover{
  background:#e4e4e4;
  color:#333;
}
.pp-tabs--pills .pp-loop-tab-btn.pp-active{
  background:#111;
  color:#fff;
}
/* Vertical pills */
.pp-tabs--pills.pp-loop-tabs--vertical > .pp-loop-tabs-nav{
  border-right:none;
  gap:6px;
  padding:0 16px 0 0;
}


/* =====================================================================
   TABS — Preset: Minimal (just a dot or subtle indicator)
   ===================================================================== */
.pp-tabs--minimal .pp-loop-tab-btn{
  padding:10px 20px;
  color:#999;
  font-weight:400;
}
.pp-tabs--minimal .pp-loop-tab-btn::after{
  content:'';
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%) scale(0);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#111;
  transition:transform .2s ease;
}
.pp-tabs--minimal .pp-loop-tab-btn.pp-active{
  color:#111;
  font-weight:500;
}
.pp-tabs--minimal .pp-loop-tab-btn.pp-active::after{
  transform:translateX(-50%) scale(1);
}
/* Vertical minimal */
.pp-tabs--minimal.pp-loop-tabs--vertical > .pp-loop-tabs-nav{
  border-right:none;
}
.pp-tabs--minimal.pp-loop-tabs--vertical .pp-loop-tab-btn::after{
  bottom:auto;
  left:auto;
  right:4px;
  top:50%;
  transform:translateY(-50%) scale(0);
}
.pp-tabs--minimal.pp-loop-tabs--vertical .pp-loop-tab-btn.pp-active::after{
  transform:translateY(-50%) scale(1);
}


/* =====================================================================
   TABS — Preset: Folder (classic folder/card tabs)
   ===================================================================== */
.pp-tabs--folder > .pp-loop-tabs-nav{
  border-bottom:1px solid #ddd;
}
.pp-tabs--folder .pp-loop-tab-btn{
  padding:10px 20px;
  border:1px solid transparent;
  border-bottom:none;
  margin-bottom:-1px;
  border-radius:6px 6px 0 0;
  background:transparent;
}
.pp-tabs--folder .pp-loop-tab-btn:hover{
  background:#f9f9f9;
}
.pp-tabs--folder .pp-loop-tab-btn.pp-active{
  background:#fff;
  border-color:#ddd;
  color:#111;
}
/* Vertical folder */
.pp-tabs--folder.pp-loop-tabs--vertical > .pp-loop-tabs-nav{
  border-bottom:none;
  border-right:1px solid #ddd;
}
.pp-tabs--folder.pp-loop-tabs--vertical .pp-loop-tab-btn{
  border:1px solid transparent;
  border-right:none;
  margin-bottom:0;
  margin-right:-1px;
  border-radius:6px 0 0 6px;
}
.pp-tabs--folder.pp-loop-tabs--vertical .pp-loop-tab-btn.pp-active{
  border-color:#ddd;
  border-right-color:transparent;
}


/* =====================================================================
   ACCORDION — Base
   ===================================================================== */
.pp-loop-accordion{
  display:flex;
  flex-direction:column;
  width:100%;
}

.pp-loop-acc-item{overflow:hidden}

/* Accordion header — base reset */
.pp-loop-acc-header{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  border:none;
  background:transparent;
  color:#333;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  text-align:left;
  transition:all .2s ease;
  outline:none;
}
.pp-loop-acc-header:hover{color:#000}

/* Accordion icon — chevron */
.pp-loop-acc-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:1em;
  height:1em;
  font-size:16px;
  transition:transform .25s ease;
}
.pp-loop-acc-icon--chevron::before{
  content:'';
  display:block;
  width:.4em;
  height:.4em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-.12em;
}
.pp-active > .pp-loop-acc-icon--chevron::before{
  transform:rotate(-135deg);
  margin-top:.08em;
}

/* Accordion icon — plus/minus */
.pp-loop-acc-icon--plus{font-size:18px;font-weight:300;line-height:1}
.pp-loop-acc-icon--plus::before{content:'+'}
.pp-active > .pp-loop-acc-icon--plus::before{content:'\2212'}

/* Accordion body */
.pp-loop-acc-body{padding:0 20px 20px}
.pp-loop-acc-body[hidden]{display:none !important}


/* =====================================================================
   ACCORDION — Preset: Clean (subtle dividers)
   ===================================================================== */
.pp-acc--clean .pp-loop-acc-item{
  border-bottom:1px solid #eee;
}
.pp-acc--clean .pp-loop-acc-item:last-child{border-bottom:none}
.pp-acc--clean .pp-loop-acc-header.pp-active{color:#111}


/* =====================================================================
   ACCORDION — Preset: Bordered (card-style with border)
   ===================================================================== */
.pp-acc--bordered{gap:8px}
.pp-acc--bordered .pp-loop-acc-item{
  border:1px solid #e0e0e0;
  border-radius:8px;
}
.pp-acc--bordered .pp-loop-acc-header{
  padding:14px 20px;
  border-radius:8px;
}
.pp-acc--bordered .pp-loop-acc-header.pp-active{
  border-radius:8px 8px 0 0;
}
.pp-acc--bordered .pp-loop-acc-body{
  border-top:1px solid #eee;
  padding:16px 20px;
}


/* =====================================================================
   ACCORDION — Preset: Shadow (elevated cards with shadow)
   ===================================================================== */
.pp-acc--shadow{gap:10px}
.pp-acc--shadow .pp-loop-acc-item{
  background:#fff;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  transition:box-shadow .2s ease;
}
.pp-acc--shadow .pp-loop-acc-item.pp-active{
  box-shadow:0 2px 8px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
}
.pp-acc--shadow .pp-loop-acc-header{
  padding:16px 20px;
  border-radius:10px;
}
.pp-acc--shadow .pp-loop-acc-header.pp-active{
  border-radius:10px 10px 0 0;
  color:#111;
}
.pp-acc--shadow .pp-loop-acc-body{
  padding:4px 20px 20px;
}


/* =====================================================================
   ACCORDION — Preset: Minimal (almost invisible structure)
   ===================================================================== */
.pp-acc--minimal .pp-loop-acc-header{
  padding:12px 0;
  color:#888;
  font-weight:400;
}
.pp-acc--minimal .pp-loop-acc-header:hover{color:#333}
.pp-acc--minimal .pp-loop-acc-header.pp-active{
  color:#111;
  font-weight:500;
}
.pp-acc--minimal .pp-loop-acc-body{
  padding:0 0 16px;
}
.pp-acc--minimal .pp-loop-acc-item + .pp-loop-acc-item{
  border-top:1px solid #f0f0f0;
}


/* =====================================================================
   ACCORDION — Preset: Compact (tight spacing, small text)
   ===================================================================== */
.pp-acc--compact .pp-loop-acc-header{
  padding:10px 16px;
  font-size:13px;
  background:#f8f8f8;
}
.pp-acc--compact .pp-loop-acc-header:hover{background:#f0f0f0}
.pp-acc--compact .pp-loop-acc-header.pp-active{
  background:#fff;
  color:#111;
}
.pp-acc--compact .pp-loop-acc-body{
  padding:8px 16px 12px;
  font-size:13px;
}
.pp-acc--compact .pp-loop-acc-item{
  border-bottom:1px solid #eee;
}
.pp-acc--compact .pp-loop-acc-item:last-child{border-bottom:none}


/* =====================================================================
   HERO ACCORDION — Base
   Unified flex approach: expand/collapse works automatically in both
   flex-direction: row (horizontal) and column (vertical) because
   flex-basis applies to the main axis.
   ===================================================================== */

.pp-loop-hero{
  display:flex;
  flex-direction:var(--pp-hero-dir, row);
  position:relative;
  overflow:hidden;
  background:#1a1a1a;
  container-name:pp-hero;
}

.pp-loop-hero-section{
  position:relative;
  overflow:hidden;
  outline:none;
  cursor:pointer;
}

.pp-loop-hero-bg{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;pointer-events:none;
}

.pp-loop-hero-overlay{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:1;pointer-events:none;
}

.pp-loop-hero-active-overlay{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:2;pointer-events:none;
  opacity:0;transition:opacity var(--pp-hero-speed, 0.5s);
}

.pp-loop-hero-collapsed-overlay{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:2;pointer-events:none;
  opacity:0;transition:opacity var(--pp-hero-speed, 0.5s);
}

.pp-hero-label--full-height{
  height:100%;top:0 !important;bottom:0 !important;
  display:flex;align-items:center;
}

.pp-loop-hero-number{
  position:absolute;top:2rem;left:1.5rem;
  z-index:2;
  color:rgba(255,255,255,0.3);
  font-size:8rem;font-weight:700;line-height:1;
  pointer-events:none;
  transition:opacity var(--pp-hero-speed, 0.5s);
}


/* =====================================================================
   HERO — Label & Content POSITIONING (9-point grid)
   ===================================================================== */
.pp-loop-hero-label,
.pp-loop-hero-content{
  position:absolute;z-index:3;
  max-width:90%;box-sizing:border-box;
}

.pp-hero-pos--top-left     {top:2rem;   left:2rem;}
.pp-hero-pos--top-center   {top:2rem;   left:50%;transform:translateX(-50%);text-align:center}
.pp-hero-pos--top-right    {top:2rem;   right:2rem;text-align:right}
.pp-hero-pos--center-left  {top:50%;    left:2rem;transform:translateY(-50%)}
.pp-hero-pos--center       {top:50%;    left:50%;transform:translate(-50%,-50%);text-align:center}
.pp-hero-pos--center-right {top:50%;    right:2rem;transform:translateY(-50%);text-align:right}
.pp-hero-pos--bottom-left  {bottom:2rem;left:2rem;}
.pp-hero-pos--bottom-center{bottom:2rem;left:50%;transform:translateX(-50%);text-align:center}
.pp-hero-pos--bottom-right {bottom:2rem;right:2rem;text-align:right}
.pp-hero-pos--custom       {/* position values from Bricks controls: top/right/bottom/left/width/height */}

.pp-loop-hero-heading{
  color:#fff;font-size:4rem;font-weight:700;line-height:1.1;margin:0;
  writing-mode:var(--pp-label-wm, horizontal-tb);
  text-orientation:mixed;
  transform:rotate(var(--pp-label-rotate, 0deg));
}

.pp-loop-hero-content{
  color:rgba(255,255,255,0.85);font-size:1rem;
  display:flex;flex-direction:column;
  box-sizing:border-box;
}

.pp-hero-content--full-height{
  height:100%;top:0 !important;bottom:0 !important;
}

.pp-loop-hero-content a{color:#fff;text-decoration:underline;text-underline-offset:0.2em}
.pp-loop-hero-content a:hover{opacity:0.8}


/* =====================================================================
   HERO — Desktop Accordion Behavior
   Unified: no orientation-specific selectors needed.
   flex-basis controls the main axis (width in row, height in column).
   ===================================================================== */
@media (min-width:768px){

  .pp-loop-hero{
    height:var(--pp-hero-height, 800px);
  }
  /* Vertical click: auto-height (class toggled by JS based on computed flex-direction) */
  .pp-loop-hero--vertical.pp-loop-hero--click{
    height:auto !important;
  }

  .pp-loop-hero-section{
    width:100%;height:100%;
    flex:0 0 var(--pp-hero-closed, 150px);
    transition:flex var(--pp-hero-speed, 0.5s) ease;
    border:1px solid rgba(255,255,255,0.1);
  }

  /* First section expanded by default (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section[data-pp-hero-idx="1"]{
    flex:1 0 0px;
  }

  /* Collapse first when another is hovered/focused (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within),
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover){
    flex:0 0 var(--pp-hero-closed, 150px);
  }

  /* Expand hovered/focused section (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click):hover .pp-loop-hero-section:hover,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within .pp-loop-hero-section:focus-within{
    flex:1 0 0px;
  }

  /* Instant transition for hover switch (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click):hover .pp-loop-hero-section ~ .pp-loop-hero-section:hover{
    transition:flex 0s;
  }

  /* Label + content: hidden when collapsed (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-loop-hero-label,
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-loop-hero-content,
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-label,
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-content,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-label,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-content{
    opacity:0;transition:opacity 0s;
  }

  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-label,
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-content{
    transition:opacity var(--pp-hero-speed, 0.5s) calc(var(--pp-hero-speed, 0.5s) * 0.6);
  }

  /* BG: Ken Burns when expanded, dim when collapsed (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-loop-hero-bg,
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-bg,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-bg{
    opacity:0.4;transform:scale(1);
  }

  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-bg{
    transition:transform 15s, opacity 1s;transform:scale(1.15);
  }

}

/* =====================================================================
   HERO — Click Mode (ALL viewports)
   Outside media query so click accordion works on phone/tablet/desktop.
   ===================================================================== */
.pp-loop-hero--click .pp-loop-hero-section{
  flex:0 0 var(--pp-hero-closed, 150px) !important;
  transition:flex var(--pp-hero-speed, 0.5s) ease;
}
.pp-loop-hero--click .pp-hero-section--active{
  flex:1 0 0px !important;
}

/* Click mode: label + content visibility */
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-label,
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-content{
  opacity:0;transition:opacity 0s;
}
.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-label,
.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-content{
  opacity:1;transition:opacity var(--pp-hero-speed, 0.5s) calc(var(--pp-hero-speed, 0.5s) * 0.6);
}

/* Click mode: block interaction on inactive section children (prevents link taps) */
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active){
  pointer-events:auto;
}
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) *{
  pointer-events:none;
}

/* Click mode: collapsed label */
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-collapsed-label{
  opacity:1;transition:opacity var(--pp-hero-speed, 0.5s);
}
.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-collapsed-label{
  opacity:0;transition:opacity 0s;
}

/* Click mode: overlays */
.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-active-overlay{opacity:1}
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-active-overlay{opacity:0}
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-collapsed-overlay{opacity:1}
.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-collapsed-overlay{opacity:0}

/* Click mode: BG Ken Burns */
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-bg{
  opacity:0.4;transform:scale(1);
}
.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-bg{
  transform:scale(1.15);opacity:1;
  transition:transform 15s, opacity 1s;
}

/* Click mode: numbers hidden on inactive */
.pp-loop-hero--click .pp-loop-hero-section:not(.pp-hero-section--active) .pp-loop-hero-number{
  opacity:0 !important;transition:opacity 0s;
}

/* Animation off */
.pp-loop-hero--no-anim .pp-loop-hero-section,
.pp-loop-hero--no-anim .pp-loop-hero-label,
.pp-loop-hero--no-anim .pp-loop-hero-content,
.pp-loop-hero--no-anim .pp-loop-hero-bg,
.pp-loop-hero--no-anim .pp-loop-hero-collapsed-label,
.pp-loop-hero--no-anim .pp-loop-hero-active-overlay,
.pp-loop-hero--no-anim .pp-loop-hero-collapsed-overlay{
  transition:none !important;
}


/* =====================================================================
   HERO — Vertical (column) + Click Mode overrides
   Uses container style query to detect --pp-hero-dir: column.
   Applies at any breakpoint where orientation switches to column.
   Does NOT affect horizontal (row) mode.
   ===================================================================== */
/* Vertical + click: active section auto-sizes from content */
.pp-loop-hero--vertical.pp-loop-hero--click .pp-hero-section--active{
  flex:0 0 auto !important;
  display:flex;
  flex-direction:column;
}
/* Vertical + click: active label/content flow (position:relative) */
.pp-loop-hero--vertical.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-label,
.pp-loop-hero--vertical.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-content{
  position:relative !important;
  top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
  transform:none !important;translate:none !important;
  max-width:100%;
  padding:1.5rem 2rem;
  z-index:3;
}
.pp-loop-hero--vertical.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-label{padding-bottom:0}
.pp-loop-hero--vertical.pp-loop-hero--click .pp-hero-section--active .pp-loop-hero-content{padding-top:0.5rem}


/* =====================================================================
   HERO — Mobile (stacked, no accordion behavior)
   ===================================================================== */
/* Mobile: no hardcoded overrides — behavior controlled by Trigger mode + breakpoint settings */


/* =====================================================================
   HERO — Collapsed Label (visible when panel is collapsed)
   ===================================================================== */
.pp-loop-hero-collapsed-label{
  position:absolute;z-index:4;
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(var(--pp-cl-rotate, 0deg));
  display:flex;align-items:center;gap:0.5em;
  color:rgba(255,255,255,0.7);
  font-size:1.2rem;font-weight:600;
  letter-spacing:0.05em;text-transform:uppercase;
  white-space:nowrap;pointer-events:none;
  writing-mode:var(--pp-cl-wm, vertical-rl);
  text-orientation:mixed;
  opacity:0;transition:opacity 0s;
}

/* Collapsed label writing-mode + rotation via responsive CSS vars */
.pp-hero-cl-number{font-size:1.5em;font-weight:700;opacity:0.5}
.pp-hero-cl-title{font-size:1em}

@media (min-width:768px){
  /* Show collapsed-label when panel is collapsed (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-loop-hero-collapsed-label,
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-collapsed-label,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-collapsed-label{
    opacity:1;transition:opacity var(--pp-hero-speed, 0.5s);
  }

  /* Active overlay: show on expanded section (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section[data-pp-hero-idx="1"] .pp-loop-hero-active-overlay{opacity:1}
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:hover .pp-loop-hero-active-overlay,
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:focus-within .pp-loop-hero-active-overlay{opacity:1}
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-active-overlay,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-active-overlay{opacity:0}

  /* Collapsed overlay: show on collapsed section (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-loop-hero-collapsed-overlay{opacity:1}
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-collapsed-overlay{opacity:1}
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-collapsed-overlay{opacity:1}
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:hover .pp-loop-hero-collapsed-overlay,
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:focus-within .pp-loop-hero-collapsed-overlay{opacity:0}
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section[data-pp-hero-idx="1"] .pp-loop-hero-collapsed-overlay{opacity:0}

  /* Hide number when collapsed (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-loop-hero-number{
    opacity:0 !important;transition:opacity 0s;
  }
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-loop-hero-number,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-loop-hero-number{
    opacity:0 !important;transition:opacity 0s;
  }

  /* "Expanded Only" numbers (hover mode only) */
  .pp-loop-hero:not(.pp-loop-hero--click) .pp-loop-hero-section:not([data-pp-hero-idx="1"]):not(:hover):not(:focus-within) .pp-hero-num--expanded-only,
  .pp-loop-hero:not(.pp-loop-hero--click):hover [data-pp-hero-idx="1"]:not(:hover):not(:focus-within) .pp-hero-num--expanded-only,
  .pp-loop-hero:not(.pp-loop-hero--click):focus-within [data-pp-hero-idx="1"]:not(:focus-within):not(:hover) .pp-hero-num--expanded-only{
    opacity:0 !important;transition:opacity 0s;
  }
}


/* =====================================================================
   HERO — Expanded Background Mode
   ===================================================================== */
.pp-loop-hero--bg-expand{position:relative}

.pp-loop-hero-bg-container{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:0;overflow:hidden;
}

.pp-loop-hero-bg-full{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 0.8s ease;z-index:0;
}
.pp-loop-hero-bg-full.pp-hero-bg-active{opacity:1;z-index:1}

.pp-loop-hero-bg-container > .pp-loop-hero-overlay{z-index:2}

.pp-loop-hero--bg-expand .pp-loop-hero-section{
  background:transparent;z-index:1;
}


/* =====================================================================
   HERO — Link Hover Effects
   ===================================================================== */

/* Base: links need relative positioning for ::before pseudo */
.pp-hero-link-fx .pp-loop-hero-content a{
  position:relative;
  display:inline-block;
  text-decoration:none;
}

/* Uppercase on hover — no pseudo needed */
.pp-hero-link-fx--uppercase .pp-loop-hero-content a{
  transition:text-transform var(--pp-link-fx-speed, 0.3s) ease;
}
.pp-hero-link-fx--uppercase .pp-loop-hero-content a:hover{
  text-transform:uppercase;
}

/* ::before for underline / overline / background */
.pp-hero-link-fx:not(.pp-hero-link-fx--uppercase) .pp-loop-hero-content a::before{
  content:'';
  position:absolute;
  background:var(--pp-link-fx-color, currentColor);
  transition:transform var(--pp-link-fx-speed, 0.3s) ease;
  pointer-events:none;
}

/* --- UNDERLINE --- */
.pp-hero-link-fx--underline .pp-loop-hero-content a::before{
  left:0;right:0;
  bottom:0;
  height:var(--pp-link-fx-h, 2px);
}
/* --- OVERLINE --- */
.pp-hero-link-fx--overline .pp-loop-hero-content a::before{
  left:0;right:0;
  top:0;
  height:var(--pp-link-fx-h, 2px);
}
/* --- BACKGROUND FILL --- */
.pp-hero-link-fx--background .pp-loop-hero-content a{
  overflow:hidden;
  z-index:0;
}
.pp-hero-link-fx--background .pp-loop-hero-content a::before{
  top:0;left:0;right:0;bottom:0;
  z-index:-1;
}

/* ---- Direction: Left (horizontal) ---- */
.pp-hero-link-fx--dir-left .pp-loop-hero-content a::before{
  transform-origin:left center;
  transform:scaleX(0);
}
.pp-hero-link-fx--dir-left .pp-loop-hero-content a:hover::before{
  transform:scaleX(1);
}

/* ---- Direction: Right (horizontal) ---- */
.pp-hero-link-fx--dir-right .pp-loop-hero-content a::before{
  transform-origin:right center;
  transform:scaleX(0);
}
.pp-hero-link-fx--dir-right .pp-loop-hero-content a:hover::before{
  transform:scaleX(1);
}

/* ---- Direction: Center (horizontal) ---- */
.pp-hero-link-fx--dir-center .pp-loop-hero-content a::before{
  transform-origin:center center;
  transform:scaleX(0);
}
.pp-hero-link-fx--dir-center .pp-loop-hero-content a:hover::before{
  transform:scaleX(1);
}

/* ---- Direction: Bottom (vertical) ---- */
.pp-hero-link-fx--dir-bottom .pp-loop-hero-content a::before{
  transform-origin:center bottom;
  transform:scaleY(0);
}
.pp-hero-link-fx--dir-bottom .pp-loop-hero-content a:hover::before{
  transform:scaleY(1);
}

/* ---- Direction: Top (vertical) ---- */
.pp-hero-link-fx--dir-top .pp-loop-hero-content a::before{
  transform-origin:center top;
  transform:scaleY(0);
}
.pp-hero-link-fx--dir-top .pp-loop-hero-content a:hover::before{
  transform:scaleY(1);
}