/* products-system-primitives.css
 * Shared across every module in the products system (Main, Type, Category,
 * Entry). Every one of those modules carries the .prd-sys root class, so a
 * single .prd-sys wrapper reaches all of them without leaking site-wide.
 *
 * Conventions: see new-system.md — no BEM prefixes, nesting mirrors the DOM,
 * and no color / background-color / border-color (color comes from the core
 * theme via data-colors).
 */
.prd-sys {

  /* ---------- HIDDEN ---------- */
  /* The `hidden` attribute is only `display: none` in the UA stylesheet, and
   * flex.css sets `[class*='flx'] { display: flex }` at author level — author
   * beats UA regardless of specificity, so a JS-hidden `<li class="flx">`
   * stays on screen. Restoring it here at author level fixes that; the
   * descendant selector (0,2,0) outranks `[class*='flx']` (0,1,0) without
   * needing !important. */
  [hidden] {
    display: none;
  }

  /* ---------- CARD MEDIA ---------- */
  /* .img-con appears inside every card variant across the system. The shared
   * fill behaviour lives here; each card sets its own aspect-ratio locally. */
  .img-con {
    position: relative;
    overflow: hidden;

    /* <picture> from the server, or a <video> the gallery script inserts. */
    .media {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .img-ph {
      width: 100%;
      height: 100%;
      font-size: 0.75rem;
    }
  }

  /* ---------- CARD SHELL ---------- */
  .crd {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
  }

  /* ---------- BANNER TILE ---------- */
  /* Type tiles on the catalog page and category tiles on a type page share
   * this treatment: the image sits *behind* the label rather than above it.
   * The card carries data-colors="primary-dark", so the theme paints the dark
   * ground and the light text; the image is dropped to partial opacity over
   * that ground, which darkens it without declaring a colour here. A tile
   * with no image simply shows the ground — no placeholder needed. */
  .bnr-crd {
    position: relative;
    justify-content: center;
    min-height: 6rem;

    .img-con {
      position: absolute;
      inset: 0;
      opacity: 0.5;
    }

    /* Positioned so it paints above the absolute .img-con. */
    .inf {
      position: relative;
      text-align: center;
    }
  }

  /* ---------- DETAIL HERO ---------- */
  /* The banner-plus-title header is identical on Type and Category. */
  .hero {

    .bnr {
      aspect-ratio: 21 / 6;
    }
  }

  /* ---------- CATALOG SHELL ---------- */
  /* The facet-rail-plus-results layout is identical on Main and Type. */
  .ctlg {
    align-items: flex-start;

    .rail {
      flex: 1 1 15rem;
      min-width: 13.75rem;
    }

    .results {
      flex: 3 1 30rem;
      min-width: 0;
    }
  }

  @media (max-width: 700px) {

    .ctlg {

      .rail {
        position: static;
        flex-basis: 100%;
      }
    }
  }

  /* ---------- FACET RAIL ---------- */
  /* Search box above the facet groups. */
  .srch {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  .flt-by {
    font-weight: 700;
  }

  /* Selected filters, as removable tags above the clear-all button. */
  .chosen {

    .tag {
      border-radius: 6.25rem;
      padding: 0.1875rem 0.5rem 0.1875rem 0.625rem;
      font-size: 0.75rem;
      line-height: 1.6;
      cursor: pointer;
      display: flex;
      gap: .35rem;

      .tag-x {
        font-size: 1rem;
        line-height: 1;
        visibility: visible;
      }
    }
  }

  .fct {
    padding-left: 0;
    padding-top: 0;
    padding-right: 0;
    margin: 0;
    min-width: 0;

    .fct-lgd {
      padding: 0 0 0.625rem;
      font-weight: 700;
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* Beyond the 4th option a group collapses behind its "See more" toggle.
     * display:none has to out-specify flex.css's author-level
     * [class*='flx'] { display: flex } on .opt, which the shorter
     * selector would lose to. */
    &:not(.is-open) .opt--extra {
      display: none;
    }

    .more {
      padding: 0;
      border: 0;
      background: none;
      font-size: 0.8125rem;
      text-decoration: underline;
      cursor: pointer;
    }

    .opt {
      cursor: pointer;
      font-size: 0.875rem;

      input {
        flex: none;
        width: 1rem;
        height: 1rem;
        cursor: pointer;
      }

      .opt-cnt {
        margin-left: auto;
      }

      /* Applied by products-system-facets.js when a facet would return nothing. */
      &.opt--off {
        cursor: default;
        opacity: 0.45;
      }
    }
  }

  /* ---------- PRODUCT GRID ---------- */
  .prd-grd {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }

  .prd-crd {

    .img-con {
      aspect-ratio: 4 / 3;
    }

    .inf {
      flex: 1;

      .eyebrow {
        font-size: 0.625rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      .desc {
        line-height: 1.4;
      }

      /* Pins the chip row to the bottom so cards of differing copy length
       * still line their footers up across a row. */
      .cats {
        margin-top: auto;
        padding-top: 0.75rem;

        /* Facet-value pills. The outline comes from the bdr_a utility on the
         * element, so no border-color is declared here. */
        .chip {
          display: inline-block;
          border-radius: 6.25rem;
          padding: 0.1875rem 0.625rem;
          font-size: 0.6875rem;
          line-height: 1.6;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          white-space: nowrap;
        }
      }
    }
  }
}