@charset "UTF-8";
/*
 * Description list for label/value(s) pairs: product detail tabs Specification, Documents, Software
 * (con_products Family/Show.html) and the driver DB plugin (Driverdb/List.html, /licenses/). Moved
 * out of product-detail.css so the plugin page can load it on its own.
 *
 *   dl.description-list          dt = label, one or more dd = value(s); "-spacious" = wider dd gap
 *   .description-list__highlight emphasised part of a value (CPU model name)
 *   .jump-tags                   tag row of in-page anchor links above a list
 *   .document-item               one downloadable file/link per dd (__link, __date, __desc, __name)
 */
@layer molecules {
  /* Container-Query needs an ancestor as container -- the dl can't query itself, so its direct
     parent becomes one (tab panel content on the product page, the plugin wrapper on /licenses/). */
  :has(> dl.description-list) {
    container-type: inline-size;
  }
  /* Outside "dl.description-list" too: Output.html renders it on the compare page. */
  .description-list__highlight {
    font-weight: var(--font-weight-h1-h6);
    color: var(--color-primary-orange);
  }
  /* Specification + Documents + Software tab (Tab/Specification.html/WrappedAttribute.html, Figma
     node 3398:29723; Tab/Documents.html/Document.html, Figma node 3401:32439; DriverDb/List.html,
     also on /licenses/): a wrapper-less
     description list -- dt/dd sit directly in the dl as grid items, side by side from 640px list
     width, stacked below. A dt may have several dd (Documents: one per file). */
  dl.description-list {
    display: grid;
    /* "minmax(0, …)": long unbreakable values (driver file names) must not widen the track */
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    overflow-wrap: anywhere;
  }
  @container (min-width: 640px) {
    dl.description-list {
      grid-template-columns: min(312px, 35%) minmax(0, 1fr);
    }
  }
  dl.description-list dt {
    padding-top: var(--gap-l);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-h1-h6);
    line-height: 1.2;
  }
  dl.description-list dt:not(:first-of-type) {
    border-top: var(--border-default-width) solid var(--shade-grey-100);
  }
  dl.description-list dt:first-of-type {
    padding-top: 0;
  }
  @container (min-width: 640px) {
    dl.description-list dt {
      grid-column: 1;
      padding-bottom: var(--gap-l);
    }
  }
  dl.description-list dd {
    margin: 0;
    padding: var(--text-gap-h6) 0 var(--gap-l);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-default);
    line-height: 1.5;
  }
  dl.description-list dd:last-of-type {
    padding-bottom: 0;
  }
  dl.description-list dd {
    /* Several dd per dt: only the group's first dd keeps the row's top spacing, the
       following ones sit "--gap-m" apart. */
  }
  dl.description-list dd + dd {
    padding-top: 0;
  }
  dl.description-list dd:has(+ dd) {
    padding-bottom: var(--gap-m);
  }
  @container (min-width: 640px) {
    dl.description-list dd {
      grid-column: 2;
      padding-top: var(--gap-l);
      /* Gutter as padding, not "column-gap" -- a gap would break the divider line between
         the two columns. */
      padding-left: var(--grid-gutter-default);
    }
  }
  /* Side by side, the divider runs across both columns: the first dd after each dt gets the same
     top border as its dt. Written out instead of nested -- "dt + &" would compile to
     "dt + dl.description-list dd". */
  @container (min-width: 640px) {
    dl.description-list dt:not(:first-of-type) + dd {
      border-top: var(--border-default-width) solid var(--shade-grey-100);
    }
    dl.description-list dt:first-of-type + dd {
      padding-top: 0;
    }
    dl.description-list dt:last-of-type {
      padding-bottom: 0;
    }
  }
  /* Driver list (DriverDb/List.html + File.html, Figma node 3401:32549): OS jump tags above the
     list, files sit further apart ("--gap-l") than documents ("--gap-m", see dd rules above). */
  .jump-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-xs);
    margin: 0 0 var(--gap-xxl);
    padding: 0;
    list-style: none;
  }
  .jump-tags li {
    margin: 0;
    text-indent: 0;
  }
  .jump-tags li::before {
    /* cancels the sitewide ul li::before bullet, see .thumbnails li::before */
    content: normal;
  }
  .jump-tags a {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--button-icon-gap);
    border: var(--border-default-width) solid var(--color-primary-anthracite);
    border-radius: var(--border-radius-button);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--body-text-color);
    transition: color 200ms ease, border-color 200ms ease;
  }
  .jump-tags a:hover, .jump-tags a:focus-visible {
    color: var(--color-primary-orange);
    border-color: var(--color-primary-orange);
  }
  dl.description-list.-spacious dt {
    scroll-margin-top: calc(var(--sticky-header-height) + var(--gap-l));
  }
  dl.description-list.-spacious dd:has(+ dd) {
    padding-bottom: var(--gap-l);
  }
  /* One document/driver per dd (Show/Document.html, DriverDb/File.html): link, then date (+ size)
     and/or description. Spacing per pair instead of one flex "gap" -- link + description (e.g. the
     whitepaper) sit flush, link + date "--gap-xs", date + description "--gap-s" (Figma). */
  .document-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .document-item__date {
    margin-top: var(--gap-xs);
    font-size: var(--font-size-s);
  }
  .document-item__date + .document-item__desc {
    margin-top: var(--gap-s);
  }
  .document-item__desc > :last-child {
    margin-bottom: 0;
  }
  .document-item__link {
    display: inline-flex;
    align-items: center;
    gap: var(--button-icon-gap);
    font-weight: var(--font-weight-bold);
  }
  .document-item__link.-file::before {
    content: "\e318";
    font-family: "lucide";
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
  }
}