/*
 * Support / Resource Library page (structure + empty-state only — no real
 * resource records exist yet, see docs/PROJECT-CONTEXT.md §35 Phase C).
 * Breadcrumbs (.breadcrumbs), Hero (.page-hero, .category-hero-art) and the
 * closing CTA (.contact, .product-contact, .actions, .button) are reused
 * as-is from product-pages.css/components.css — nothing here duplicates
 * those selectors. This file adds only the resource card grid and its
 * empty state, for which no existing component fit: the homepage's
 * .resource-grid is a fixed 3-item marketing teaser (icon + arrow, no
 * data), not a data-driven grid of an unknown number of catalogue
 * resources, so it is intentionally not reused here under a different
 * meaning — this grid uses its own .support-grid/.resource-card names.
 *
 * .empty-state below is a page-scoped copy of the same rule already used
 * for empty catalogue states in css/products-overview.css (not loaded on
 * this page) — same class name and values, kept in sync deliberately so
 * an empty state reads identically everywhere on the site, without pulling
 * in that stylesheet's unrelated filter/grid rules.
 *
 * Shared with /catalogues/ (catalogues/index.html also loads this file):
 * .support-grid/.resource-card is the one resource-card-grid vocabulary for
 * every resources[]-driven page, so the two pages don't maintain duplicate
 * card CSS. Both pages' controllers now render an identical action pair
 * (.resource-card-actions > two .button elements, "View" + "Download" — see
 * js/catalogues-page.js and js/support-page.js), so that rule lives here
 * once rather than in each page's own stylesheet; css/catalogues-page.css
 * currently adds nothing beyond this (kept loaded for future page-specific
 * needs only).
 *
 * .resource-card-actions carries the bottom-anchoring: it's the flex item
 * with margin-top:auto, not .resource-card-version, because version is
 * optional (omitted when a resource has no version) while the actions row
 * is the one element guaranteed present whenever a resource has a file —
 * anchoring to it keeps the actions row pinned to the card's bottom edge
 * regardless of whether version rendered. .support-grid's default grid
 * row-stretch already equalises card heights within a row, so this also
 * keeps every card's actions aligned to the same Y position across a row
 * of varying description lengths, not just within one card.
 */

.support-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--space-3)
}

.resource-card{
display:flex;
flex-direction:column;
padding:26px;
background:#fff;
border:1px solid var(--color-line);
border-radius:var(--radius-md)
}

/* Cover thumbnail — fixed aspect-ratio box (matches the actual 640x905 processed asset
   ratio) so every card in a row keeps the same width/shape regardless of an individual
   image's own proportions; object-fit:cover fills the frame like a document cover, unlike
   the object-fit:contain treatment used for product photos (css/products-overview.css
   .catalogue-card-media), which must not crop the product out of frame. picture needs an
   explicit block/100% rule because <picture> is inline by default and won't otherwise
   stretch to fill this flex box — same fix already applied to .hero-visual picture in
   css/layout.css. */
.resource-card-media{
display:flex;
align-items:center;
justify-content:center;
width:100%;
aspect-ratio:640/905;
overflow:hidden;
border-radius:var(--radius-sm);
background:var(--color-mist)
}
.resource-card-media picture{
display:block;
width:100%;
height:100%
}
.resource-card-media img{
width:100%;
height:100%;
object-fit:cover
}
/* Placeholder state (no thumbnail) — the institutional Sterifast symbol mark, never a
   stand-in cover image, sized down and object-fit:contain so it reads as a deliberate
   placeholder rather than a stretched real cover. Mirrors the identical precedent already
   established for product cards without a processed image (css/products-overview.css
   .catalogue-card-media--placeholder img). */
.resource-card-media--placeholder img{
width:44%;
height:44%;
object-fit:contain;
opacity:.55
}

.resource-card-type{
color:var(--color-teal-dark);
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.6px;
text-transform:uppercase
}
.resource-card h3{
margin-top:14px;
font-size:18px
}
.resource-card p{
margin-top:8px;
color:var(--color-muted);
font-size:14px
}
.resource-card-version{
color:var(--color-muted);
font:var(--text-xs) var(--font-mono)
}
.resource-card-actions{
display:flex;
gap:var(--space-3);
margin-top:auto;
padding-top:16px
}

.empty-state{
padding:60px var(--page-padding);
background:var(--color-mist);
border-radius:var(--radius-sm);
color:var(--color-muted);
text-align:center
}

@media (max-width:780px){
.support-grid{
grid-template-columns:1fr
}
}