/* =============================================================
   Ben's Gunsmithing — Home page styles
   Loaded after site.css (which holds tokens + shared chrome).
   Sections, top to bottom: hero (topo backdrop + framed logo),
   four-service catalog index, "inside the shop" photo run,
   straight-facts trust strip. CTA banner + footer are shared.
   ============================================================= */

/* -------------------------------------------------------------
   1. Hero — Mountain Brown Deep field, USGS topo backdrop,
      framed cream logo card, lede line, two CTAs. Centered by
      design (this is the one centered composition on the site;
      body sections are left-aligned).
   ------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--brown-dark); /* ultimate fallback + topo ground */
  background-image: url('/images/hero-topo-1280.jpg');
  background-image: image-set(
    url('/images/hero-topo-1280.webp') type('image/webp'),
    url('/images/hero-topo-1280.jpg')  type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Flat darkening overlay — guarantees contrast for the cream lede and
   the buttons without washing out the contour texture. Not a glow. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 44, 15, 0.25), rgba(74, 44, 15, 0.55));
}

.hero__inner {
  position: relative; /* lift above the overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-lg);
  padding-block: var(--s-3xl);
}

/* Framed logo card. The engraved logo PNG carries its own cream-paper
   margin, so the card is a tight 1px keyline around the print — no mat,
   no shadow. Color contrast against the brown field does the lifting. */
.hero__card {
  width: 100%;
  max-width: 500px;
  margin: 0;
  border: 1px solid var(--brown-light);
  border-radius: var(--r-sm);
  background-color: var(--cream);
  line-height: 0; /* kill descender gap under the <img> */
}
.hero__card img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

.hero__lede {
  max-width: 48ch;
  color: var(--cream);
  margin: 0;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-md);
  margin-top: var(--s-xs);
}

/* -------------------------------------------------------------
   2. Service catalog index — four services as catalog rows, not
      identical icon cards. Each row is a full-block link under a
      2px brown rule (Brownells-catalog cue). Two columns on
      desktop, one on phones.
   ------------------------------------------------------------- */
.svc-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--s-2xl);
}

/* Each row is a 2-column grid: a fixed icon gutter, then a text column
   holding title / description / view-link — so all running text shares
   one left edge and only the icon sits beside the title's row. */
.svc {
  display: grid;
  grid-template-columns: 34px 1fr; /* icon width + text column */
  column-gap: var(--s-xs);
  padding: var(--s-lg) 0;
  border-top: 2px solid var(--brown);
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color var(--transition);
}
.svc:hover,
.svc:focus-visible { border-top-color: var(--green); }

/* Service icon (inline SVG, replaces the old 01-04 numerals).
   currentColor lets the SVG pick up the olive action color. */
.svc__num {
  display: block;
  grid-column: 1;
  grid-row: 1;
  align-self: center; /* vertically centers icon against the title line */
  color: var(--green);
}
.svc__num svg { display: block; width: 34px; height: 34px; }
/* The star (Customize) and scale (Appraise) glyphs sit centered/low inside
   their own viewBoxes while the two pistol glyphs sit high — nudge the first
   two up so all four read at the same height against their titles. */
.svc__num--nudge-custom { transform: translateY(-5px); }
.svc__num--nudge-appraisal { transform: translateY(-5.5px); }
.svc__title {
  grid-column: 2;
  grid-row: 1;
  color: var(--brown-dark);
}
.svc__desc {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--s-xs);
  color: var(--charcoal-light);
  font-size: var(--fs-small);
}
.svc__more {
  grid-column: 2;
  grid-row: 3;
  margin-top: var(--s-sm);
  color: var(--green);
}
/* Hover/focus affordance: the arrow nudges right (title color stays put). */
.svc__more__arrow { display: inline-block; transition: transform var(--transition); }
.svc:hover .svc__more__arrow,
.svc:focus-visible .svc__more__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------
   3. Inside the shop — editorial photo run at varied widths:
      a tall portrait of Ben at the mill spanning the left column,
      two stacked landscapes (shop interior, lathe) on the right.
      Natural aspect ratios, no object-fit cropping (per DESIGN).
   ------------------------------------------------------------- */
.shop-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "ben   wide"
    "ben   lathe";
  gap: var(--s-lg);
  align-items: start;
}
.shop-figure { margin: 0; }
.shop-figure--ben   { grid-area: ben;   }
.shop-figure--wide  { grid-area: wide;  }
.shop-figure--lathe { grid-area: lathe; }

.shop-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.shop-figure figcaption {
  margin-top: var(--s-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gray);
}

/* -------------------------------------------------------------
   4. Straight-facts strip — where, license, hours. Plain facts
      under catalog rules. No badges, no invented tenure.
   ------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
}
.fact { border-top: 2px solid var(--brown); padding-top: var(--s-md); }
.fact__label {
  display: block;
  margin-bottom: var(--s-xs);
  color: var(--green);
}
.fact__value { color: var(--charcoal); font-size: var(--fs-small); }

/* -------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .svc-index { grid-template-columns: 1fr; column-gap: 0; }

  .shop-collage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ben"
      "wide"
      "lathe";
  }

  .facts { grid-template-columns: 1fr; gap: var(--s-lg); }
}