/*
 * Path:        public_html/assets/css/page_home.css
 * Filename:    page_home.css
 * Project:     revisualized.com
 * Description: Home-only components: hero band and the featured spotlight card.
 *              Shared components live in main.css.
 * Status:      production
 * Revision:    7
 * Updated:     2026-08-22 (Rev 7: the featured spotlight now reads as a card,
 *              matching .article_page_preview directly below it. Revision 6
 *              left it as a bare grid on the page background with a 16/9 image
 *              floating at the top of a 220px column, so the two adjacent
 *              blocks had different anatomy. It now carries the card surface
 *              and radius, the image runs flush to the top, bottom and left
 *              edges and stretches to the block's full height, and the padding
 *              sits on .featured__content. Breakpoint moved from 600px to
 *              700px to match the article blocks, since both split at the same
 *              proportions and were collapsing at different widths.
 *
 *              Also removed: the .hero breakpoint rule and the swap-in-a-
 *              photograph comment above it. index.php Rev 8 replaced .hero
 *              with the parallax band and Rev 6 removed the .hero rule itself,
 *              leaving a media query targeting an element that no longer
 *              exists and a comment describing a background-image block that
 *              was already gone. Hero styling lives in hero.css.
 *
 *              Rev 6: removed the orphaned .hero rule. index.php Rev 8
 *              deleted that element in favour of the hero band.)
 * Included by: index.php via $page_stylesheet (Contract 1)
 *
 * Revision 2 changes, both driven by launching without photography:
 *
 *   1. HERO IS NO LONGER A PLACEHOLDER. Revision 1 was a 480px dashed box
 *      containing the visible text "Hero image". It was the first element
 *      above the fold and it announced the site as unfinished. It is now a
 *      shorter decorative gradient band built entirely from existing verified
 *      tokens, so it renders correctly in all three themes with no new
 *      contrast run required (the band carries no text). The markup in
 *      index.php Rev 4 is aria-hidden, so assistive technology skips it.
 *
 *   2. EMPTY THUMBNAIL SLOTS ARE HIDDEN. The featured block renders three
 *      thumbnail squares whether or not thumbnail_srcs holds anything. With
 *      no imagery those are three empty dashed boxes conveying nothing. The
 *      :empty selector hides them with no PHP change; they reappear on their
 *      own the moment a source is supplied. The matching rule for project
 *      cards lives in main.css, since that component is shared.
 */

/* ============================================================
   FEATURED SPOTLIGHT
============================================================ */

.featured {
  width: 100%;
  padding: 32px 20px;
  border-top: none;
  box-sizing: border-box;
}

/* Same anatomy as .article_page_preview in main.css: the block is the card,
   the image track stretches to its full height and runs flush to the edges,
   and the text padding lives on the content column rather than the card. An
   earlier pass used align-items: start with a fixed image ratio, which left
   the image short and floating against a tall band of empty card beside it. */
.featured__block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-card);
}

/* The 220px column exists to hold .featured__media. index.php omits that
   element when the item has no image, which would leave the content squeezed
   into 220px beside an empty 1fr column. index.php stamps this modifier in
   the same condition, so the two stay in step. */
.featured__block--no_media { grid-template-columns: 1fr; }

.featured__media {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* flex: 1 rather than a fixed ratio, so the image fills whatever height the
   text column establishes. */
.featured__main_image {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.featured__main_image img,
.featured__main_image svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured__thumbnails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.featured__thumb {
  aspect-ratio: 1;
  overflow: hidden;
}

/* Revision 2: an unfilled thumbnail slot is an empty div. Hide it rather than
   render an empty dashed square. The grid collapses to zero height when all
   three are hidden, and every slot returns automatically once thumbnail_srcs
   is populated in the content file. */
.featured__thumb:empty { display: none; }

.featured__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.featured__content { padding: 20px; }

.featured__tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: 12px;
}

.featured__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-page-text);
  margin-bottom: 12px;
}

.featured__description {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* Bottom row: badges left, Read more right */
.featured__bottom_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.featured__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.featured__badge {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--color-border-badge);
  border-radius: 4px;
  color: var(--color-text-badge);
}

.featured__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  background: var(--color-surface-card);
  font-size: 0.688rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.featured__link:hover {
  background: var(--color-accent);
  color: var(--color-page-background);
  border-color: var(--color-accent);
}

/* Matches the article blocks in main.css. Below this the side-by-side split
   leaves no usable measure, so the image returns above the text. The image
   needs an explicit ratio here because flex: 1 in a single column has no
   sibling height to fill. */
@media (max-width: 700px) {
  .featured__block { grid-template-columns: 1fr; }
  .featured__main_image { flex: none; aspect-ratio: 2 / 1; }
}