/* ==========================================================================
   News: feature story, filterable grid, plain rows and the compact hero
   card. Markup comes from [uaeedc_news] in inc/shortcode-news.php, one
   card function shared by every layout. Filtering behaviour (search,
   source select, kind chips) on the full layout is driven by the generic
   assets/js/filter.js, shared with [uaeedc_members]; this file only
   supplies the [hidden] guards and the toolbar and card look. Chip and
   field rules are copied from members.css and programs.css rather than
   shared, so this file has no dependency on either. Every rule is scoped
   under .u-news. Tokens only, no raw hex.
   ========================================================================== */

.u-news {
  --u-news-media-ratio: 16 / 10;
}

/* --- Heading --------------------------------------------------------------- */

.u-news__heading {
  margin: 0 0 var(--u-space-8);
}

/* --- Toolbar -----------------------------------------------------------
   Field styling copied from members.css, chip styling copied from
   programs.css. Kept as literal duplicates on purpose: the brief for this
   file is that it must not depend on either.
   ------------------------------------------------------------------------- */

.u-news__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-space-4);
  margin: 0 0 var(--u-space-8);
}

.u-news__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u-space-2);
}

.u-news__chip {
  height: 40px;
  padding: 0 var(--u-space-4);
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-pill);
  background: var(--u-bg);
  color: var(--u-text-muted);
  font-size: var(--u-text-sm);
  font-weight: var(--u-weight-medium);
  cursor: pointer;
  transition:
    background-color var(--u-dur-fast) var(--u-ease),
    border-color var(--u-dur-fast) var(--u-ease),
    color var(--u-dur-fast) var(--u-ease);
}

.u-news__chip:hover {
  border-color: var(--u-ink-40);
  color: var(--u-text);
}

/* Ink pill when active, not the brand green: a filter control, not a call
   to action. Matches the same decision already made in programs.css. */
.u-news__chip.is-on {
  background: var(--u-ink);
  border-color: var(--u-ink);
  color: var(--u-white);
}

.u-news__search,
.u-news__select {
  display: flex;
  align-items: center;
  height: 48px;
  border: 1px solid var(--u-border);
  border-radius: var(--u-radius-sm);
  background: var(--u-bg);
  transition: border-color var(--u-dur-fast) var(--u-ease);
}

.u-news__search {
  flex: 1 1 auto;
  min-width: 12rem;
  padding: 0 var(--u-space-4);
}

.u-news__search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--u-text-sm);
  color: var(--u-text);
}

.u-news__search input::placeholder {
  color: var(--u-ink-40);
}

/* Its own full-width row below 640px. The longest option, "Manipal Academy
   of Higher Education Dubai", gives the select an intrinsic width near
   347px, and at flex: none the label was sized to it, so the toolbar
   overflowed a 360px viewport. A 100% flex-basis drops the label onto its
   own line and min-width: 0 lets it shrink under that intrinsic width
   instead of pushing the row wider. */
.u-news__select {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
}

.u-news__select select {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 var(--u-space-4);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--u-text-sm);
  color: var(--u-text);
  cursor: pointer;
}

/* From 640px the row is wide enough for a shrink-to-fit control again, so
   the select sits beside the search field at its natural width. */
@media (min-width: 40em) {
  /* A fixed 14rem basis rather than the select's natural width (the
     longest option is "Member universities"), so chips, search, select and
     the two-line status share one row at 1200px; in a wrapping row items
     wrap before they shrink, so a smaller basis is the only lever. */
  .u-news__select {
    flex: 0 1 14rem;
    min-width: 11rem;
    max-width: none;
  }

  .u-news__select select {
    width: 100%;
  }
}

.u-news__search:focus-within,
.u-news__select:focus-within {
  /* The same green ring as keyboard focus, on the field's wrapper so the
     select and the search read as one control while being used. */
  outline: 3px solid var(--u-focus);
  outline-offset: 3px;
}

/* Astra styles input[type="search"]:focus and select:focus at (0,2,1) with
   its own padding, shadow and a dotted border, which drew a second box
   inside ours on click. Three-class specificity keeps the inner control
   bare in every state; the wrapper is the one visible box and carries the
   site's focus ring on :focus-within. */
.u-news .u-news__search input,
.u-news .u-news__search input:focus,
.u-news .u-news__search input:focus-visible {
  height: auto;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.u-news .u-news__select select,
.u-news .u-news__select select:focus,
.u-news .u-news__select select:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* Count and, under it, the date a story was last added or changed
   (inc/helpers.php uaeedc_last_updated). Stacked and right-aligned on
   desktop; on phones the toolbar wraps and they sit at the left. */
.u-news__status {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  line-height: var(--u-leading-snug);
}

.u-news__count {
  font-size: var(--u-text-sm);
  color: var(--u-ink-40);
  white-space: nowrap;
}

.u-news__updated {
  font-size: var(--u-text-xs);
  color: var(--u-ink-40);
  white-space: nowrap;
}

@media (max-width: 40em) {
  .u-news__status {
    align-items: flex-start;
    margin-left: 0;
  }
}

/* --- Visibility ----------------------------------------------------------
   filter.js toggles matched cards, the feature and the empty message with
   the hidden attribute. .u-news__card sets its own display (flex, for the
   internal stack) and .u-news__feature sets its own too (block, then grid
   from 640px), so an author rule at equal specificity to the user agent's
   [hidden] selector wins regardless of source order, and the browser
   default never takes over. Each hideable element needs its own explicit
   guard because of this; Task 4 hit this bug first.
   ------------------------------------------------------------------------- */

.u-news__card[hidden],
.u-news__feature[hidden],
.u-news__empty[hidden] {
  display: none;
}

.u-news__empty {
  margin: var(--u-space-8) 0 0;
  color: var(--u-text-muted);
}

/* --- Grid -------------------------------------------------------------
   Shared by the full and row layouts: one column below 640px, three from
   640px up.
   ------------------------------------------------------------------------- */

.u-news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--u-space-8) var(--u-space-4);
  margin-top: var(--u-space-8);
}

@media (min-width: 40em) {
  .u-news__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--u-space-12) var(--u-space-6);
  }
}

/* No feature or toolbar above it, so no gap is owed above the grid. */
.u-news--row .u-news__grid {
  margin-top: 0;
}

/* --- Card ---------------------------------------------------------------
   The whole card is the link; .u-news__link inside is the visible label,
   not a second target. Binding design: title first, meta line (source and
   date) under it, no gradient, no green-tint surface, hover scales the
   image and colours the title, it does not lift the card.
   ------------------------------------------------------------------------- */

.u-news__card {
  display: flex;
  flex-direction: column;
}

/* Has to beat Astra's own .ast-single-post .entry-content a rule
   (0,2,1), which underlines every link in post content and outranks a
   bare two-class descendant selector at (0,2,0) regardless of load
   order, since this stylesheet loads after Astra's inline CSS. Adding
   the "a" type selector here brings this rule to (0,2,1) too, tying
   Astra's specificity, and it wins the tie because it loads later. Only
   .u-news__link inside keeps its underline. */
.u-news a.u-news__card,
.u-news a.u-news__feature {
  text-decoration: none;
  color: inherit;
}

.u-news__media {
  position: relative;
  display: block;
  aspect-ratio: var(--u-news-media-ratio);
  overflow: hidden;
  border-radius: var(--u-radius);
  background-color: var(--u-bg-alt);
  margin: 0 0 var(--u-space-4);
}

/* Descendant selector on purpose: Astra and Elementor both set img height
   to auto at the same specificity as a single class. */
.u-news .u-news__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--u-dur) var(--u-ease);
}

/* Flat tile for stories without an image, matching the university tile
   decision in programs.css: no tint, code mark in green-700. */
.u-news__code {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--u-text-initials);
  font-weight: var(--u-weight-semi);
  color: var(--u-green-700);
}

.u-news .u-news__title {
  margin: var(--u-space-1) 0 0;
  font-size: var(--u-text-xl);
  font-weight: var(--u-weight-semi);
  line-height: var(--u-leading-snug);
  color: var(--u-text);
  transition: color var(--u-dur-fast) var(--u-ease);
}

.u-news__meta {
  margin: var(--u-space-1) 0 0;
  font-size: var(--u-text-xs);
  color: var(--u-text-muted);
}

.u-news__summary {
  margin: var(--u-space-2) 0 0;
  font-size: var(--u-text-sm);
  line-height: var(--u-leading-snug);
  color: var(--u-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hairline-underline link style. */
.u-news__link {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-1);
  margin-top: var(--u-space-3);
  font-size: var(--u-text-2xs);
  font-weight: var(--u-weight-medium);
  color: var(--u-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color var(--u-dur-fast) var(--u-ease),
    text-decoration-color var(--u-dur-fast) var(--u-ease);
}

.u-news__card:hover .u-news__media img,
.u-news__card:focus-visible .u-news__media img {
  transform: scale(1.03);
}

.u-news__card:hover .u-news__title,
.u-news__card:focus-visible .u-news__title {
  color: var(--u-accent);
}

.u-news__card:hover .u-news__link,
.u-news__card:focus-visible .u-news__link {
  color: var(--u-green-700);
}

.u-news__card:focus-visible {
  outline: 3px solid var(--u-focus);
  outline-offset: 3px;
  border-radius: var(--u-radius-sm);
}

/* --- Feature --------------------------------------------------------------
   Stacked below 640px (plain document flow: media, title, meta, summary,
   link, in that order). From 640px, a 12-column grid: media at span 7,
   the text elements at columns 8 to 12, stacked one grid row each so they
   read as a single column beside the media.
   ------------------------------------------------------------------------- */

.u-news__feature {
  display: block;
  margin-bottom: var(--u-space-16);
}

.u-news__feature .u-news__media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--u-space-4);
}

.u-news .u-news__feature .u-news__title {
  font-size: var(--u-text-h2);
  margin-top: var(--u-space-3);
}

@media (min-width: 40em) {
  .u-news__feature {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    gap: 0 var(--u-space-8);
    padding-bottom: var(--u-space-16);
    border-bottom: 1px solid var(--u-border);
  }

  .u-news__feature .u-news__media {
    grid-column: span 7;
    grid-row: 1 / span 4;
    margin-bottom: 0;
  }

  .u-news__feature .u-news__title {
    grid-column: 8 / span 5;
    grid-row: 1;
    margin-top: 0;
    align-self: end;
  }

  .u-news__feature .u-news__meta {
    grid-column: 8 / span 5;
    grid-row: 2;
  }

  .u-news__feature .u-news__summary {
    grid-column: 8 / span 5;
    grid-row: 3;
    align-self: start;
  }

  .u-news__feature .u-news__link {
    grid-column: 8 / span 5;
    grid-row: 4;
    align-self: start;
  }
}

/* --- Hero card ------------------------------------------------------------
   layout="card": one compact white card, meant to sit over the homepage
   hero. No grid, a single .u-news__card with its own surface and shadow.
   ------------------------------------------------------------------------- */

.u-news--card .u-news__card {
  padding: var(--u-space-4);
  background: var(--u-bg);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-lg);
}

.u-news--card .u-news__media {
  aspect-ratio: 16 / 9;
}

.u-news--card .u-news__title {
  font-size: var(--u-text-lg);
}

/* --- Touch ------------------------------------------------------------- */

@media (hover: none) {
  .u-news__chip {
    height: 44px;
  }
}

/* --- Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .u-news__chip,
  .u-news__search,
  .u-news__select,
  .u-news .u-news__media img,
  .u-news .u-news__title,
  .u-news__link {
    transition: none;
  }
}