/* =============================================================
   Ben's Gunsmithing — TEMPORARY one-page landing (July 2026)
   Loaded only by the root index.php landing page, on top of
   site.css (brand tokens, buttons, header, skip link).
   Delete this file when the full site returns to /.
   ============================================================= */

/* -------------------------------------------------------------
   Logo hero — same topo backdrop + framed engraved logo treatment
   as the real homepage hero, so the brand reads identically.
   ------------------------------------------------------------- */
.landing-hero {
  position: relative;
  background-color: var(--brown-dark);
  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;
}
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 44, 15, 0.25), rgba(74, 44, 15, 0.55));
}
.landing-hero .container {
  position: relative; /* lift above the overlay */
  display: flex;
  justify-content: center;
  padding-block: var(--s-2xl);
}
.landing-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> */
}
.landing-hero__card img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------
   Welcome section — Ben's photo beside his welcome text on
   desktop, stacked photo-first on phones.
   ------------------------------------------------------------- */
.landing-welcome { padding-block: var(--s-2xl) var(--s-section); }

.landing-welcome__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--s-2xl);
  align-items: start;
}

.landing-photo { margin: 0; }
.landing-photo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--cream-dark);
  border-radius: var(--r-sm);
}
.landing-photo figcaption {
  margin-top: var(--s-xs);
  font-size: var(--fs-small);
  color: var(--charcoal-light);
}

.landing-text { max-width: var(--measure); }
.landing-text > * + * { margin-top: var(--s-lg); }

.landing-text__phone {
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

/* Call / Text buttons */
.landing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
}

/* Gallery link — the standout line in Ben's copy */
.landing-gallery-link a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green);
  border-left: 4px solid var(--green);
  background-color: var(--white);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-sm);
}
.landing-gallery-link a:hover { color: var(--green-dark); }

/* -------------------------------------------------------------
   Footer — one line, brown field
   ------------------------------------------------------------- */
.landing-footer {
  background-color: var(--brown-dark);
  color: var(--tan-light);
  padding-block: var(--s-lg);
  margin-top: auto;
}
.landing-footer p { font-size: var(--fs-small); }

/* -------------------------------------------------------------
   Responsive — stack below 900px: narrower than that, the text
   column beside a 380px photo drops under ~300px and reads badly.
   ------------------------------------------------------------- */
@media (max-width: 899px) {
  .landing-welcome__inner {
    grid-template-columns: 1fr;
    gap: var(--s-xl);
  }
  .landing-photo { max-width: 440px; }
  .landing-cta .btn { flex: 1 1 auto; }
}