/*
[roa_case_studies] - ROA_SC_Case_Studies.

A copy of the course archive's sheet (RelyOn TAS Courses, src/assets/archive.css) with every
class and custom property renamed roa-cs-, so the two archives look the same and can share a
page without either restyling the other. A change to one does not reach the other - edit both
if the two should stay matched.
*/


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

.roa-cs-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-cs-controls {
  --roa-cs-field-pad: 15px;
  --roa-cs-field-height: calc(var(--roa-cs-field-pad) * 2 + 1.2em + 2px);
}

/* Narrower than the filters it sits beside - a search box does not need to be the widest thing. */
.roa-cs-search { flex: 0 1 23rem; }

/*
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-cs-archive .roa-cs-search input[type="search"],
.roa-cs-archive .roa-cs-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-cs-group {
  position: relative;
  min-width: 0;
  flex: 0 1 13rem;
}

.roa-cs-archive .roa-cs-select {
  padding-right: calc(var(--roa-cs-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-cs-group::after {
  content: "";
  position: absolute;
  right: var(--roa-cs-field-pad);
  bottom: calc(var(--roa-cs-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-cs-clear {
  align-self: flex-end;
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50px;
  padding: var(--roa-cs-field-pad) 1.25rem;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.roa-cs-count {
  margin: 0 0 1rem;
  opacity: 0.75;
  font-size: 0.9em;
}

/* ------------------------------------------------------------------ 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-cs-card-accent is eyeballed off the design; swap it for the real brand hex.
*/
.roa-cs-list {
  --roa-cs-card-bg: #13303c;
  --roa-cs-card-accent: #f2a93b;
  --roa-cs-card-title: #ffffff;
  --roa-cs-card-meta: #a9bcc4;

  --roa-cs-card-radius: 25px;
  --roa-cs-card-image: 200px;
  /* How far the dark panel rides up over the image - also the length of the fade. */
  --roa-cs-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 word must not widen its column. */
@media (max-width: 62rem) {
  .roa-cs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

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

.roa-cs-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 case study has no image yet,
which is a plain dark tile rather than a broken one.
*/
.roa-cs-card-image {
  min-height: var(--roa-cs-card-image);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: color-mix(in srgb, var(--roa-cs-card-bg) 82%, #ffffff);
}

/*
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-cs-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 project lines 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-cs-card-overlap) 1.5rem 1.5rem;
  margin-top: calc(var(--roa-cs-card-overlap) * -1);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--roa-cs-card-bg) var(--roa-cs-card-overlap)
  );
}

.roa-cs-card-type {
  margin: 0 0 0.5rem;
  color: var(--roa-cs-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-cs-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-cs-archive h3.roa-cs-card-title {
  margin: 0 0 0.85rem;
  color: var(--roa-cs-card-title);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.25;
}

.roa-cs-archive .roa-cs-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-cs-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

/* The caret from the design. Decorative, and drawn rather than fetched. */
.roa-cs-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-cs-none,
.roa-cs-empty { margin: 2rem 0; opacity: 0.75; }

/* Themes routinely remove outlines. This is the one place that must not be inherited. */
.roa-cs-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-cs-card:has(.roa-cs-card-title a:focus-visible) {
    outline: 2px solid var(--roa-cs-card-title);
    outline-offset: 3px;
  }

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

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

/*
Split layout - [roa_case_studies 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-cs-archive--filters .roa-cs-controls { margin-bottom: 0; }