/* ==========================================================================
   Outlaw Bullets: home page (css/pages/home.css)
   The live sections, in the live order: Hero, Why Choose Us?, Our Products, Our Gallery, Frequently Asked
   Questions, Contact Us (the contact band partial + the live form). Shared pieces come from site.css
   (.plate, .orn, .products, .gallery, .faq, .contact-band, .form); everything here is home-only (home-*).
   Breakpoints follow site.css: 22.5em, 37.5em, 48em, 56.25em, 62.5em, 75em.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero: a broadside. The title set big in two lines between double rules, the star ornament, the
   tagline and the live buttons; the match photo framed as a plate beside it.
   Phones: the photo leads (a wide crop), the broadside follows. Tablets (37.5-56.24em): the broadside leads,
   so the title and buttons are on the first screen, and the photo follows.
   -------------------------------------------------------------------------- */
.home-hero { padding: var(--sp-5) 0 var(--section-y); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: center; }

.home-hero__text {
  position: relative;
  padding: var(--sp-6) 0;
  text-align: center;
}
.home-hero__text::before,
.home-hero__text::after {          /* the broadside's double rules: heavy outside, fine inside */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: var(--rule-double);
}
.home-hero__text::before { top: 0; }
.home-hero__text::after { bottom: 0; transform: scaleY(-1); }

.home-hero__title {
  margin: 0;
  font: 400 min(clamp(3.25rem, 1.4rem + 7.6vw, 8.75rem), 19vw)/.92 var(--f-display);
  letter-spacing: -.01em;
  text-shadow: .03em .025em 0 var(--red-hot);     /* the red second ink pass (display size only) */
}
.home-hero__word { display: block; }

.home-hero__orn { margin: var(--sp-5) auto var(--sp-4); }

.home-hero__tagline {
  max-width: 21em;
  margin: 0 auto;
  font: italic 600 clamp(1.375rem, 1.05rem + 1.1vw, 2rem)/1.35 var(--f-text);
  text-wrap: balance;
}

.home-hero__actions { justify-content: center; margin-top: var(--sp-6); }

.home-hero__photo {
  order: -1;                        /* phones: the photo leads */
  width: 100%;
  justify-self: center;
}
.home-hero__photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 34%;         /* the shooter's shoulders, the revolver and the muzzle flame */
}
@media (max-width: 37.49em) {       /* phones: a tighter frame and a wider crop, so the buttons show sooner */
  .home-hero { padding-top: var(--sp-4); }
  .home-hero__grid { gap: var(--sp-5); }
  .home-hero__photo { padding: 10px; }
  .home-hero__photo img { aspect-ratio: 16 / 9; object-position: 50% 30%; }
  .home-hero__text { padding: var(--sp-5) 0; }
  .home-hero__orn { margin: var(--sp-4) auto var(--sp-3); }
  .home-hero__actions { margin-top: var(--sp-5); }
}

@media (min-width: 37.5em) {
  .home-hero__photo { order: 0; width: min(100%, 40rem); }
  .home-hero__photo img { aspect-ratio: 16 / 9; object-position: 50% 30%; }
}
@media (min-width: 56.25em) {
  .home-hero { padding-top: var(--sp-7); }
  .home-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .home-hero__text { padding: var(--sp-7) 0; }
  .home-hero__photo {
    order: 0;
    width: min(100%, 30rem);
    justify-self: end;
    transform: rotate(1.2deg);      /* a print pinned up, leaning a touch */
    box-shadow: var(--shadow-photo);
  }
  .home-hero__photo img { aspect-ratio: 3 / 4; object-position: 48% 50%; }   /* the cartridge going in */
}

/* --------------------------------------------------------------------------
   1b. Photo row: the three photos from the live home page (badge, shotgun, rifle) as small plates under the
   hero. One column on phones, three from 48em. Each crop keeps its subject in frame.
   -------------------------------------------------------------------------- */
.home-hero { padding-bottom: var(--sp-7); }
.home-strip { padding-bottom: var(--section-y); }
.home-strip__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.home-strip__item { padding: 10px; box-shadow: var(--shadow-photo); }
.home-strip__item img { aspect-ratio: 4 / 3; object-fit: cover; }
.home-strip__item--home-badge img { object-position: 40% 50%; }
.home-strip__item--home-shotgun img { object-position: 55% 50%; }
.home-strip__item--home-rifle img { object-position: 70% 50%; }
@media (max-width: 37.49em) {       /* phones: three small square prints across, so the page moves on quickly */
  .home-strip__item { padding: 5px; outline-offset: -5px; border-width: 2px; }
  .home-strip__item img { aspect-ratio: 1; }
}
@media (min-width: 48em) {
  .home-strip__list { gap: var(--sp-6); }
  .home-strip__item:nth-child(1) { transform: rotate(-1deg); }
  .home-strip__item:nth-child(3) { transform: rotate(1deg); }
}

/* --------------------------------------------------------------------------
   2. Why Choose Us?: the live paragraph only, set large with a red drop cap and the alloy words in bold.
   From 56.25em the heading sits left of the paragraph.
   -------------------------------------------------------------------------- */
.home-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.home-why__title { margin: 0; text-shadow: .03em .025em 0 var(--red-hot); }
.home-why__lede {
  max-width: 34em;
  margin: 0;
  font-size: clamp(1.3125rem, 1.05rem + .9vw, 1.75rem);
  line-height: 1.5;
}
.home-why__lede::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font: 400 3.4em/.82 var(--f-display);
  color: var(--red);
}
.home-why__lede strong { font-weight: 700; color: var(--red); }
@media (min-width: 56.25em) {
  .home-why__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); }
  .home-why__title { padding-top: .1em; border-top: 6px double var(--ink); }
}

/* --------------------------------------------------------------------------
   3. Our Products: the three featured cards (generated). Phones: site.css rows. Tablets: one wide row per
   card, photo left, the blurb and Order Now beside it. From 56.25em: three columns, Order Now aligned.
   -------------------------------------------------------------------------- */
.home-products__head { margin-bottom: var(--sp-6); }

@media (min-width: 37.5em) and (max-width: 56.24em) {
  .home-featured { grid-template-columns: minmax(0, 1fr); }
  .home-featured .product__link {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-areas: "photo title" "photo spec" "photo meta" "photo price" "photo note" "photo cta";
    grid-template-rows: auto auto auto auto 1fr auto;
    align-items: start;
    column-gap: var(--sp-5);
    padding: var(--sp-4);
  }
  .home-featured .product__photo { grid-area: photo; margin: 0; }
  .home-featured .product__title { grid-area: title; }
  .home-featured .product__spec { grid-area: spec; }
  .home-featured .product__meta { grid-area: meta; }
  .home-featured .price { grid-area: price; margin-top: 0; }
  .home-featured .product__note { grid-area: note; }
  .home-featured .product__cta { grid-area: cta; justify-self: start; padding-inline: var(--sp-6); }
}
@media (min-width: 56.25em) {
  .home-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .home-featured .product__link { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .home-featured .product__title { font-size: 2.375rem; }
  .home-featured .price { margin-top: 0; }
  .home-featured .product__note { margin-bottom: var(--sp-4); }
  .home-featured .product__cta { margin-top: auto; }
}

.home-products__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-7);
}
@media (max-width: 37.49em) {
  .home-products__more > .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   4. Our Gallery: six photos. Two across on phones, three from 48em, one row of six from 75em.
   -------------------------------------------------------------------------- */
.home-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .home-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75em) { .home-gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); } }
.home-gallery__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (max-width: 37.49em) {
  .home-gallery__foot > .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Frequently Asked Questions: the heading beside the accordion from 62.5em (it stays in view while the
   answers open), stacked above it below that.
   -------------------------------------------------------------------------- */
.home-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.home-faq__title { margin: 0; overflow-wrap: break-word; }
.home-faq__list { background: var(--paper-hi); padding: 0 var(--sp-4); border-bottom: 3px solid var(--ink); }
.home-faq__list .faq__item:last-child { border-bottom: 0; }
@media (min-width: 37.5em) { .home-faq__list { padding: 0 var(--sp-5); } }
@media (min-width: 62.5em) {
  .home-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
  .home-faq__title {
    position: sticky;
    top: calc(var(--header-h, 110px) + var(--sp-4));
    font-size: min(var(--fs-h2), 3.25rem);
  }
}

/* --------------------------------------------------------------------------
   6. Contact Us: the contact band (partial), then the live form on a plate that rides up over the band's
   lower edge, so the two read as one section.
   -------------------------------------------------------------------------- */
.home-form { position: relative; z-index: 1; padding-bottom: var(--section-y); }
.home-form__plate {
  max-width: 54rem;
  margin: calc(-1 * clamp(24px, 4vw, 56px)) auto 0;
  padding: clamp(24px, 4.5vw, 52px);
  box-shadow: var(--shadow-photo);
}
.home-form__form { max-width: none; grid-template-columns: minmax(0, 1fr); }
.home-form__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 37.5em) { .home-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-form__send { justify-self: start; min-width: min(12rem, 100%); }
@media (max-width: 37.49em) { .home-form__send { justify-self: stretch; } }

/* print: no tilt, no overlap */
@media print {
  .home-hero__photo { transform: none; box-shadow: none; }
  .home-form__plate { margin-top: 0; box-shadow: none; }
  .home-form { display: none; }
}