/* ============================================================
   02 - ABOUT. Two column: what Ranked Bedwars is (left, sticky)
   next to the 5 step "queue to victory" guide (right).
   Steps reuse the site.js accordion (.acc-item/.acc-head/.acc-body)
   so no new JS is needed; the plus-rotation is overridden to a
   chevron flip below. Prefix: .abt-  ·  tokens only.
   ============================================================ */

.abt-grid {
  display: grid;
  gap: clamp(32px, 3.6vw, 56px);
  align-items: start;
}

/* The yardstick for "is there room for two columns?" is the CONTENT width, not
   the viewport: the fixed sidebar takes 250px from 1024px up, so a 1024px
   viewport gives the columns LESS room than a 1000px one does. A container
   query measures what the columns actually get. 929px is the content box of a
   .container at a 1000px viewport (1000 - 15px reserved scrollbar gutter -
   2 * 28px padding), so the two column layout starts exactly where the brief
   asked and then holds off again until the sidebar has been paid for. */
#about > .container { container-type: inline-size; container-name: abt; }

@container abt (min-width: 929px) {
  /* right column is the taller one, so it sets the row height */
  .abt-grid { grid-template-columns: 0.85fr 1.15fr; }
  /* sticky needs travel room: the column BOX must span the whole row
     (hence align-self:stretch, overriding align-items:start) while the
     panel inside it does the sticking. A start-aligned item shrinks to
     its own content and a sticky child then has nowhere to travel. */
  .abt-intro { align-self: stretch; }
  .abt-intro-in { position: sticky; top: 96px; }
}

/* fallback for engines without container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 1000px) {
    .abt-grid { grid-template-columns: 0.85fr 1.15fr; }
    .abt-intro { align-self: stretch; }
    .abt-intro-in { position: sticky; top: 96px; }
  }
}

/* .eyebrow carries no svg sizing of its own, so an unsized icon lays out at the
   300x150 replaced-element default and shoves the kicker text into a column */
.abt-grid .eyebrow svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ---------- left: what Ranked Bedwars is ---------- */
.abt-intro { min-width: 0; }
.abt-intro-in {
  min-width: 0;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}

/* both column headings: smaller than a full-width .section-title, the
   columns are narrow (~460px at 1440 once the sidebar takes its 250px) */
.abt-grid .abt-h2 { font-size: clamp(25px, 3vw, 34px); }

.abt-lead {
  margin-top: 18px;
  color: var(--text-dim);
  font-size: clamp(14.5px, 1.35vw, 16px);
  line-height: 1.72;
  max-width: 48ch;
}

.abt-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}
.abt-facts .chip { background: var(--surface-2); font-size: 12.5px; padding: 7px 13px; }

.abt-cta { margin-top: 26px; }

/* ---------- right: the guide ---------- */
.abt-guide { min-width: 0; }
.abt-guide-head { margin-bottom: 22px; }

.abt-steps {
  list-style: none;
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  overflow: hidden;
}

/* one panel, hairline-divided rows, not five floating cards, so the
   connector line can run unbroken from step 1 to step 5 */
.abt-steps > .abt-step.acc-item {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.abt-steps > .abt-step + .abt-step { margin-top: 0; border-top: 1px solid var(--hairline); }
.abt-steps > .abt-step.open { background: var(--surface-2); }

/* connector: a segment above the numeral and one below it, so contiguous
   rows join into a single line and the numeral never sits on top of it */
.abt-step::before,
.abt-step::after {
  content: '';
  position: absolute;
  left: 40px;
  width: 2px;
  background: linear-gradient(180deg, var(--hairline-strong), var(--hairline));
  pointer-events: none;
}
.abt-step::before { top: 0; height: 18px; }
.abt-step::after { top: 62px; bottom: 0; }
.abt-steps > .abt-step:first-child::before { display: none; }
.abt-steps > .abt-step:last-child::after { display: none; }
.abt-steps > .abt-step:last-child.open::after { display: block; bottom: 22px; }

/* heading wrapper carries no visual weight; the button inside is the row */
.abt-step-h { margin: 0; font: inherit; letter-spacing: inherit; }

.abt-step .acc-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: start;
  column-gap: 14px;
  padding: 18px 20px;
  font-size: inherit;
  font-weight: inherit;
}

.abt-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  background: radial-gradient(120% 120% at 50% 0%, var(--surface-3), var(--surface));
  border: 1px solid var(--hairline-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.abt-steps > .abt-step.open .abt-num {
  background: var(--accent-grad);
  border-color: transparent;
  color: #0a1320;
}

.abt-step-text { min-width: 0; padding-top: 1px; }
.abt-step-title {
  display: block;
  font-size: clamp(15.5px, 1.4vw, 17px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.24;
  color: var(--text);
}
.abt-step-desc {
  display: block;
  margin-top: 6px;
  font-size: 13.8px;
  font-weight: 500;
  line-height: 1.62;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* chevron, not the default plus: flip it instead of rotating 45deg */
.abt-step .acc-head .acc-ic { width: 20px; height: 20px; margin-top: 12px; color: var(--text-mute); }
.abt-step .acc-head:hover .acc-ic { color: var(--accent); }
.abt-steps > .abt-step.open .acc-head .acc-ic { transform: rotate(180deg); color: var(--accent); }

/* dropdown body lines up under the title, past the numeral gutter */
.abt-step .acc-body-inner {
  padding: 0 20px 20px 76px;
  font-size: 13.8px;
  line-height: 1.65;
  color: var(--text-dim);
}
.abt-sub {
  margin: 0;
  padding-left: 19px;
  display: grid;
  gap: 8px;
}
.abt-sub li { padding-left: 2px; }
.abt-sub li::marker { color: var(--accent); font-weight: 700; }

.abt-link { color: var(--ice-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(180,204,228,.4); transition: color var(--t), text-decoration-color var(--t); }
.abt-link:hover { color: var(--ice-100); text-decoration-color: currentColor; }

/* command / channel pill */
.abt-cmd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  color: var(--ice-200);
  white-space: nowrap;
}

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .abt-step .acc-head { grid-template-columns: 36px minmax(0, 1fr) 18px; column-gap: 12px; padding: 16px 14px; }
  .abt-num { width: 36px; height: 36px; font-size: 15px; }
  .abt-step::before { height: 16px; }
  .abt-step::after { top: 54px; }
  .abt-step::before, .abt-step::after { left: 31px; }
  .abt-step .acc-head .acc-ic { width: 18px; height: 18px; margin-top: 10px; }
  .abt-step .acc-body-inner { padding: 0 14px 18px 62px; }
}

@media (max-width: 380px) {
  .abt-step .acc-body-inner { padding-left: 46px; }
}