/*
 * Home page. The layout is in the markup (desktop) and in site.css (tablet and phone, classes hm-*).
 * This file only covers what front-page.php adds to the design.
 */

/* crawler finder: a form with a submit button where the design had a link */
/* Brian's approved decorative wheel: independent of the copy and product-tour controls. */
.hm-hero-background{position:relative;isolation:isolate;overflow:hidden}
.hm-hero-background>.tg-hero{position:relative;z-index:1}
.hm-hero-wheel-art{position:absolute;z-index:0;pointer-events:none;user-select:none;top:0;left:50%;transform:translateX(-50%);width:max(1320px,100%);max-width:none!important;height:auto;opacity:var(--tg-wheel-opacity,.5);mask-image:linear-gradient(to right,#000 0%,#000 34%,transparent 54%);-webkit-mask-image:linear-gradient(to right,#000 0%,#000 34%,transparent 54%)}
@media(max-width:1079px){
  .hm-hero-wheel-art{width:1320px;left:-100px;transform:none;mask-image:linear-gradient(to bottom,#000 0%,#000 48%,transparent 95%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,transparent 95%)}
}
@media(max-width:699px){
  .hm-hero-wheel-art{width:1080px;left:-120px;top:-16px;opacity:calc(var(--tg-wheel-opacity,.5)*.8);mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 84%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 84%)}
}

.hm-finder-go:focus-visible,.hm-news-btn:focus-visible{outline:3px solid #0F5C9A;outline-offset:2px}

/* product row: the cards hold screen-reader text that is positioned absolutely (WooCommerce's add-to-cart
   note). Anchor it to the row, so on phones, where the row swipes, it cannot widen the page. */
.hm-prods{position:relative}

/* phones: make and part type share a row, "Show parts" runs the full width under them */
@media (max-width:699px){
  .hm-finder{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hm-finder-go{grid-column:1/-1}
  .hm-news-form{flex:1 1 100%!important}
  .hm-news-btn{display:flex!important}
}

/* ---------- desktop density, 7 October 2026 ----------
   No empty bands beside the media, headings beside their grids, one rhythm between sections. */
@media (min-width:1080px){
  .hm-sec{padding-top:52px!important;padding-bottom:52px!important}
  .hm-head{margin-bottom:22px!important}
  .tg-gutter>.hm-h2{margin-bottom:22px!important}
  .hm-how-body{padding-top:48px!important;padding-bottom:48px!important}
  .hm-spot-body{padding-top:48px!important;padding-bottom:48px!important}
  /* part-type tiles: picture beside the words, three across, instead of six white squares */
  .hm-types{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .hm-type{flex-direction:row!important;align-items:stretch!important}
  .hm-type-img{width:32%!important;flex:0 0 32%;max-width:150px;height:auto!important;aspect-ratio:1/1!important;align-self:center;padding:10px!important}
  .hm-type-txt{flex:1 1 auto;justify-content:center;border-top:0!important;border-left:1px solid #E9EDF1;padding:14px 16px!important}
}
@media (min-width:1280px){
  /* hero: copy and finder on the left as a pair, the video with its one row of lines on the right, both centred */
  .tg-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)!important;gap:0 48px!important;align-items:center!important}
  .tg-hero-copy{align-self:end!important;padding:40px 0 18px!important;gap:16px!important}
  .tg-hero-finder{align-self:start!important;padding:0 0 36px!important}
  .tg-hero-media{align-self:center!important;padding:36px 0 32px!important}
  /* makes, testimonials, tools: the heading sits beside its grid instead of above it */
  .hm-sec .tg-gutter:has(>.hm-makes),.hm-sec .tg-gutter:has(>.hm-quotes),.hm-sec .tg-gutter:has(>.hm-beyond){display:grid;grid-template-columns:minmax(240px,.26fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .hm-sec .tg-gutter:has(>.hm-makes)>.hm-head{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;margin-bottom:0!important}
  .hm-sec .tg-gutter:has(>.hm-makes)>.hm-makes{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .hm-sec .tg-gutter:has(>.hm-quotes)>.hm-eyebrow,.hm-sec .tg-gutter:has(>.hm-beyond)>.hm-eyebrow{grid-column:1}
  .hm-sec .tg-gutter:has(>.hm-quotes)>.hm-h2,.hm-sec .tg-gutter:has(>.hm-beyond)>.hm-h2{grid-column:1;margin-bottom:0!important}
  .hm-sec .tg-gutter:has(>.hm-quotes)>.hm-quotes,.hm-sec .tg-gutter:has(>.hm-beyond)>.hm-beyond{grid-column:2;grid-row:1/span 3}
  .hm-quotes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
  .hm-beyond{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
  .hm-bey-img{width:96px!important;height:96px!important;flex:0 0 96px!important}
}
/* the row of lines under the tour video never wraps: it scrolls sideways when the column is narrow */
.hm-tour-row::-webkit-scrollbar{display:none}
@media (max-width:699px){
  .hm-tour-line{min-height:36px!important;font-size:13px!important;padding:0 10px!important}
}
/* wide monitors: the page uses more of the screen, header and footer with it */
@media (min-width:1700px){
  .tg-gutter{max-width:1480px!important}
  .hm-hero-wheel-art{width:max(1480px,100%)}
}