/*
 * Manjaro Tabs — frontend styles
 * Fully scoped under .mtc-tabs: no global selectors, no theme conflicts.
 *
 * Layout: LEFT column = intro text (top) + tab links (bottom).
 *         RIGHT column = image, maximum 600 x 400 px (3:2), with the
 *         text overlay sitting on top of the image.
 */

.mtc-tabs{
  /* tweak defaults here, or override per instance via shortcode
     attributes / Breakdance element controls */
  --mtc-brown:#2e1a0f;
  --mtc-brown-soft:#5c3a21;
  --mtc-orange:#e8850c;
  --mtc-orange-deep:#c96a08;
  --mtc-amber:#f6c86a;
  --mtc-ink:#33241a;
  --mtc-cream:#fdf6ea;
  --mtc-radius:18px;
  --mtc-font-body:inherit;                       /* follows your theme font */
  --mtc-font-head:Georgia,'Times New Roman',serif;

  font-family:var(--mtc-font-body);
  color:var(--mtc-ink);
  line-height:1.6;
  width:100%;
  max-width:1140px;
  margin-inline:auto;
  -webkit-tap-highlight-color:transparent;
}
.mtc-tabs *,.mtc-tabs *::before,.mtc-tabs *::after{box-sizing:border-box}
.mtc-tabs svg{display:block}
.mtc-tabs figure{margin:0}

/* two-column layout: flexible left | capped right */
.mtc-layout{display:grid;grid-template-columns:1fr minmax(0,600px);gap:clamp(30px,5vw,64px);align-items:center}

/* ---- left column ---- */
.mtc-left{display:flex;flex-direction:column;min-width:0}
.mtc-intros{display:grid;flex:1 1 auto;align-content:center}
.mtc-intro{grid-area:1/1}
.mtc-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--mtc-orange-deep);font-size:.76rem;font-weight:800;letter-spacing:3px;text-transform:uppercase}
.mtc-kicker::before{content:'';width:30px;height:2px;background:var(--mtc-orange);border-radius:2px}
.mtc-intro h3{font-family:var(--mtc-font-head);font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.2;color:var(--mtc-brown);margin:12px 0 14px}
.mtc-intro p{color:var(--mtc-brown-soft);max-width:46ch;margin:0}

/* tab links — pinned to the bottom of the left column */
.mtc-links{border-top:1px solid rgba(46,26,15,.15);margin-top:26px;padding-top:14px;display:flex;flex-direction:column;gap:2px}
.mtc-tab{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:none;border:0;padding:12px 10px;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--mtc-brown-soft);
  transition:background .25s,color .25s;
}
.mtc-tab-num{font-family:var(--mtc-font-head);font-size:.85rem;color:var(--mtc-orange);min-width:24px}
.mtc-tab-label{position:relative}
.mtc-tab-label::after{content:'';position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--mtc-orange);border-radius:2px;transition:width .3s}
.mtc-tab:hover{background:rgba(232,133,12,.09)}
.mtc-tab:hover .mtc-tab-label::after,.mtc-tab.is-active .mtc-tab-label::after{width:100%}
.mtc-tab.is-active{color:var(--mtc-brown)}
.mtc-tab-arrow{width:16px;height:16px;margin-left:auto;flex:none;color:var(--mtc-orange);opacity:0;transform:translateX(-6px);transition:.3s}
.mtc-tab:hover .mtc-tab-arrow,.mtc-tab.is-active .mtc-tab-arrow{opacity:1;transform:none}
.mtc-tab:focus-visible{outline:3px solid var(--mtc-orange);outline-offset:2px}

/* ---- right column: image capped at 600 x 400 (3:2) ---- */
.mtc-media-wrap{display:grid;min-width:0;width:100%;max-width:600px;justify-self:end;align-content:center}
.mtc-media{
  grid-area:1/1;position:relative;overflow:hidden;border-radius:var(--mtc-radius);
  width:100%;max-width:600px;aspect-ratio:3/2;   /* 600 x 400 at full width */
  box-shadow:0 26px 60px -22px rgba(46,26,15,.5);
  background:#2e1a0f;
}
.mtc-media svg,.mtc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.mtc-media:not(.is-active) svg,.mtc-media:not(.is-active) img{transform:scale(1.06)}
.mtc-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,4vw,34px);
  background:linear-gradient(180deg,rgba(20,10,3,0) 0%,rgba(20,10,3,.55) 45%,rgba(20,10,3,.85) 100%);
  color:var(--mtc-cream);
}
.mtc-tag{display:inline-block;background:var(--mtc-orange);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:6px 13px;border-radius:99px;margin-bottom:12px}
.mtc-overlay h4{font-family:var(--mtc-font-head);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 6px;color:#fff}
.mtc-overlay p{margin:0;font-size:.88rem;color:var(--mtc-amber)}

/* ---- panel switching (crossfade, no layout jump) ---- */
.mtc-intro,.mtc-media{
  opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;
  transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;
}
.mtc-intro.is-active,.mtc-media.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .55s ease .08s,transform .55s ease .08s,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .mtc-intro,.mtc-media,.mtc-media svg,.mtc-media img{transition:none !important}
  .mtc-intro,.mtc-media{transform:none}
}

/* ---- responsive: stack the two columns ---- */
@media (max-width:880px){
  .mtc-layout{grid-template-columns:1fr;gap:26px}
  .mtc-media-wrap{justify-self:center;margin-inline:auto}
  .mtc-intros{align-content:start}
  .mtc-tab{padding:11px 8px}
}