/* =========================================================================
   IE'27 — Tabbed Content template (page-templates/template-tabs.php)
   Tab bar directly under the page hero; one WYSIWYG panel per tab.
   (Not sticky: body{overflow-x:hidden} in base.css disables position:sticky.)
   Prefix: ie27-ptabs (ie27-tabs is used by the Tutorials accordion).
   ========================================================================= */

/* ---- Tab bar ---------------------------------------------------------- */
.ie27-ptabs__bar{
  position:relative;z-index:2;
  background:var(--ie-white);
  border-bottom:1px solid var(--ie-line);
  box-shadow:0 10px 24px -22px rgba(26,35,64,.45);
}
.ie27-ptabs__list{
  display:flex;gap:6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;
  margin:0 calc(var(--ie-gutter) * -1);
  padding:0 var(--ie-gutter);
}
.ie27-ptabs__list::-webkit-scrollbar{display:none}

.ie27-ptabs__tab{
  position:relative;flex:0 0 auto;
  background:transparent;border:0;cursor:pointer;
  padding:20px 18px 19px;
  font-family:var(--ie-font-display);font-size:.98rem;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;white-space:nowrap;
  color:var(--ie-slate);
  transition:color .18s;
}
.ie27-ptabs__tab:first-child{margin-left:-18px}
.ie27-ptabs__tab::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:3px;
  border-radius:3px 3px 0 0;background:var(--ie-gold);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease;
}
.ie27-ptabs__tab:hover{color:var(--ie-ink-text)}
.ie27-ptabs__tab[aria-selected="true"]{color:var(--ie-ink-text)}
.ie27-ptabs__tab[aria-selected="true"]::after{transform:scaleX(1)}
.ie27-ptabs__tab:focus-visible{outline:2px solid var(--ie-blue);outline-offset:-6px;border-radius:10px}

/* ---- Body / panels ---------------------------------------------------- */
.ie27-ptabs__body{padding:56px 0 88px}
.ie27-ptabs__intro{max-width:820px;margin:0 0 40px}
.ie27-ptabs__panel{max-width:820px;line-height:1.72}
.ie27-ptabs__panel[hidden]{display:none}
.ie27-ptabs__panel:focus,.ie27-ptabs__panel:focus-visible{outline:none}
[data-ie27-ptabs] .ie27-ptabs__panel:not([hidden]){animation:ie27-ptabs-in .24s ease}
@keyframes ie27-ptabs-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Prose refinements inside panels (WYSIWYG output) ----------------- */
.ie27-ptabs__panel > :first-child,
.ie27-ptabs__intro > :first-child{margin-top:0}
.ie27-ptabs__panel > :last-child{margin-bottom:0}
.ie27-ptabs__panel h2{
  font-size:1.45rem;margin:2.6rem 0 .9rem;padding-top:2rem;
  border-top:1px solid var(--ie-line);
}
.ie27-ptabs__panel > h2:first-child{padding-top:0;border-top:0}
.ie27-ptabs__panel h3{font-size:1.12rem;margin:1.6rem 0 .5rem}
.ie27-ptabs__panel h2 + h3{margin-top:.6rem}
.ie27-ptabs__panel strong{color:var(--ie-ink-text);font-weight:600}
.ie27-ptabs__panel ol{margin:0 0 1.2rem;padding-left:1.4rem}
.ie27-ptabs__panel ol li{margin-bottom:.5rem}
.ie27-ptabs__panel ul li p,.ie27-ptabs__panel ol li p{margin:0}
.ie27-ptabs__panel img{border-radius:var(--ie-r-sm);margin:1.2rem 0}
.ie27-ptabs__panel blockquote{
  margin:1.4rem 0;padding:16px 20px;background:var(--ie-paper-2);
  border-left:3px solid var(--ie-gold);border-radius:0 var(--ie-r-sm) var(--ie-r-sm) 0;
}
.ie27-ptabs__panel blockquote p:last-child{margin:0}
.ie27-ptabs__panel table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.95rem}
.ie27-ptabs__panel th,.ie27-ptabs__panel td{padding:10px 12px;border-bottom:1px solid var(--ie-line);text-align:left;vertical-align:top}
.ie27-ptabs__panel th{font-family:var(--ie-font-display);color:var(--ie-ink-text)}

/* Buttons written into the WYSIWYG (class="ie27-btn ie27-btn--primary") keep
   button styling instead of the prose link underline. */
.ie27-prose a.ie27-btn{text-decoration:none;color:var(--ie-indigo)}
.ie27-prose a.ie27-btn:hover{color:#fff}
.ie27-prose .ie27-btn.is-disabled{
  background:var(--ie-paper-2);color:var(--ie-slate);
  border:1px dashed rgba(26,35,64,.25);cursor:default;transform:none;box-shadow:none;
}
.ie27-prose p:has(> .ie27-btn){margin:1.4rem 0 .6rem}

/* ---- Small screens ---------------------------------------------------- */
@media (max-width:820px){
  .ie27-ptabs__tab{padding:16px 14px 15px;font-size:.92rem}
  .ie27-ptabs__tab:first-child{margin-left:-14px}
  .ie27-ptabs__tab::after{left:14px;right:14px}
  .ie27-ptabs__body{padding:40px 0 64px}
  .ie27-ptabs__panel h2{font-size:1.28rem;margin-top:2.1rem;padding-top:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  [data-ie27-ptabs] .ie27-ptabs__panel:not([hidden]){animation:none}
  .ie27-ptabs__tab::after{transition:none}
}