/* ==========================================================================
   TMB Front Page
   File: assets/css/tmb-front-page.css            Load order: 4 of 4 (front page)
   --------------------------------------------------------------------------
   Markup: front-page.php. Product cards, tiles, logo tiles, rails and
   section heads come from assets/css/tmb-core.css — this file only lays out
   the hero and sets rail sizes.

   App mode: the hero continues the dark header into a search-first panel.
   Desktop:  light hero with the dealer card beside the copy.
   ========================================================================== */

.tmb-front{ background:var(--tmb-color-surface); }

/* --------------------------------------------------------------------------
   Hero
-------------------------------------------------------------------------- */
.tmb-front-hero{
  padding:var(--tmb-space-5) 0 var(--tmb-space-6);
  background:var(--tmb-color-primary);
  color:var(--tmb-color-on-primary);
}
.tmb-front-hero__inner{
  display:grid;
  gap:var(--tmb-space-5);
}
.tmb-front-hero__eyebrow{ color:var(--tmb-color-accent); }
.tmb-front-hero__title{
  margin:var(--tmb-space-2) 0 0;
  font-family:var(--tmb-font-heading);
  font-size:clamp(1.75rem, 1.1rem + 3.4vw, 3.6rem);
  line-height:1.05;
  letter-spacing:-.035em;
  color:inherit;
  text-wrap:balance;
}
.tmb-front-hero__text{
  max-width:60ch;
  margin:var(--tmb-space-3) 0 0;
  color:rgba(255,255,255,.76);
  font-size:var(--tmb-fs-sm);
  line-height:var(--tmb-leading-body);
}
.tmb-front-hero__search{ margin:var(--tmb-space-5) 0 0; }
.tmb-front-hero__search .tmb-search-field input[type="search"]:not([type="checkbox"]):not([type="radio"]){ border-color:transparent; box-shadow:0 8px 24px rgba(5,15,23,.22); }
.tmb-front-hero__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--tmb-space-2);
  margin-top:var(--tmb-space-3);
}
.tmb-front-hero__actions .tmb-btn{ min-height:48px; padding:10px 14px; box-shadow:none; }
.tmb-front-hero__primary{
  background:var(--tmb-color-accent);
  border-color:var(--tmb-color-accent);
  color:var(--tmb-color-on-accent);
}
.tmb-front-hero__primary:hover{ color:var(--tmb-color-on-accent); }
.tmb-front-hero__secondary{
  border-color:rgba(255,255,255,.34);
  color:var(--tmb-color-on-primary);
}
.tmb-front-hero__secondary:hover{ color:var(--tmb-color-on-primary); background:rgba(255,255,255,.10); }

/* Dealer access card */
.tmb-front-hero__account{
  display:flex;
  align-items:center;
  gap:var(--tmb-space-3);
  min-height:68px;
  padding:var(--tmb-space-3) var(--tmb-space-4);
  border-radius:var(--tmb-radius-md);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:inherit;
  transition:background var(--tmb-motion-fast) ease, transform var(--tmb-motion-fast) ease;
}
.tmb-front-hero__account:hover{ text-decoration:none; background:rgba(255,255,255,.12); }
.tmb-front-hero__account:active{ transform:scale(.99); }
.tmb-front-hero__account-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--tmb-color-accent);
  color:var(--tmb-color-on-accent);
  flex:0 0 auto;
}
.tmb-front-hero__account-icon svg{ width:20px; height:20px; }
.tmb-front-hero__account-copy{ display:grid; gap:2px; min-width:0; }
.tmb-front-hero__account-kicker{
  font-size:var(--tmb-fs-2xs);
  font-weight:var(--tmb-fw-bold);
  letter-spacing:var(--tmb-tracking-caps);
  text-transform:uppercase;
  opacity:.7;
}
.tmb-front-hero__account-copy strong{ font-size:var(--tmb-fs-md); line-height:var(--tmb-leading-snug); }
.tmb-front-hero__account-arrow{ width:20px; height:20px; margin-left:auto; opacity:.6; flex:0 0 auto; }

@media (min-width:600px){
  .tmb-front-hero__actions{ display:flex; flex-wrap:wrap; }
  .tmb-front-hero__actions .tmb-btn{ padding:10px 22px; }
}

@media (min-width:900px){
  .tmb-front-hero{
    padding:clamp(56px, 7vw, 104px) 0;
    background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tmb-color-accent) 10%, transparent) 0%, transparent 46%),
      var(--tmb-color-primary-soft);
    color:var(--tmb-color-text);
    border-bottom:1px solid var(--tmb-color-border);
  }
  .tmb-front-hero__inner{
    grid-template-columns:minmax(0, 1fr) minmax(280px, 360px);
    align-items:center;
    gap:clamp(40px, 6vw, 96px);
  }
  .tmb-front-hero__eyebrow{ color:var(--tmb-color-primary); }
  .tmb-front-hero__title{ color:var(--tmb-color-primary); max-width:16ch; }
  .tmb-front-hero__text{ color:var(--tmb-color-text-muted); font-size:var(--tmb-fs-lg); }
  .tmb-front-hero__search{ max-width:560px; margin-top:var(--tmb-space-6); }
  .tmb-front-hero__search .tmb-search-field input[type="search"]:not([type="checkbox"]):not([type="radio"]){ border-color:var(--tmb-color-border); box-shadow:var(--tmb-shadow-md); }
  .tmb-front-hero__actions{ margin-top:var(--tmb-space-4); }
  .tmb-front-hero__primary{ background:var(--tmb-color-primary); border-color:var(--tmb-color-primary); color:var(--tmb-color-on-primary); }
  .tmb-front-hero__primary:hover{ color:var(--tmb-color-on-primary); }
  .tmb-front-hero__secondary{ border-color:var(--tmb-color-border-strong); color:var(--tmb-color-text); background:var(--tmb-color-surface); }
  .tmb-front-hero__secondary:hover{ color:var(--tmb-color-text); background:var(--tmb-color-surface); border-color:var(--tmb-color-primary); }

  .tmb-front-hero__account{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--tmb-space-6);
    min-height:200px;
    padding:var(--tmb-space-6);
    border-color:var(--tmb-color-border);
    background:var(--tmb-color-surface);
    box-shadow:var(--tmb-shadow-lg);
    color:var(--tmb-color-text);
  }
  .tmb-front-hero__account:hover{ background:var(--tmb-color-surface); transform:translateY(-3px); }
  .tmb-front-hero__account-icon{ width:48px; height:48px; background:var(--tmb-color-primary); color:var(--tmb-color-on-primary); }
  .tmb-front-hero__account-copy strong{ font-size:var(--tmb-fs-xl); color:var(--tmb-color-primary); }
  .tmb-front-hero__account-arrow{ position:absolute; display:none; }
}


/* --------------------------------------------------------------------------
   Sections
-------------------------------------------------------------------------- */
.tmb-front-section{ padding:var(--tmb-space-7) 0; }
@media (min-width:900px){
  .tmb-front-section{ padding:var(--tmb-section-space) 0; }
}

.tmb-front-products{ --tmb-rail-item:44%; --tmb-rail-cols:4; }
.tmb-front-categories{ --tmb-rail-item:52%; --tmb-rail-cols:5; }
.tmb-front-brands{ --tmb-rail-item:38%; --tmb-rail-cols:5; }
@media (min-width:600px){
  .tmb-front-products{ --tmb-rail-item:30%; }
  .tmb-front-categories{ --tmb-rail-item:34%; }
  .tmb-front-brands{ --tmb-rail-item:24%; }
}
@media (min-width:900px){
  .tmb-front-brands{ gap:var(--tmb-space-3); }
}