/*
 * Card skins: child CSS over the parent's `accordion` and `basic` Card Types.
 * Enqueued on every page by includes/skins/card-skins.php. Token names only.
 */

/* Accordion skin --------------------------------------------------------- */

/*
 * The stack: a Cards group made only of accordion cards. `render_card_group()`
 * wraps every card in its own `<div class="col-md-N">` (or `class=""`), so
 * rows are reached through that wrapper (`> * > .accordion-card`). A group
 * that mixes accordion cards with other card types keeps the kit grid and
 * gets no stack styling (unsupported as a stack).
 *
 * `render_card_group()` also emits `gap-*`, and the `.gap-*` utilities beat
 * any plain `gap` declaration, so the rows sit flush by turning the grid into
 * a block container (where `gap` does not apply) instead of fighting the
 * utility.
 */
.cards:has(.accordion-card):not(:has(> * > .card:not(.accordion-card))) {
  display: block;
}

.accordion-card {
  background-color: var(--white);
  border: var(--card--border-width) var(--card--border-style) var(--error);
  border-radius: 0;
  box-shadow: none;
}

/* Rows share one border line instead of doubling it. */
.cards:has(.accordion-card):not(:has(> * > .card:not(.accordion-card))) > * + * > .accordion-card {
  border-top-width: 0;
}

.cards:has(.accordion-card):not(:has(> * > .card:not(.accordion-card))) > :first-child > .accordion-card {
  border-top-left-radius: var(--border-radius--md);
  border-top-right-radius: var(--border-radius--md);
}

.cards:has(.accordion-card):not(:has(> * > .card:not(.accordion-card))) > :last-child > .accordion-card {
  border-bottom-left-radius: var(--border-radius--md);
  border-bottom-right-radius: var(--border-radius--md);
}

/*
 * Row: 56 tall inside the shared 2-px border (a 58 pitch; the first row, with
 * its top border, 60). The title starts at the kit's mobile card padding and,
 * from md, 52 in from the stack edge (border included); the plus/minus circle
 * stays at the right, vertically centred. The browser centres a button's
 * text, which the title inherits, so the title, and each line of a wrapped
 * title, is set back to the left.
 */
.accordion-card .card__header {
  min-height: 3.5rem;
  padding: var(--spacer--xs) var(--card--padding--mobile);
}

.accordion-card .card__title {
  flex: 1 1 auto;
  color: var(--orange);
  font-weight: var(--font-weight--bold);
  font-size: var(--large-font-size);
  text-align: left;
}

@media (min-width: 48em) {
  .accordion-card .card__header {
    padding-right: var(--spacer--lg);
    padding-left: 3.125rem;
  }
}

.accordion-card.is-open {
  background-color: var(--orange);
  border-color: var(--orange);
}

.accordion-card.is-open .card__title {
  color: var(--cream);
}

.accordion-card.is-open .card__content-inner {
  background-color: var(--cream);
  color: var(--black);
  border-top: 0;
}

/*
 * Toggle: the parent's chevron gives way to a plus (closed) / minus (open)
 * circle. Its stroke deliberately reuses `--card--border-width`, so the icon
 * line always matches the row border (the design draws both at the same width).
 */
.accordion-card .card__arrow svg {
  display: none;
}

.accordion-card .card__arrow {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--card--border-width) solid currentColor;
  border-radius: 50%;
  color: var(--orange);
}

.accordion-card .card__arrow::before,
.accordion-card .card__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: var(--card--border-width);
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

/* The vertical bar turns the minus into a plus. */
.accordion-card .card__arrow::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-card.is-open .card__arrow {
  color: var(--cream);
}

.accordion-card.is-open .card__arrow::after {
  display: none;
}

/* Resources tile: a basic card without a headline ------------------------- */

/*
 * The tile sits on the page background: no card fill, border or shadow, the
 * copy centred under the image. The tile is the containing block of its
 * stretched link (below), with square corners: the card's `overflow: hidden`
 * clips to its radius, which would cut the link's hit area at the corners
 * (nothing is drawn there, so the square is invisible).
 */
.card-basic:not(:has(.card__headline)) {
  text-align: center;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
  border-radius: 0;
}

/*
 * The image is a logo: shown whole at its own proportions (the parent's
 * `image-3x2` would crop it to 3:2), never wider than the column and never
 * stretched past its own pixel width, centred in the tile.
 *
 * The size and ratio come from the image's `width` and `height` attributes.
 * A lazy image (`sizes="auto"`) is size-contained by the browser, so it has
 * no natural size or ratio of its own; without the attributes it would take
 * core's `contain-intrinsic-size` (3000 by 1500) and render 1500 tall. The
 * attribute values also hold before any image has loaded. A browser without
 * typed `attr()` drops those two declarations and keeps the `auto` ones.
 */
.card-basic:not(:has(.card__headline)) .card__image {
  display: block;
  border-radius: var(--border-radius--md);
  aspect-ratio: auto;
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
  width: auto;
  width: attr(width px, auto);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.card-basic:not(:has(.card__headline)) .card__content {
  font-size: var(--large-font-size);
  color: var(--masala);
}

/*
 * Links in a tile's copy read as copy: the content colour, no underline. On
 * hover and keyboard focus only the colour changes; the browser's focus ring
 * is left in place.
 */
.card-basic:not(:has(.card__headline)) .card__content a {
  color: inherit;
  text-decoration: none;
}

.card-basic:not(:has(.card__headline)) .card__content a:hover, .card-basic:not(:has(.card__headline)) .card__content a:focus-visible {
  color: var(--secondary);
}

/*
 * Stretched link: when the tile's copy is one paragraph that is one link (the
 * Resources tiles), the link's `::after` covers the whole tile, so the image,
 * the padding and the text all reach that link with its own href and target.
 * A tile with no link, several links, or copy beside the link (download
 * cards) generates no overlay and keeps each link at its own text.
 */
.card-basic:not(:has(.card__headline)) .card__content > p:only-child > a:only-child::after {
  content: "";
  position: absolute;
  inset: 0;
}

/*
 * The group: a Cards group made only of headline-less basic cards, 3-up
 * (`col-md-4`), centres an incomplete last row: a lone tile spans the middle
 * track (lines 5 to 9), two tiles the middle two (3 to 11). The kit forces
 * its spans, so the overrides are forced too. A group with any other
 * card type, or any basic card with a headline, keeps the kit grid; below 48em
 * the tiles stack at full width in source order.
 */
@media (min-width: 48em) {
  .cards:has(> * > .card-basic):not(:has(> * > .card:not(.card-basic))):not(:has(.card__headline)) > .col-md-4:nth-child(3n + 1):last-child {
    grid-column: 5 / span 4 !important;
  }

  .cards:has(> * > .card-basic):not(:has(> * > .card:not(.card-basic))):not(:has(.card__headline)) > .col-md-4:nth-child(3n + 1):nth-last-child(2) {
    grid-column: 3 / span 4 !important;
  }
}