/*
Archive styling: structural only.

Deliberately unopinionated about colour and type - the theme owns those, and this is dropped
into an Elementor page that has its own. What is here is the layout, plus the two things that
must not be left to a theme: x-cloak, and a visible focus ring.
*/

/* Without this, every card flashes on screen before Alpine evaluates x-show. */
.roa-tas-archive [x-cloak] { display: none !important; }

.roa-tas-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

/*
Field metrics in one place. The arrow below is positioned off the field height, so padding and
line-height cannot drift apart from it.
*/
.roa-tas-controls {
  --roa-field-pad: 15px;
  --roa-field-height: calc(var(--roa-field-pad) * 2 + 1.2em + 2px);
}

/*
Narrower than the filters it sits beside - a search box does not need to be the widest thing.
This and the select width below were cut by a fifth (from 23rem and 13rem) when Facility
joined the bar, so search plus five selects can still share one row on a desktop container.
*/
.roa-tas-search { flex: 0 1 18.4rem; }

/*
One rule for both control types, so the pill is identical whichever you look at.

appearance:none is the "fake it" part: left native, a select draws its own rounded corners and
arrow in every browser differently, and Safari ignores border-radius on a search input
altogether. Stripped to nothing, both become plain boxes this can shape identically.

Qualified by the wrapper for the same reason as the card title: an Elementor kit styles inputs
off `.elementor-kit-NNNN input[type="search"]`, which ties this on specificity and then wins on
load order. Two classes and an element settles it without an !important.
*/
.roa-tas-archive .roa-tas-search input[type="search"],
.roa-tas-archive .roa-tas-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 15px 18px 10px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.2;
}

.roa-tas-group {
  position: relative;
  min-width: 0;
  flex: 0 1 10.4rem;
}

.roa-tas-archive .roa-tas-select {
  padding-right: calc(var(--roa-field-pad) * 2 + 10px);
  cursor: pointer;
}

/*
The arrow, drawn from two borders rather than a background image.

An SVG data URI would have to name its own colour, and this sheet does not know what colour
the theme is using - currentColor does. Measured from the bottom of the group, which is the
bottom of the select: the group holds nothing else now that the label has gone.
*/
.roa-tas-group::after {
  content: "";
  position: absolute;
  right: var(--roa-field-pad);
  bottom: calc(var(--roa-field-height) / 2 - 5px);
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  opacity: 0.5;
  pointer-events: none;
}

.roa-tas-clear {
  align-self: flex-end;
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50px;
  padding: var(--roa-field-pad) 1.25rem;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

/*
Company chips: a row of their own under the dropdowns (flex-basis 100% wraps them there), in
smaller type, so they read as a secondary refinement rather than a fifth filter.

Same pill border as the fields. Pressed is a currentColor tint plus a full-strength border, so
it reads on a light or a dark bar without this sheet naming a colour.
*/
.roa-tas-chips {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.25rem;
}

/* The inline label before the chips: their size, bolder, no pill. */
.roa-tas-archive .roa-tas-chips__label {
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.2;
  margin-right: 0.25rem;
}

/* Decoration only, so the alt text after the slash keeps it out of the group's spoken name. */
.roa-tas-archive .roa-tas-chips__label::after {
  content: "\00a0\00bb";
  content: "\00a0\00bb" / "";
}

.roa-tas-archive .roa-tas-chip {
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50px;
  padding: 6px 14px 4px;
  color: inherit;
  font: inherit;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}

.roa-tas-archive .roa-tas-chip:hover {
  border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.roa-tas-archive .roa-tas-chip[aria-pressed="true"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: currentColor;
  font-weight: 600;
}

/* The count on the left, the Tiles / List toggle on the right, one line above the cards. */
.roa-tas-listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1rem;
}

.roa-tas-archive .roa-tas-count {
  margin: 0;
  opacity: 0.75;
  font-size: 0.9em;
}

/*
Same pill border as the chips, joined into one segmented control. Pressed is the chips' pressed
tint, so the two kinds of toggle on the page look like the same kind of thing.
*/
.roa-tas-view {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50px;
  overflow: hidden;
}

.roa-tas-archive .roa-tas-view__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 7px 14px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.7;
}

.roa-tas-archive .roa-tas-view__button + .roa-tas-view__button {
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.roa-tas-archive .roa-tas-view__button:hover { opacity: 1; }

.roa-tas-archive .roa-tas-view__button[aria-pressed="true"] {
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-weight: 600;
  opacity: 1;
}

.roa-tas-view__button svg { flex: none; }

/* Inside the pill the ring would be clipped by overflow:hidden, so it goes inside the button. */
.roa-tas-archive .roa-tas-view__button:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------ tiles */

/*
The one opinionated part of this sheet.

Everything above inherits the theme's colour; a tile cannot - it is a dark panel with its own
palette, and half-inheriting would just make it look broken. The palette is four custom
properties so it stays changeable in one place, and so an Elementor page can override them
without touching this file.

--roa-card-accent is eyeballed off the design; swap it for the real brand hex.
*/
.roa-tas-list {
  --roa-card-bg: #13303c;
  --roa-card-accent: #f2a93b;
  --roa-card-title: #ffffff;
  --roa-card-meta: #a9bcc4;

  --roa-card-radius: 25px;
  --roa-card-image: 200px;
  /* How far the dark panel rides up over the image - also the length of the fade. */
  --roa-card-overlap: 70px;

  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* minmax(0,1fr) rather than 1fr: a long unbroken course code must not widen its column. */
@media (max-width: 62rem) {
  .roa-tas-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .roa-tas-list { grid-template-columns: minmax(0, 1fr); }
}

.roa-tas-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--roa-card-radius);
  overflow: hidden;
  background: var(--roa-card-bg);
}

.roa-tas-card:hover { opacity: 0.9; }

/*
Sized by min-height, not height, so a tile whose neighbour has a three-line title grows with it
rather than leaving a gap. The background-color shows through when a course has no image yet,
which is a plain dark tile rather than a broken one.
*/
.roa-tas-card-image {
  min-height: var(--roa-card-image);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: color-mix(in srgb, var(--roa-card-bg) 82%, #ffffff);
}

/*
The tag over the image's top-right corner: Next Start 05-Nov / Self-Paced / Enquire Now /
Partner Course. Flush to the card's right edge, so only its left corners are rounded - the card's
own overflow:hidden clips it on the right.

The background is the Elementor kit's secondary colour, with the dark blue-green from the design
as the fallback where no kit is loaded. Qualified by the wrapper so a kit's paragraph margins do
not win on load order. Each variant has a --modifier class (roa-tas-card-tag--next-start,
--self-paced, --enquire, --partner) should one ever need its own colour.
*/
.roa-tas-archive p.roa-tas-card-tag {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px 0 0;
  padding: 9px 14px 5px 9px;
  border-radius: 5px 0 0 5px;
  background-color: var(--e-global-color-secondary, #2f5257);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}

/*
Pulled up over the image by the overlap, with the same distance spent fading from nothing to
solid - so the panel arrives out of the photograph rather than cutting it off. Padding-top
matches, which is what keeps the text clear of the fade.

Deliberately not position:relative. It paints over the image on document order alone, and
leaving it unpositioned means the card is the nearest positioned ancestor - which is what lets
the title's link stretch across the whole tile below.
*/
.roa-tas-card-body {
  flex: 1;

  /*
  Cards in a row stretch to the tallest, so the panel is taller than its text on most of them.
  Settling the text on the bottom edge lines the durations up across the row rather than
  letting each block start wherever its own title happens to end. Padding-top still holds the
  text clear of the fade on the tall ones.
  */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--roa-card-overlap) 1.5rem 1.5rem;
  margin-top: calc(var(--roa-card-overlap) * -1);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--roa-card-bg) var(--roa-card-overlap)
  );
}

.roa-tas-card-type {
  margin: 0 0 0.5rem;
  color: var(--roa-card-accent);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
Over-qualified on purpose.

An Elementor kit sets its own type off `.elementor-kit-NNNN h3`, which is a class and an
element - so a lone `.roa-tas-card-title` is one class against a class-and-element and loses
however late this sheet loads. Naming both the wrapper and the tag makes it two classes and an
element, which wins outright on specificity rather than on load order. The same applies to the
link inside it: kits set link colour globally.
*/
.roa-tas-archive h3.roa-tas-card-title {
  margin: 0 0 0.85rem;
  color: var(--roa-card-title);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.25;
}

.roa-tas-archive .roa-tas-card-title a {
  color: inherit;
  text-decoration: none;
}

/*
The whole tile is the click target, from a link that still only wraps the title. Nothing else
in the card is interactive, so there is no other target for this to swallow.
*/
.roa-tas-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.roa-tas-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  color: var(--roa-card-meta);
  font-size: 0.95rem;
}

/* The caret from the design. Decorative, and drawn rather than fetched. */
.roa-tas-card-meta::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.roa-tas-none,
.roa-tas-empty { margin: 2rem 0; opacity: 0.75; }

/* Themes routinely remove outlines. This is the one place that must not be inherited. */
.roa-tas-archive :is(input, button, a):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*
On a tile the ring wants to be round the tile, not round the title text in the middle of it.
Behind @supports because the fallback above is already correct - this only moves it.
*/
@supports selector(:has(*)) {
  .roa-tas-card:has(.roa-tas-card-title a:focus-visible) {
    outline: 2px solid var(--roa-card-title);
    outline-offset: 3px;
  }

  .roa-tas-archive .roa-tas-card-title a:focus-visible { outline: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .roa-tas-card { transition: opacity 0.15s ease; }
}

/* ------------------------------------------------------------------ list view */

/*
The same cards as rows, switched on by .roa-tas-results--list (the Tiles / List toggle).

Tiles are the default and everything above is theirs; this only overrides. The card becomes a
grid, and its body is display:contents so the type, title and duration inside it become cells
of that grid alongside the image and the tag - which is what lets every row line up in columns
without changing the markup. --roa-row-cols is shared with the header row so the labels sit
over their columns.

Rows drop the dark tile panel and take the theme's colours, like the rest of this sheet: a page
of navy bars is a lot heavier than a page of navy tiles.
*/
.roa-tas-results {
  --roa-row-cols: 4.5rem minmax(0, 1fr) 10rem 10.5rem;
}

.roa-tas-list-head { display: none; }

.roa-tas-results--list .roa-tas-list-head {
  display: grid;
  grid-template-columns: var(--roa-row-cols);
  column-gap: 1.25rem;
  padding: 0 1rem 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.roa-tas-results--list .roa-tas-list {
  --roa-card-title: currentColor;
  --roa-card-meta: currentColor;

  display: block;
}

.roa-tas-results--list .roa-tas-card {
  display: grid;
  grid-template-columns: var(--roa-row-cols);
  grid-template-areas:
    "img type dur tag"
    "img title dur tag";
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  background: none;
}

.roa-tas-results--list .roa-tas-card:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 5%, transparent);
}

/* A small square thumbnail: the same background-image, cropped by the box rather than a new file. */
.roa-tas-results--list .roa-tas-card-image {
  grid-area: img;
  align-self: center;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 10px;
  background-position: center;
}

.roa-tas-results--list .roa-tas-card-body { display: contents; }

.roa-tas-results--list .roa-tas-card-type {
  grid-area: type;
  align-self: end;
  margin: 0 0 0.2rem;
  color: inherit;
  opacity: 0.65;
}

.roa-tas-archive .roa-tas-results--list h3.roa-tas-card-title {
  grid-area: title;
  align-self: start;
  margin: 0;
  font-size: 1.05em;
}

.roa-tas-results--list .roa-tas-card-meta {
  grid-area: dur;
  align-self: center;
  opacity: 0.8;
}

.roa-tas-results--list .roa-tas-card-meta::after { display: none; }

/* Out of the image's corner and into its own column, as a whole pill. */
.roa-tas-archive .roa-tas-results--list p.roa-tas-card-tag {
  grid-area: tag;
  position: static;
  align-self: center;
  justify-self: start;
  margin: 0;
  padding: 6px 12px 4px;
  border-radius: 50px;
  font-size: 0.8rem;
}

/* Under the tiles' 62rem break there is no room for two fixed columns: stack them under the title. */
@media (max-width: 62rem) {
  .roa-tas-results--list .roa-tas-list-head { display: none; }

  .roa-tas-results--list .roa-tas-card {
    grid-template-columns: 4rem minmax(0, 1fr);
    grid-template-areas:
      "img type"
      "img title"
      "img dur"
      "img tag";
    grid-template-rows: auto;
    row-gap: 0.2rem;
  }

  .roa-tas-results--list .roa-tas-card-type,
  .roa-tas-archive .roa-tas-results--list h3.roa-tas-card-title,
  .roa-tas-results--list .roa-tas-card-meta {
    align-self: start;
  }

  .roa-tas-results--list .roa-tas-card-image { align-self: start; }

  .roa-tas-archive .roa-tas-results--list p.roa-tas-card-tag { margin-top: 0.3rem; }
}

/*
Split layout - [roa_tas_courses part="filters"] and part="list" in separate containers.

Only the seam between the two halves needs saying. The bar's own padding and background are
the Elementor container's, not ours: a full-bleed grey band is a section, and a section is
something the page builder already knows how to make.
*/
.roa-tas-archive--filters .roa-tas-controls { margin-bottom: 0; }