/*
Theme Name: Front Row Vanguard Child
Theme URI: https://trevordecker.com/
Description: A child theme for Front Row Vanguard that modernises the visual design and improves SEO.  It loads elegant typography, refines the hero area and article cards to match premium entertainment news sites, and integrates the existing custom CSS tweaks from the WordPress Customizer.
Author: Trevor Decker
Template: front-row-vanguard-v108
Version: 1.0.1
*/

/*
 * Typography improvements
 *
 * Uses Inter for body copy and Playfair Display for headings to create a
 * sophisticated, magazine‑style feel similar to top entertainment news
 * websites.  Base font sizes and line‑heights are increased for better
 * readability, especially on large screens.
 */
body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5em;
}

a {
  color: #d81f26;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #a50f17;
  text-decoration: underline;
}

/*
 * Header & navigation styling
 *
 * Adds subtle borders, padding and uppercase typography to the header and
 * navigation to lend structure without overwhelming the content.  This
 * approach is inspired by the restrained navigation bars found on sites
 * like The Hollywood Reporter and Deadline.
 */
.site-header {
  padding: 1rem 0;
  border-bottom: 1px solid #eaeaea;
}

.site-navigation ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.875rem;
}

/*
 * Hero section modifications
 *
 * Enlarges the hero headline and overlays it on the image with a soft
 * gradient for readability.  This layout echoes the dramatic hero
 * treatments used on high‑end entertainment sites.  The margin beneath
 * the hero is increased for breathing room.
 */
.home-hero {
  margin-bottom: 2rem;
}

.home-hero-image {
  position: relative;
}

.home-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.home-hero-image .entry-image-caption--hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  line-height: 1.2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1), transparent);
}

/*
 * More headlines and recent news grids
 *
 * Utilises CSS Grid to create responsive, evenly spaced article cards.  A
 * light border, rounded corners and subtle shadows help each card stand
 * apart, while hover transitions add a feeling of interactivity.  These
 * rules apply directly to the inner grid containers used by the theme
 * (``more-headlines-grid`` and ``recent-grid``) to avoid blank columns on
 * desktop layouts.
 */
.more-headlines-grid,
.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.more-headlines-grid article,
.recent-grid article {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.more-headlines-grid article:hover,
.recent-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.more-headlines-grid article img,
.recent-grid article img {
  width: 100%;
  height: auto;
  display: block;
}

.more-headlines-grid article .entry-title,
.recent-grid article .entry-title {
  font-size: 1rem;
  padding: 0.75rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.4;
  color: #111;
  flex-grow: 1;
}

/* Category labels */
.post-categories a,
.category-label {
  display: inline-block;
  background: #d81f26;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  border-radius: 2px;
}

/*
 * Existing Additional CSS from Customizer
 *
 * These rules maintain the hero overlay sizing, gradient and aspect
 * ratio tweaks that were originally added via the Additional CSS panel.
 */
/* Make hero caption an overlay and more readable */
.home-hero-image {
    position: relative;
}
/* Hero caption overlay */
.home-hero-image .entry-image-caption--hero {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.6rem 0.85rem;
    /* Better contrast */
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.4;
    /* Soft gradient instead of big solid black bar */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0.3),
        transparent
    );
}
/* Make sure the image fills the figure nicely */
.home-hero-image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Desktop: fix featured (hero) image sizing so there's no black bar */
@media (min-width: 960px) {
    /* The hero figure on the front page */
    body > div.site-wrapper > main > div > div > section.home-hero > figure {
        position: relative;
        aspect-ratio: 16 / 9;
        /* tweak if you want taller/shorter */
        overflow: hidden;
        background-color: transparent; /* don't show a solid black panel */
    }
    /* The actual hero image inside that figure */
    body > div.site-wrapper > main > div > div > section.home-hero > figure img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* fills the box, crops instead of letterboxing */
    }
}