/* Fanmaster Brands page. Converted from Javonte's prototype at
   fanmasterwebsite.netlify.app/brands.

   Sits on top of fm-industry.css, which supplies the page's base type, hero,
   section, CTA and button styles. This page shares that design, so it shares
   those rules rather than duplicating them. Only what is specific to the brands
   page lives here.

   Every rule is scoped to .fm-brands or an .fm-brands__ class. Nothing may touch
   a bare element selector: this loads inside a live WooCommerce site. */

/* This page has no hero photo, and inventing one would misrepresent a site or
   a job we have not shot. So the band is sized by its own words instead of
   holding 430px of empty placeholder open. */
.fm-brands__hero {
  background: #0d1117 repeating-linear-gradient(135deg,
    rgba(255,255,255,.028) 0 14px, transparent 14px 28px);
}
.fm-brands__hero .fm-ind__herobody { position: static; padding: 58px 0 44px; background: none; }

.fm-brands__intro { font-size: 18px; margin: 0 0 16px; max-width: 70ch; }

.fm-brands__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; padding: 6px 0 8px;
}
.fm-brands__tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: 188px; padding: 26px 24px 20px;
  border: 1px solid var(--fm-line); border-radius: 12px; background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fm-brands__tile:hover {
  border-color: var(--fm-red); transform: translateY(-2px);
  box-shadow: 0 3px 18px rgba(17,24,32,.08);
}
.fm-brands__tile:focus-visible { outline: 2px solid var(--fm-red); outline-offset: 3px; }
.fm-brands__mark { display: flex; align-items: center; min-height: 62px; }
.fm-brands__mark img { max-width: 172px; width: auto; object-fit: contain; }
/* No logo on file: set the name rather than ship a gap or borrow a mark. */
.fm-brands__word {
  font-family: var(--fm-head); font-size: 23px; color: var(--fm-ink); letter-spacing: -.02em;
}
.fm-brands__go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--fm-ink);
}
.fm-brands__go span:last-child { color: var(--fm-red); font-size: 17px; transition: transform .18s; }
.fm-brands__tile:hover .fm-brands__go span:last-child { transform: translateX(4px); }
.fm-brands__note { font-size: 13.5px; color: var(--fm-dim); margin: 22px 0 0; max-width: 70ch; }

/* Brand listing (/brand/<slug>/): the same patterned band as the Brands page in
   place of the shop's plain red banner. The brand marks are dark artwork made
   for white paper, so the logo sits on a white plate rather than on the band. */
.fm-brands__band {
  background: #0d1117 repeating-linear-gradient(135deg,
    rgba(255,255,255,.028) 0 14px, transparent 14px 28px);
}
.fm-brands__bandwrap {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding-top: 46px; padding-bottom: 40px;
}
.fm-brands__band h1 { color: #fff; font-size: clamp(28px, 3.6vw, 46px); margin: 0; }
.fm-brands__banddesc { color: rgba(255,255,255,.78); font-size: 16px; max-width: 62ch; margin: 12px 0 0; }
.fm-brands__banddesc p { margin: 0 0 10px; }
.fm-brands__banddesc p:last-child { margin-bottom: 0; }
.fm-brands__all {
  display: inline-block; margin: 18px 0 0;
  font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
}
.fm-brands__all:hover { color: var(--fm-red); }
.fm-brands__plate {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 220px; min-height: 104px; padding: 22px 28px;
  border-radius: 12px; background: #fff;
}
.fm-brands__plate img { max-width: 200px; width: auto; object-fit: contain; }

@media (max-width: 900px) {
  .fm-brands__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fm-brands__hero .fm-ind__herobody { padding: 40px 0 32px; }
  .fm-brands__bandwrap {
    flex-direction: column-reverse; align-items: flex-start; gap: 20px;
    padding-top: 32px; padding-bottom: 28px;
  }
  .fm-brands__plate { min-width: 0; min-height: 0; padding: 14px 18px; }
  .fm-brands__plate img { max-width: 150px; }
}
@media (max-width: 560px) {
  .fm-brands__grid { grid-template-columns: 1fr; gap: 12px; }
  .fm-brands__tile { min-height: 0; gap: 18px; padding: 22px 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-brands__tile, .fm-brands__go span:last-child { transition: none; }
  .fm-brands__tile:hover { transform: none; }
  .fm-brands__tile:hover .fm-brands__go span:last-child { transform: none; }
}