/* proto-pages-home.css: the landing home (templates/search/home.html) in Flowmaster's look: the red stripes, a black
   hero with the H1 and the finder card (the kit's band, styled by the kit through cl-site.css's --parts-* tokens), the
   two part tiles, the line tiles, the vehicle links; no count on a tile. Square, full contrast, cl-site.css's --site-* tokens. */
@layer base, kit, site;

@layer site {

.fm-home { background: var(--site-bg); }
.fm-home__stripes, .fm-home__stripes img { display: block; width: 100%; height: auto; }

/* the hero: the H1 and its line on the left, the finder card on the right */
.fm-hero { background: var(--site-dark); color: var(--site-accent-fg); }
.fm-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: 32px; align-items: center;
  max-width: var(--site-max); margin: 0 auto; padding: 40px var(--site-gutter) 44px; }
.fm-hero__h1 { font: italic 700 64px/1 var(--site-font-heading); text-transform: uppercase; letter-spacing: 0.5px; color: var(--site-accent-fg); }
.fm-hero__lead { max-width: 520px; margin-top: 16px; font: 400 20px/1.35 var(--site-font-body); color: var(--site-accent-fg); }
.fm-hero__finder { min-width: 0; padding: 4px; background: var(--site-accent); }

.fm-home__wrap { padding-top: 8px; }
.fm-home__sec { margin-top: 40px; }

/* the two part tiles */
.fm-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fm-part { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; align-items: center;
  min-height: 200px; padding: 16px 24px 16px 16px; background: var(--site-card); border: 1px solid var(--site-line); color: var(--site-fg); }
.fm-part__img { width: 240px; height: 180px; object-fit: contain; background: var(--site-photo); }
.fm-part__label { font: italic 700 36px/1 var(--site-font-heading); text-transform: uppercase; }
.fm-part:hover .fm-part__label { color: var(--site-accent-ink); }

/* the line tiles */
.fm-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fm-line { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; background: var(--site-card); border: 1px solid var(--site-line); color: var(--site-fg); }
.fm-line__img { width: 100%; height: 160px; object-fit: contain; background: var(--site-photo); }
.fm-line__label { margin-top: 6px; font: 700 22px/1.1 var(--site-font-heading); text-transform: uppercase; }
.fm-line__who { font: 400 16px/1.35 var(--site-font-text); }
.fm-line__n { margin-top: auto; padding-top: 6px; font: 700 17px/1.2 var(--site-font-body); }
.fm-line:hover .fm-line__label { color: var(--site-accent-ink); }

.fm-home__cars { margin-top: 12px; padding-top: 0; border-top: 0; }

@media (max-width: 979.98px) {
  .fm-hero__in { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px 24px; }
  .fm-hero__h1 { font-size: 44px; }
  .fm-hero__lead { font-size: 15px; }
  .fm-parts { grid-template-columns: 1fr; gap: 12px; }
  /* the finder is the phone's one row under the H1 (proto-pages-fm.css .fm-ask): no red frame round it */
  .fm-hero__in { gap: 12px; }
  .fm-hero__finder { padding: 0; }
}
@media (max-width: 600px) {
  .fm-home__sec { margin-top: 28px; }
  .fm-part { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; min-height: 0; padding: 10px; }
  .fm-part__img { width: 120px; height: 96px; }
  .fm-part__label { font-size: 20px; }
  .fm-lines { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fm-line { padding: 10px; }
  .fm-line__img { height: 110px; }
  .fm-line__label { font-size: 16px; }
  .fm-line__who { font-size: 13px; }
  .fm-line__n { font-size: 14px; }
}

/* the finder card on desktop as before kit 0.9.4 gave the band its three tabs (2026-10-30, as bakflip.ca 13ac5b5d):
   the tabs on the heading row and Year, Make, Model and Go on a row of their own across the card. On one row with
   the tabs the fields were 77px. Layout only, the phone keeps the kit's own stack. These name kit classes (doctor
   check 13) until the kit's band stacks itself in a narrow box. */
@media (min-width: 980px) {
  .fm-hero__finder .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .fm-hero__finder .kit-band__panels { flex-basis: 100%; }
}

}