/* ==========================================================================
   DGF-Bench website: page styles for the attack pages (attack/*.html) only.
   Loaded after site.css and attacks.css, whose attack-card parts these pages reuse (number badge,
   tags, placement list, excerpt, result cells, legend). Uses the tokens of site.css; no hard-coded colours.
    1. Family colour   2. Breadcrumb   3. Title and facts   4. Results   5. Family list and pager
   ========================================================================== */

/* 1. Family colour: the number badges of attacks.css read --atk-soft and --atk-text. */
.atk-page--injection { --atk-soft: var(--fam-injection-soft); --atk-text: var(--fam-injection-text); --fam: var(--fam-injection); }
.atk-page--document { --atk-soft: var(--fam-document-soft); --atk-text: var(--fam-document-text); --fam: var(--fam-document); }
.atk-page--technique { --atk-soft: var(--fam-technique-soft); --atk-text: var(--fam-technique-text); --fam: var(--fam-technique); }
.atk-page--adaptive { --atk-soft: var(--fam-adaptive-soft); --atk-text: var(--fam-adaptive-text); --fam: var(--fam-adaptive); }

/* 2. Breadcrumb ------------------------------------------------------------------ */
.breadcrumb { margin-bottom: var(--sp-5); font-size: 0.875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; color: var(--c-muted); }
.breadcrumb li + li::before { content: "/"; margin-inline: 8px; color: var(--c-line-strong); }
.breadcrumb a { color: var(--c-text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* 3. Title and facts ------------------------------------------------------------- */
.atk-hero { border-top: 3px solid var(--fam, var(--c-line-strong)); }
.atk-hero .atk-hero__title { display: flex; align-items: flex-start; gap: 14px; max-width: 32ch; }
.atk-hero__title .atk-card__num { min-width: 2.75rem; height: 2.75rem; margin-top: 0.1em; font-size: 1.25rem; }
.atk-hero__title .heading-anchor { display: none; }
.atk-hero__tags { margin-top: var(--sp-4); }
.atk-hero .lede { max-width: 72ch; }
.atk-facts { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); gap: var(--sp-2) var(--sp-6); font-size: 0.9375rem; }
.atk-facts dd code { font-size: 0.875rem; }
@media (max-width: 559px) {
  .atk-hero__title { gap: 10px; }
  .atk-hero__title .atk-card__num { min-width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .atk-facts { display: grid; gap: var(--sp-2); }
  .atk-facts > div { flex-wrap: wrap; }
}

/* 4. Results: one row of six cells on wide screens, three then two on smaller ones. */
.atk-page-results .atk-res-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .atk-page-results .atk-res-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .atk-page-results .atk-res-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.atk-page-results .atk-res { padding: 10px 12px; }
.atk-page-results .atk-res__model { font-size: 0.8125rem; }
.atk-page-results .atk-res__value { font-size: 1.125rem; }
.atk-page-results .atk-res-through { margin-top: var(--sp-3); font-size: 1rem; }
.atk-page-results .atk-results__note { margin-top: var(--sp-3); max-width: 80ch; font-size: 0.9375rem; }
.atk-page-extra { margin-top: var(--sp-5); }
.atk-page-extra .atk-card__extra { padding-top: 0; border-top: 0; }
.atk-page-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); font-size: 0.9375rem; }

/* 5. Family list and pager --------------------------------------------------------- */
.atk-siblings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.atk-siblings__item {
  display: flex; align-items: center; gap: 10px; height: 100%; padding: 8px 12px 8px 8px;
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  color: var(--c-ink); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; text-decoration: none;
}
a.atk-siblings__item:hover { border-color: var(--c-primary); color: var(--c-ink); }
.atk-siblings__item[aria-current="page"] { border-color: var(--fam, var(--c-primary)); box-shadow: inset 3px 0 0 var(--fam, var(--c-primary)); }
.atk-siblings .atk-card__num { min-width: 1.875rem; height: 1.875rem; font-size: 0.875rem; }

.atk-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-6); }
.atk-pager__link {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); text-decoration: none;
}
.atk-pager__link:hover { border-color: var(--c-primary); }
.atk-pager__dir { color: var(--c-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.atk-pager__dir::before, .atk-pager__dir::after { color: var(--c-primary); }
.atk-pager__link--prev .atk-pager__dir::before { content: "\2190  "; }
.atk-pager__link--next .atk-pager__dir::after { content: "  \2192"; }
.atk-pager__name { color: var(--c-ink); font-weight: 650; line-height: 1.35; }
.atk-pager__link--next { grid-column: 2; text-align: right; }
@media (max-width: 559px) {
  .atk-pager { grid-template-columns: minmax(0, 1fr); }
  .atk-pager__link--next { grid-column: auto; }
}

@media print {
  .breadcrumb, .atk-pager, .atk-siblings, .atk-legend { display: none; }
}