/*
 * Hero section layout (the masthead strip, section padding, and grid
 * wrapper). The hero FEATURE CARD and SIDE CARD themselves
 * (.hero-feature, .side-card) are a reusable card component, not
 * layout, and live in components/cards.css instead — this file only
 * owns the section-level grid that arranges them. Extracted verbatim
 * from the original style.css.
 *
 * @package TFGadgets
 */

/* =====================================================
   HERO / MASTHEAD STRIP
===================================================== */
.masthead-strip{
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.masthead-strip .container{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase;
}

.hero{
  padding:56px 0 64px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:var(--gap);
}

.hero-side{ display:flex; flex-direction:column; gap:var(--gap); }