/*
 * DGA tokens applied to the theme's card grids
 *
 * Three distinct card patterns exist in this theme, each got a class name
 * added to its blade file (plain class names only, no Tailwind rewrites --
 * same reasoning as dga-buttons.css) so this stylesheet has something
 * stable to target:
 *
 *  1. `.dga-card` on media-center-announcements.blade.php's grid --
 *     currently an unboxed image+text stack. This is the closest match to
 *     DGA's real `.card` component (a boxed, white, rounded, shadowed
 *     container), so it gets the full treatment: padding, radius, shadow,
 *     background -- taken directly from DGA's `.card` / `.card--with-shadow`
 *     rules in @platformscode/core.
 *
 *  2. `.dga-media-card` on media-center-news.blade.php and
 *     latest-posts.blade.php (identical structure in both) -- a full-bleed
 *     image tile with a dark gradient overlay and white text on top. DGA's
 *     Card component doesn't have an image-overlay variant like this, so
 *     it isn't reskinned as a `.card` box; instead its existing radius is
 *     swapped for DGA's real `--radius-lg` token and its title for DGA's
 *     real card-title typography (`.dga-card-title` renders as
 *     `<h4 class="text-lg-bold">` in DGA's own source), so it's at least on
 *     the same token system as everything else. The gradient-overlay
 *     pattern itself is a legitimate, distinct design choice -- flagging
 *     it as a design decision to confirm with the client, not "fixing" it
 *     by inventing a DGA equivalent that doesn't exist.
 *
 *  3. `.dga-card.dga-card--stroke` on features-one-col.blade.php -- already
 *     an outlined card; recolored to DGA's real `.card--stroke` border
 *     token and radius.
 */

/* ---- 1. Boxed card (media-center-announcements) ---- */
.dga-card {
  display: block;
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  background-color: var(--background-card);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dga-card:hover {
  box-shadow: var(--shadow-lg);
}
.dga-card__image-container img {
  border-radius: var(--radius-lg);
}
.dga-card__meta {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  color: var(--text-secondary-paragraph);
}
.dga-card__title {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
}
.dga-card__description {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  color: var(--text-primary-paragraph);
}
/* Client feedback (2026-09-09, E-Services page): a "(Click here)" link
   embedded in the description's rich-text content (e.g. files-manager.blade.php)
   inherited this muted paragraph color, reading as plain text instead of a
   clickable link. */
.dga-card__description a {
  color: var(--link-primary);
  text-decoration: underline;
}
.dga-card__description a:hover {
  color: var(--link-primary-hovered);
}

/* ---- 2. DGA news/media card (media-center-news, latest-posts) ----
 * Client asked (PPTX #28) for these to follow the DGA card design, so the
 * old image-overlay tile is rebuilt as DGA's boxed white card: image on top,
 * white body below (date, title, Read More), border + shadow, hover lift. */
.dga-media-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--background-card);
  border: 1px solid var(--border-neutral-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* Per client comment #6: the card itself must NOT move on hover -- only the
   "Read More" button below reacts (see .dga-media-card__link:hover). No card
   lift, no image zoom. */
.dga-media-card__image {
  display: block;
  overflow: hidden;
}
.dga-media-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  /* Client report: a post with no real photo (featured image set to the
     plain MISA logo, or no featured image at all) rendered as a washed-out
     blank tile instead of a branded one -- give it a solid color fallback
     so an empty/missing `background-image` still shows something branded
     rather than a blank white gap. */
  background-color: var(--colors-primary-sa-flag-700);
}
.dga-media-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 24px;
  flex: 1 1 auto;
}
.dga-media-card__meta {
  margin: 0;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  color: var(--text-secondary-paragraph);
}
/* On Arabic pages a legacy bundle rule (.rtl p / a / li { font-family:"NeoSans
   Arabic" !important }, specificity 0,1,1) outranks a plain class, so the card
   date/button reverted to the old font. Scope with the parent (0,2,0) + !important
   to win. Pins the DGA font for card text in every language. */
.dga-media-card .dga-media-card__meta,
.dga-media-card .dga-media-card__title,
.dga-media-card .dga-media-card__link {
  font-family: var(--font-family-arabic) !important;
}
.dga-media-card__title-link {
  text-decoration: none;
}
.dga-media-card__title {
  margin: 0;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-lg);
  line-height: var(--line-height-text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
  transition: color 0.15s ease;
}
/* "Read More" is now a green filled button (Figma). It sits at the bottom of
   the card (margin-top:auto) and is the only element that reacts on hover. */
.dga-media-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: var(--button-background-primary-default);
  color: #fff;
  border-radius: var(--radius-md);
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.dga-media-card__link:hover {
  background-color: var(--colors-primary-sa-flag-700);
  color: #fff;
}
.dga-media-card__arrow {
  width: 20px;
  height: 20px;
  flex: none;
}
:is(html[dir="rtl"], html[lang="ar"], body.rtl) .dga-media-card__arrow {
  transform: scaleX(-1);
}

/* ---- 3. Outlined card (features-one-col, files-manager) ---- */
/* Client feedback (2026-09-09, E-Services page): these cards rendered with
   no visible outline at all, just the base .dga-card's soft box-shadow --
   this modifier only ever set border-color, never border-width/border-style,
   and a border needs all three to actually render (browsers default
   border-style to none). Real bug, not a design gap -- this class was
   always meant to add a visible outline on top of .dga-card (hence the
   name), just silently never worked. */
.dga-card--stroke {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--border-neutral-primary) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-xl) !important;
}
.dga-card--stroke:hover {
  border-color: var(--colors-primary-sa-flag-600-primary) !important;
}
.dga-card--stroke .dga-card__title {
  color: var(--text-default);
}
.dga-card--stroke .dga-card__description {
  color: var(--text-primary-paragraph);
}
/* files-manager.blade.php / files-manager-image.blade.php's file cards use
   `group-hover/file-item:text-primary-500` (Tailwind's named-group hover
   syntax) intending the title/arrow to recolor on hover -- confirmed via
   grep that this project's static Tailwind build never actually compiled
   any named-group utility (0 matches for "group-hover/" or "group/file-item"
   in the compiled bundle), so this hover effect has never worked. Real CSS
   on the plain `.file-item` class (already present alongside the broken
   Tailwind classes) fixes it without touching the Tailwind classes. */
.file-item:hover {
  border-color: var(--colors-primary-sa-flag-600-primary) !important;
}
/* Client feedback: the image-hover overlay (files-manager-image.blade.php)
   used to fade in a dark tint across the whole photo -- looked odd,
   muddying flag photos into a dark wash -- plus a plain white download
   arrow floating unstyled mid-image. Replaced with a small solid-green
   circular badge in the photo's corner instead (.dga-file-card__download-badge
   below); the photo itself is never dimmed. */
.dga-file-card__media {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.dga-file-card__download-badge {
  position: absolute;
  bottom: var(--spacing-md);
  inset-inline-end: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--button-background-primary-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s ease, transform .25s ease;
}
.dga-file-card__download-badge svg {
  width: 20px;
  height: 20px;
}
.file-item:hover .dga-file-card__download-badge {
  opacity: 1;
  transform: scale(1);
}
.file-item:hover .dga-card__title {
  color: var(--colors-primary-sa-flag-600-primary) !important;
}
.file-item:hover svg {
  color: var(--colors-primary-sa-flag-600-primary) !important;
}
/* `.file-item` also carries Tailwind's `flex` class directly in its HTML
   (an author-stylesheet rule), which overrides the browser's default
   `[hidden] { display: none }` behavior regardless of specificity --
   author CSS always beats the UA stylesheet. Without this, toggling the
   `hidden` property via JS (dga-file-manager-search.js) did nothing
   visually -- same class of bug already fixed for .showLawDocItem on the
   Laws page. */
.file-item[hidden] {
  display: none !important;
}

/* files-manager-image.blade.php's search box (only rendered above the grid
   once there are enough cards to be worth searching). Client feedback: the
   bare search box had no context/alignment against the wide layout -- added
   an item-count label and put both in a proper flex row (label left,
   search right on desktop; stacked on mobile), matching the same toolbar
   pattern used on the Laws page. */
.dga-file-manager-search {
  background-color: var(--colors-primary-sa-flag-100);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}
.dga-file-manager-search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.dga-file-manager-search__label {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  color: var(--text-secondary-paragraph);
  margin: 0;
}
.dga-file-manager-search__count {
  font-weight: var(--font-weight-bold);
  color: var(--text-default);
}
.dga-file-manager-search .dga-search-box {
  width: 100%;
  max-width: 320px;
}
.dga-file-manager-search__no-results {
  margin-top: var(--spacing-md);
  font-family: var(--font-family-arabic);
  color: var(--text-secondary-paragraph);
}

/* files-manager.blade.php / files-manager-image.blade.php's grid container
   uses `md:grid-cols-2` / `lg:grid-cols-2` / `lg:grid-cols-3` (the last two
   chosen dynamically by item count) -- confirmed via grep that none of
   these three are in this project's static Tailwind bundle, so the file
   grid silently renders as a single column at every screen width,
   including desktop, on every page that uses it. Targeting the literal
   Tailwind class-name strings already present in the markup (still valid
   selectors even though Tailwind never compiled matching rules for them)
   restores the intended responsive grid without touching any blade file. */
@media (min-width: 768px) {
  .files-manager.md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .files-manager.lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .files-manager.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Client feedback (Circulars page specifically, 2 sparse items in a
   lg:grid-cols-3 grid): forcing an exact column count stretched each card
   to fill a third of the whole container width regardless of how little
   content it held -- read as flat, barely "boxed" strips. But other pages
   using this same grid (e.g. E-Services, 4 items) explicitly want that
   exact 2/3-column layout and look wrong with anything looser (confirmed
   against staging: E-Services needs a true 2-column grid, not 3 narrower
   ones). So the looser auto-fill sizing (same recipe as the search results
   grid, dga-search-page.css) is scoped to only .dga-page-content's own
   grids -- the plain default-page template (partials/content-page.blade.php)
   Circulars uses, not the ACF flexible-content templates every other page
   using this component is built from. */
.dga-page-content .files-manager.md\:grid-cols-2,
.dga-page-content .files-manager.lg\:grid-cols-2,
.dga-page-content .files-manager.lg\:grid-cols-3 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Plain (non-image) file-link cards -- files-manager.blade.php's own
   variant, e.g. Circulars/Guide, Executive Summary docs -- had a bare 24px
   download icon with no size cap, reading oversized next to the now-
   narrower card title. */
.dga-card--stroke.file-item svg {
  width: 20px;
  height: 20px;
}