/* ==========================================================================
   MTD Performance - events-edukasi.css
   Loaded only by events.html and edukasi.html, after site.css.
   Every token, easing curve and entrance hook comes from site.css; nothing
   here redefines them. All class names are prefixed ee- so this file can
   never collide with site.css, shop.css or pages.css.

   Table of contents
    1. Page head and rules
    2. Filters (chips, count)
    3. Events: upcoming cards, the past ledger, the empty state
    4. Edukasi: safety box, video cards, the lazy embed frame
    5. Strips and page feet
    6. Coarse pointer, short screens, reduced motion
   ========================================================================== */

/* ==========================================================================
   1. Page head and rules
   ========================================================================== */

/* The header is fixed and these pages carry no hero under it. */
.ee-main{padding-top:var(--nav-h)}

/* the current page is marked in the nav; site.css already draws the underline
   on hover, this only holds it open for aria-current */
.nav-links a[aria-current="page"]{color:var(--text-primary)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-sheet .sheet-link[aria-current="page"]{color:var(--text-primary)}

.ee-head{
  position:relative;
  padding-block:clamp(38px,5vw,72px) clamp(26px,3vw,44px);
  border-bottom:1px solid var(--line);
}
.ee-head h1{
  font-style:italic;
  padding-bottom:.06em;          /* descender room under the masked reveal */
  font-size:clamp(40px,5.6vw,76px);
}
.ee-head .lede{margin-top:18px;max-width:58ch}

.ee-section{position:relative;padding-block:clamp(38px,4.6vw,66px)}
.ee-section + .ee-section{padding-top:clamp(10px,1.6vw,22px)}

.ee-rule{
  display:block;width:100%;height:10px;overflow:visible;
  margin-block:clamp(22px,3vw,38px);
}
.ee-rule line{stroke:var(--accent-muted);stroke-width:1}
.ee-rule .tick-rule{
  stroke:var(--line);
  stroke-dasharray:var(--dl,1200);
  stroke-dashoffset:var(--dl,1200);
  transition:stroke-dashoffset 1.5s var(--ease-out);
}
.ee-rule.in .tick-rule,.ee-rule.drawn .tick-rule{stroke-dashoffset:0}

.ee-h2{
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.4vw,30px);
}
.ee-h2 h2{font-size:clamp(26px,3vw,42px)}
.ee-h2 .ee-h2-num{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--accent-label);
}

/* ==========================================================================
   2. Filters
   ========================================================================== */

.ee-filters{
  display:flex;flex-direction:column;gap:16px;
  padding-block:clamp(18px,2.2vw,26px);
}
.ee-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ee-filter-label{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary);
  margin-right:4px;
}
.ee-chip{
  cursor:pointer;
  padding:9px 14px;
  min-height:44px;                 /* the touch floor unconditionally, like .btn:
                                      a touch device that reports a fine pointer
                                      still gets a thumb-sized chip */
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-secondary);
  transition:border-color .26s var(--ease-out),color .26s var(--ease-out),
             background-color .26s var(--ease-out),transform .26s var(--ease-out);
}
.ee-chip:hover{border-color:var(--text-secondary);color:var(--text-primary);transform:translateY(-1px)}
.ee-chip:active{transform:translateY(0)}
.ee-chip[aria-pressed="true"]{
  border-color:var(--accent);
  color:var(--text-primary);
  background:linear-gradient(180deg,rgba(233,32,42,.22) 0%,rgba(90,15,19,.14) 100%);
}

.ee-count{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-bottom:22px;
}
.ee-count b{color:var(--text-primary);font-weight:600}

/* ==========================================================================
   3. Events
   ========================================================================== */

/* Upcoming: a card grid. */
.ee-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
}

.ee-card{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  padding:clamp(18px,2vw,24px);
  background:linear-gradient(178deg,var(--panel) 0%,#050505 100%);
  border:1px solid var(--line);
  border-left:2px solid var(--accent-muted);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),
             box-shadow .4s var(--ease-out);
}
.ee-card:hover{
  transform:translateY(-3px);
  border-color:#4A4A4A;
  border-left-color:var(--accent);
  box-shadow:0 26px 48px -32px rgba(0,0,0,.95);
}
.ee-card h3{max-width:22ch}

.ee-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.ee-date{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 10px;
}

.ee-badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:6px;padding:6px 10px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text-secondary);
}
.ee-badge-host{
  color:var(--text-primary);
  border-color:var(--accent-muted);
  background:linear-gradient(180deg,rgba(233,32,42,.26) 0%,rgba(90,15,19,.16) 100%);
}
.ee-badge .ee-pip{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  flex:none;opacity:.55;
}
/* the accent belongs to the events MTD runs; the ones MTD attends stay quiet */
.ee-badge-join .ee-pip{background:var(--text-secondary);opacity:.45}
/* the one living element on this page, whisper level, opacity only */
.anim-on .ee-badge-host .ee-pip{animation:ee-pip-breathe 6.5s var(--ease-in-out) infinite;animation-delay:-1.9s}
@keyframes ee-pip-breathe{0%,100%{opacity:.35}50%{opacity:1}}

.ee-where{
  font-size:14.5px;color:var(--text-primary);
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
}
/* the separator was --accent-muted on the canvas: 1.6:1, invisible. It takes
   the secondary text value instead, which reads at 8:1 without pulling the eye
   off the city and venue it divides. */
.ee-where .ee-sep{color:var(--text-secondary)}
.ee-cat{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);
}
.ee-summary{color:var(--text-secondary);font-size:14.5px;max-width:44ch}
.ee-card .btn{align-self:flex-start;margin-top:2px}

/* Past: a ledger, deliberately not the same skeleton as the card grid. */
.ee-ledger{
  border-top:1px solid var(--line);
  list-style:none;margin:0;padding:0;
}
.ee-row{
  display:grid;
  grid-template-columns:170px 1fr auto;
  gap:18px 26px;
  align-items:baseline;
  padding:clamp(18px,2vw,24px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background-color .3s var(--ease-out);
}
.ee-row::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease-out);
}
.ee-row:hover::after{transform:scaleX(1)}
.ee-row-date{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ee-row-main{display:flex;flex-direction:column;gap:8px}
.ee-row-main h3{font-size:clamp(17px,1.2vw,21px)}
.ee-row-side{display:flex;align-items:center;gap:10px}

.ee-empty{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:clamp(28px,4.4vw,52px) clamp(20px,3vw,34px);
  text-align:center;
}
.ee-empty p{color:var(--text-secondary);max-width:50ch;margin:0 auto}
.ee-empty .btn-row{margin-top:22px;justify-content:center}

/* ==========================================================================
   4. Edukasi
   ========================================================================== */

.ee-safety{max-width:72ch}

.ee-videos{
  display:grid;grid-template-columns:1fr;
  gap:clamp(16px,2vw,26px);
}

.ee-video{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr) auto;
  align-items:start;
  gap:clamp(16px,2vw,24px);
  padding:clamp(16px,1.8vw,22px);
  background:linear-gradient(178deg,var(--panel) 0%,#050505 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.ee-video:hover{border-color:#4A4A4A;box-shadow:0 26px 48px -32px rgba(0,0,0,.95)}

/* the media frame keeps its 9:16 room whether the embed lands or not, so the
   card never jumps when the official iframe arrives */
.ee-media{
  position:relative;
  align-self:start;
  aspect-ratio:9 / 16;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel-2);
  border:1px solid var(--line);
  isolation:isolate;
}
.ee-poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:1;
  transition:opacity .6s var(--ease-out);
}
.ee-media.is-live .ee-poster{opacity:0}
.ee-media.is-live .ee-play{opacity:0}
.ee-poster-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.62) 100%);
  transition:opacity .6s var(--ease-out);
}
.ee-media.is-live .ee-poster-scrim{opacity:0}
.ee-play{
  position:absolute;left:50%;top:50%;
  width:54px;height:54px;
  margin:-27px 0 0 -27px;
  border-radius:50%;
  background:rgba(0,0,0,.72);
  border:1px solid var(--line-interactive);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease-out);
}
.ee-play svg{width:18px;height:18px;fill:var(--text-primary);margin-left:2px}
.ee-play::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(233,32,42,.5);
  opacity:0;
}
.anim-on .ee-play::after{animation:ee-play-breathe 6s var(--ease-in-out) infinite;animation-delay:-2.4s}
@keyframes ee-play-breathe{0%,100%{opacity:0}50%{opacity:.9}}

.ee-embed{position:absolute;inset:0;overflow:auto;background:var(--canvas);opacity:0;
  transition:opacity .6s var(--ease-out)}
/* until the player is really there the frame belongs to the poster */
.ee-media:not(.is-live) .ee-embed{pointer-events:none}
.ee-media.is-live .ee-embed{opacity:1}
/* once the official player is in, the frame stops holding a 9:16 box and
   takes the height the platform asked for, so nothing is cropped */
.ee-media.is-live{aspect-ratio:auto;background:var(--canvas)}
.ee-media.is-live .ee-embed{position:relative;inset:auto;overflow:visible}
.ee-embed blockquote{margin:0;padding:0;border:0;max-width:100%;min-width:0}
.ee-embed iframe{max-width:100%;border:0}

.ee-video-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.ee-video-body h3{max-width:24ch}
.ee-chiprow{display:flex;flex-wrap:wrap;gap:8px}
.ee-tag-platform{color:var(--accent-label);border-color:var(--accent-muted)}

.ee-steps{
  list-style:none;counter-reset:step;
  margin:2px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.ee-steps li{
  counter-increment:step;
  position:relative;
  padding-left:34px;
  color:var(--text-secondary);
  font-size:14.5px;line-height:1.55;
  max-width:56ch;
}
.ee-steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.05em;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:var(--accent-label);
}
.ee-video-foot{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  min-width:150px;
}

/* ==========================================================================
   5. Strips and page feet
   ========================================================================== */

.ee-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  padding:clamp(20px,2.4vw,30px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-top:clamp(30px,3.6vw,50px);
}
.ee-strip-label{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);
}
.ee-strip .btn-row{margin-left:auto}

.ee-foot{
  display:flex;flex-direction:column;gap:18px;
  margin-top:clamp(30px,3.6vw,50px);
}
.ee-foot-wa{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.ee-foot-wa p{color:var(--text-secondary);max-width:46ch}

.ee-brand-glyph{width:16px;height:16px;flex:none;fill:currentColor}

/* ==========================================================================
   6. Coarse pointer, short screens, reduced motion
   ========================================================================== */

@media (max-width:1080px){
  .ee-grid{grid-template-columns:repeat(2,1fr)}
  .ee-video{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
  .ee-video-foot{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (max-width:860px){
  .ee-video{grid-template-columns:1fr}
  .ee-video-foot{grid-column:auto}
  .ee-media{max-width:340px}
  .ee-row{grid-template-columns:1fr;gap:12px}
  .ee-row-side{justify-content:flex-start}
}
@media (max-width:700px){
  .ee-grid{grid-template-columns:1fr}
  .ee-strip .btn-row{margin-left:0;width:100%}
  .ee-filter-label{width:100%;margin-bottom:2px}
}

/* every interactive target clears 44px under a coarse pointer, without
   changing the alignment the element already declares */
@media (pointer:coarse){
  .ee-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* the shared nav controls are drawn at 42px; these two pages hold them to
     the 44px floor without moving anything else in the header */
  .cart-link,.nav-burger{min-width:44px;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .ee-rule .tick-rule{stroke-dashoffset:0!important}
  .ee-row::after{display:none}
  .ee-play::after{animation:none;opacity:0}
  .ee-badge .ee-pip{opacity:.7}
}

/* the same final states applied live when reduced motion flips on mid
   session; site.js adds body.pinned through pinToFinalStates() */
body.pinned .ee-rule .tick-rule{stroke-dashoffset:0;transition:none}
body.pinned .ee-row::after{display:none}
body.pinned .ee-play::after{animation:none;opacity:0}