/* Reusable modules explorer. The item count is supplied through
   --modules-count by template-parts/blocks/modules-explorer.php. */
.modules-section{background:var(--soft)}
.modules-explorer{background:transparent}
.modules-menu{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-md);background:var(--blue)}
.modules-progress{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.modules-progress-fill{display:block;width:100%;height:100%;background:rgba(209,67,79,.22);transform:scaleX(0);transform-origin:left center}
.modules-progress-fill::after{content:"";position:absolute;top:0;right:0;width:2px;height:100%;background:var(--red)}
.modules-explorer.is-playing .modules-progress-fill{will-change:transform}
.modules-mobile-nav{display:none}
.modules-tabs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--modules-count),minmax(0,1fr));overflow:hidden;background:transparent}
.modules-explorer.has-many-items .modules-tabs{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
.modules-explorer.has-many-items .module-tab{flex:1 0 180px;scroll-snap-align:start}
.module-tab{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  min-width:0;padding:var(--space-4) var(--space-5);border:0;border-radius:0;
  background:transparent;color:rgba(255,255,255,.76);text-align:left;cursor:pointer;
  transition:background-color .22s ease,color .22s ease;
}
.module-tab + .module-tab::before{content:"";position:absolute;top:var(--space-3);bottom:var(--space-3);left:0;width:1px;background:rgba(255,255,255,.16)}
.module-tab[aria-selected="true"]{background:rgba(255,255,255,.12);color:var(--white)}
.module-tab[aria-selected="true"]::after{content:"";position:absolute;right:var(--space-5);bottom:0;left:var(--space-5);height:2px;background:var(--red)}
.module-tab:focus-visible{position:relative;z-index:1;outline:2px solid var(--white);outline-offset:-4px}
.module-tab-title{max-width:19ch;font-size:var(--fs-control);font-weight:780;line-height:var(--lh-title);letter-spacing:var(--tracking-title)}
.module-panel{padding:var(--space-8) 0 0}
.module-panel[hidden]{display:none}
.module-panel-body{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.35fr);align-items:center;gap:var(--space-8)}
.module-panel.has-image{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:var(--space-8);padding:var(--space-8) 0 0}
.module-panel.has-image[hidden]{display:none}
.module-panel.has-image .module-panel-body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--space-4);padding:0;text-align:left}
.module-panel-visual{min-width:0;overflow:hidden;border-radius:var(--radius-md);background:var(--soft-2)}
.module-panel-visual img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.module-panel-heading{display:grid;width:100%;gap:var(--space-3);text-align:left}
.module-panel-heading h3{max-width:16ch;text-align:left}
.module-panel-copy{max-width:54ch;color:var(--text)}
.module-panel:not([hidden]){animation:module-panel-reveal .32s cubic-bezier(.16,1,.3,1)}
@keyframes module-panel-reveal{from{opacity:.35;transform:translateY(var(--space-2))}to{opacity:1;transform:none}}

@media (hover:hover) and (pointer:fine){
  .module-tab:hover{background:rgba(255,255,255,.08);color:var(--white)}
}
@media (max-width:900px){
  .modules-mobile-nav{
    position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    min-height:56px;padding:6px 8px 6px var(--space-4);border-bottom:1px solid rgba(255,255,255,.16);
    color:var(--white);
  }
  .modules-mobile-position{font-size:var(--fs-meta);font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
  .modules-mobile-actions{display:flex;gap:4px}
  .modules-mobile-button{
    display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius-md);
    background:rgba(255,255,255,.1);color:var(--white);cursor:pointer;
    transition:background-color .18s ease-out,transform .14s cubic-bezier(.23,1,.32,1),opacity .18s ease-out;
  }
  .modules-mobile-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .modules-mobile-button:active:not(:disabled){transform:scale(.96)}
  .modules-mobile-button:focus-visible{outline:2px solid var(--white);outline-offset:-3px}
  .modules-mobile-button:disabled{opacity:.32;cursor:default}
  .modules-tabs{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
  .module-tab{flex:0 0 min(74vw,260px);min-height:64px;scroll-snap-align:start}
  .module-panel{padding:var(--space-7) 0 0}
  .module-panel-body{grid-template-columns:1fr;gap:var(--space-5)}
  .module-panel.has-image{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-7) 0 0}
  .module-panel.has-image .module-panel-body{padding:0}
}
@media (max-width:520px){
  .module-panel{padding:var(--space-6) 0 0}
  .module-panel.has-image{gap:var(--space-5);padding:var(--space-6) 0 0}
}
@media (prefers-reduced-motion:reduce){
  .modules-progress{display:none}
  .module-panel:not([hidden]){animation:none}
}