/* =========================================================================
   IE'27 — Tutorials (full-width accordion)
   Each row is full width: title + presenters always visible; clicking the
   row reveals the abstract underneath. Same behaviour on every screen size.
   ========================================================================= */

.ie27-tut-intro{max-width:70ch;margin:0 0 40px}
.ie27-tut-outro{max-width:70ch;margin:48px 0 0}

.ie27-tabs{display:flex;flex-direction:column;gap:14px}

.ie27-tabs__item{
  border:1px solid var(--ie-line);
  border-left:3px solid transparent;
  border-radius:var(--ie-r-sm);
  background:var(--ie-paper-2);
  overflow:hidden;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.ie27-tabs__item[data-open="true"]{
  background:var(--ie-white);
  border-left-color:var(--ie-gold);
  box-shadow:var(--ie-shadow-sm);
}

/* ---- Header (clickable, always visible) -------------------------------- */
.ie27-tabs__head{
  width:100%;display:flex;align-items:flex-start;gap:16px;
  text-align:left;cursor:pointer;
  background:transparent;border:0;
  padding:22px 24px;
  color:var(--ie-ink-text);font-family:inherit;
}
.ie27-tabs__head:hover{background:rgba(26,35,64,.025)}
.ie27-tabs__head:focus-visible{outline:2px solid var(--ie-blue);outline-offset:-2px}

.ie27-tabs__num{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--ie-r-pill);
  display:grid;place-items:center;margin-top:2px;
  font-family:var(--ie-font-display);font-size:.85rem;font-weight:600;
  background:var(--ie-white);color:var(--ie-slate);border:1px solid var(--ie-line);
}
.ie27-tabs__item[data-open="true"] .ie27-tabs__num{background:var(--ie-gold);color:#fff;border-color:transparent}

.ie27-tabs__head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

.ie27-tabs__label{
  font-family:var(--ie-font-display);font-weight:600;font-size:1.14rem;
  line-height:1.32;color:var(--ie-ink-text);
}
.ie27-tabs__meta{
  display:inline-block;margin-left:10px;vertical-align:middle;
  font-family:var(--ie-font-display);font-size:.64rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ie-gold-deep);
  border:1px solid var(--ie-gold);border-radius:var(--ie-r-pill);
  padding:2px 9px;line-height:1.6;white-space:nowrap;
}

/* Presenters shown in the collapsed header */
.ie27-tut__by{display:flex;flex-direction:column;gap:3px}
.ie27-tut__by-item{font-size:.92rem;color:var(--ie-slate);line-height:1.45}
.ie27-tut__by-item strong{font-weight:600;color:var(--ie-ink-text)}

.ie27-tabs__chev{
  flex:0 0 auto;width:22px;height:22px;color:var(--ie-slate);margin-top:6px;
  transition:transform .22s ease;
}
.ie27-tabs__chev svg{width:100%;height:100%;display:block}
.ie27-tabs__item[data-open="true"] .ie27-tabs__chev{transform:rotate(180deg)}

/* ---- Panel (abstract, revealed on click) ------------------------------- */
.ie27-tabs__panel{
  padding:2px 24px 26px 74px;      /* align abstract under the header text */
  animation:ie27-acc-fade .22s ease;
}
.ie27-tabs__panel[hidden]{display:none}

.ie27-tut__contact{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--ie-line);
}
.ie27-tut__mail{
  font-size:.86rem;color:var(--ie-blue);text-decoration:none;text-underline-offset:3px;
}
.ie27-tut__mail:hover{text-decoration:underline;color:var(--ie-gold-deep)}

.ie27-tut__abstract{color:var(--ie-slate);font-size:1.02rem;line-height:1.72}
.ie27-tut__abstract p{margin:0 0 1rem}
.ie27-tut__abstract p:last-child{margin-bottom:0}

@keyframes ie27-acc-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- Small screens ----------------------------------------------------- */
@media (max-width:560px){
  .ie27-tabs__head{padding:18px 16px;gap:12px}
  .ie27-tabs__num{width:28px;height:28px;font-size:.78rem}
  .ie27-tabs__label{font-size:1.02rem}
  .ie27-tabs__meta{display:inline-block;margin:6px 0 0}
  .ie27-tabs__panel{padding:2px 16px 22px 16px}
}

@media (prefers-reduced-motion:reduce){
  .ie27-tabs__panel{animation:none}
  .ie27-tabs__chev,.ie27-tabs__head,.ie27-tabs__item{transition:none}
}