/* "The official frame." — hide-and-seek locker wall replacing the old facts-grid table. */

/* course-lead now intentionally left unstyled here: it inherits the shared
   .course-inner>h2 size so "Some doors matter more than others." matches
   "Same course." and "Register through:" in weight and scale. */

.locker-wall{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(76px,auto);
  grid-auto-flow:dense;
  gap:12px;
  margin-bottom:16px;
}

.locker{
  position:relative;
  border-radius:18px;
  font-family:inherit;
  color:var(--ink);
  overflow:hidden;
  text-align:left;
}

/* Open lockers */
.locker--open{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:22px;
}
.locker--when{grid-column:span 3;grid-row:span 2;background:linear-gradient(175deg,rgba(239,138,61,.14),rgba(239,138,61,.03) 65%);border-color:rgba(239,138,61,.42)}
.locker--how{grid-column:span 6;grid-row:span 1;display:block;background:linear-gradient(175deg,rgba(74,166,181,.12),rgba(74,166,181,.03) 65%);border-color:rgba(74,166,181,.38)}
.locker-cols{display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px;align-items:start;margin-top:10px}

.locker-label{margin:0 0 8px;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.locker--how .locker-label{color:#2f7a89}
.locker--when .locker-label{color:#c96a1f}

.locker-main{margin:0;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:820;line-height:1.1;letter-spacing:-.03em}
.locker-sub{margin:10px 0 0;font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.4;opacity:.72;max-width:34ch}
.locker-sub strong{opacity:1;color:#2f7a89}

.locker--when .locker-main{font-size:clamp(1.2rem,1.8vw,1.45rem);font-weight:760;opacity:.7}
.locker-time{margin:8px 0 0;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:880;letter-spacing:-.03em;color:#c96a1f;line-height:1.02}

.locker-main--secondary{margin:0;font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:800;line-height:1.22;letter-spacing:-.02em}
.locker-lines{margin:8px 0 0;font-size:clamp(.9rem,1.1vw,1rem);font-weight:700;line-height:1.5;opacity:.85}
.locker-emph{margin:12px 0 0;font-size:clamp(1.05rem,1.25vw,1.2rem);font-weight:800;color:#2f7a89}

@keyframes locker-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes locker-breathe-strong{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
.locker--how{animation:locker-breathe 6.2s ease-in-out infinite}
.locker--when{animation:locker-breathe-strong 5.4s ease-in-out infinite .6s}

/* Once the visitor has had time to notice the pulse (or opens a locker,
   whichever comes first - see locker-wall.js), it settles rather than
   pulsing forever. */
.locker-wall.settled .locker--how,
.locker-wall.settled .locker--when{animation:none}

/* Closed lockers */
.locker--closed{
  background:var(--paper);
  border:1px solid var(--line);
  padding:0;
  min-height:76px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  perspective:700px;
  min-width:0;
}
.locker--closed:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.locker--closed.is-open{cursor:default}

.locker-door{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:13px 15px;
  background:var(--paper);
  border-radius:inherit;
  transform-origin:left center;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .3s ease,box-shadow .2s ease;
  box-shadow:inset 0 0 0 1px rgba(21,21,21,.05);
}
.locker-tag{font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.locker-peek{align-self:flex-end;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:lowercase;opacity:.38;transition:opacity .2s ease}

@media (hover:hover) and (pointer:fine){
  .locker--closed:not(.is-open):hover .locker-door{transform:translateX(3px);box-shadow:inset 0 0 0 1px rgba(21,21,21,.05),0 6px 14px rgba(50,38,20,.1)}
  .locker--closed:not(.is-open):hover .locker-peek{opacity:.8}
}

.locker-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1);
  padding:0 15px;
}
.locker-content{
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 0;
}
.locker-content-label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.5}
.locker-content-value{margin-top:8px;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:750;line-height:1.3}

.locker.is-open .locker-door{transform:rotateY(68deg) translateX(2px);opacity:0;pointer-events:none}
.locker.is-open .locker-panel{grid-template-rows:1fr}
.locker.is-snoop .locker-door{transition-duration:.5s;transform:rotateY(85deg) translateX(6px) scale(1.03)}
.locker.is-snoop .locker-panel{transition-duration:.5s}

.locker--code .locker-content-value{color:#c94f66}
.locker--credits .locker-content-value{color:#b98722}
.locker--language .locker-content-value{color:#6f8a2a}
.locker--assessment .locker-content-value{color:#4457a6}
.locker--host .locker-content-value,.locker--facilitators .locker-content-value{color:#6b3570}
.locker--facilitators .locker-content-value{font-size:clamp(.8rem,1.15vw,.95rem);white-space:nowrap}

/* A little handmade, off-grid tilt on the closed doors. */
.locker--code{transform:rotate(-1.1deg)}
.locker--credits{transform:rotate(.9deg)}
.locker--language{transform:rotate(-.7deg)}
.locker--assessment{transform:rotate(1deg)}
.locker--host{transform:rotate(-.9deg)}
.locker--facilitators{transform:rotate(1.1deg)}
.locker--closed.is-open{transform:none}

@media (max-width:1000px){
  .locker-wall{grid-template-columns:repeat(4,1fr)}
  .locker--when{grid-column:span 4;grid-row:span 2}
  .locker--how{grid-column:span 4;grid-row:span 1}
  .locker--language,.locker--assessment,.locker--host{grid-column:span 2;grid-row:span 1}
  .locker--code,.locker--credits,.locker--facilitators{grid-column:span 1;grid-row:span 1}
}

@media (max-width:640px){
  .locker-wall{grid-template-columns:repeat(2,1fr);grid-auto-flow:row;gap:12px}
  .locker--how,.locker--when{grid-column:span 2;grid-row:auto}
  .locker--code,.locker--credits,.locker--language,.locker--assessment,.locker--host,.locker--facilitators{grid-column:span 1;grid-row:auto}
  .locker--open{padding:18px}
  .locker-sub{max-width:none}
  .locker-cols{grid-template-columns:1fr;row-gap:14px;margin-top:8px}
}

/* "Keep scrolling" cues at the end of the idea and locker-wall sections, so
   neither reads as the end of the page. */
.idea-section{flex-direction:column}
.section-cta{align-self:center;margin-top:40px}

@media (max-width:640px){
  .section-cta{margin-top:30px}
}

@media (prefers-reduced-motion:reduce){
  .locker--how,.locker--when{animation:none}
  .locker-door,.locker-panel{transition:none}
  .locker--code,.locker--credits,.locker--language,.locker--assessment,.locker--host,.locker--facilitators{transform:none}
}

/* Mobile density pass: preserve the desktop composition, but use the phone
   viewport efficiently and reserve a real reveal slot for the Joulukalenteri line. */
@media (max-width:640px){
  .locker-wall{gap:10px;margin-bottom:12px}
  .locker--open{padding:14px 16px}
  .locker-cols{row-gap:10px;margin-top:6px}
  .locker-sub{margin-top:8px;line-height:1.32}
  .locker-main--secondary{font-size:clamp(1.02rem,4.6vw,1.18rem);line-height:1.16}
  .locker-lines{
    margin-top:7px;
    font-size:0;
    line-height:0;
    white-space:nowrap;
    opacity:.85;
  }
  .locker-lines::after{
    content:"Not later · not recorded · no slide decks";
    display:block;
    font-size:clamp(.68rem,3.15vw,.82rem);
    line-height:1.2;
    font-weight:760;
    letter-spacing:-.01em;
  }
  .locker-emph{margin-top:10px}
  .locker--code,.locker--credits{margin-top:42px}
  .section-cta{margin-top:14px}
}

/* Mobile four-box layout: Code+Language, Credits+Assessment, Host, Facilitators.
   Desktop/tablet keep the six original lockers. */
@media (max-width:640px){
  .locker--language,.locker--assessment{display:none}
  .locker--code,.locker--credits,.locker--host,.locker--facilitators{
    min-height:76px;
  }
  .locker--code .locker-tag,.locker--credits .locker-tag{font-size:0}
  .locker--code .locker-tag::after{
    content:"Code + language";
    font-size:11px;
  }
  .locker--credits .locker-tag::after{
    content:"Credits + assessment";
    font-size:11px;
  }
  .locker--code .locker-content,.locker--credits .locker-content{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    align-content:center;
    column-gap:8px;
    padding:9px 0;
  }
  .locker--code .locker-content-label,.locker--credits .locker-content-label{
    grid-column:1;
    grid-row:1;
    align-self:end;
    font-size:9px;
    line-height:1.05;
    letter-spacing:.075em;
    white-space:normal;
  }
  .locker--code .locker-content-value,.locker--credits .locker-content-value{
    grid-column:1;
    grid-row:2;
    margin-top:5px;
    align-self:start;
    font-size:clamp(.92rem,4vw,1.05rem);
    line-height:1.1;
    white-space:nowrap;
  }
  .locker--code .locker-content::before,.locker--credits .locker-content::before{
    grid-column:2;
    grid-row:1;
    align-self:end;
    font-size:9px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:.075em;
    text-transform:uppercase;
    opacity:.5;
    color:var(--ink);
  }
  .locker--code .locker-content::after,.locker--credits .locker-content::after{
    grid-column:2;
    grid-row:2;
    align-self:start;
    margin-top:5px;
    font-size:clamp(.88rem,3.7vw,1rem);
    font-weight:750;
    line-height:1.1;
    letter-spacing:-.02em;
    white-space:normal;
  }
  .locker--code .locker-content::before{content:"Language"}
  .locker--code .locker-content::after{content:"English";color:#6f8a2a}
  .locker--credits .locker-content::before{content:"Assessment"}
  .locker--credits .locker-content::after{content:"Pass / Fail";color:#4457a6}
  .locker--host,.locker--facilitators{margin-top:0;min-height:76px}
  .locker--host .locker-content,.locker--facilitators .locker-content{padding:10px 0}
}