/* Shared components. Link after type.css. */

/* brand tiles: identical 3:2 tiles, logos sized to equal optical area (tools/home_update.py) */
.bt-brand-tile{display:grid;place-items:center;aspect-ratio:3/2;padding:6%;background:#fff;border:1px solid var(--line);transition:border-color .18s,box-shadow .18s}
.bt-brand-tile img{height:auto;max-width:100%}
a.bt-brand-tile:hover{border-color:rgba(191,45,48,.4);box-shadow:0 8px 20px -12px rgba(19,27,32,.35)}
a.bt-brand-tile:focus-visible{outline:2px solid var(--red);outline-offset:2px;z-index:1}
.bt-brand-all{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.9375rem;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:.2rem;white-space:nowrap}
.bt-brand-all:hover,.bt-brand-all:focus-visible{color:var(--red)}

/* brand walls (brands page): 6x3 and 5x9 on desktop, full rows on tablet; a lone last tile on phones is centred */
.bt-brand-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.bt-brand-wall>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - .375rem)}
@media (min-width:640px){.bt-brand-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.bt-brand-wall>:last-child:nth-child(odd){grid-column:auto;width:auto}}
@media (min-width:1024px){.bt-wall-6{grid-template-columns:repeat(6,minmax(0,1fr))}.bt-wall-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.bt-brand-cta{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none;text-align:left;place-items:center start;padding:8%}
.bt-brand-cta:hover,.bt-brand-cta:focus-visible{background:var(--red);border-color:var(--red)}
.bt-brand-cta-kicker{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.bt-brand-cta-title{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;font-family:var(--display);font-stretch:94%;font-size:1.25rem;font-weight:800;line-height:1.15}

/* labelled contact details (contact page): small label column, value column */
.bt-contact-list{display:grid;grid-template-columns:max-content 1fr;gap:.6rem 1.25rem;align-items:baseline;margin:1.75rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.bt-contact-list dt{font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-strong)}
.bt-contact-list dd{margin:0;font-weight:700}
.bt-contact-list a{color:var(--ink);text-decoration:none}
.bt-contact-list a:hover,.bt-contact-list a:focus-visible{color:var(--red)}

/* quote form (request-a-quote): legends on the card-title scale, hints inline, required markers */
main .form-legend{font-family:var(--display);font-stretch:94%;font-size:var(--fs-card);font-weight:800;letter-spacing:-.005em;margin-bottom:1.25rem}
main .form-grid label{line-height:1.3}
.bt-hint{font-weight:500;color:var(--muted-strong)}
.bt-req{color:var(--red);margin-left:.15em}
.bt-req-note{margin:-.75rem 0 1.25rem;font-size:.875rem;color:var(--muted-strong)}
main .bt-form-stack{grid-template-columns:minmax(0,1fr)}
.bt-contact-card{background:#fff;border:1px solid var(--line);padding:2rem}

/* industry cards: a photo block that hides itself while the placeholder is in place,
   and titles reserved at two lines on wide screens so every description starts level */
.bt-ind-img:has(img[src*="bt-photo-pending"]){display:none}
.bt-ind-card:not(:has(.bt-ind-img img:not([src*="bt-photo-pending"]))) .bt-ind-body{border-top:2px solid var(--red)}
@media (min-width:768px){.bt-ind-body .bt-card-title{min-height:2.4em}}
/* FAQ (home) */
.bt-faq{display:grid;gap:2rem}
@media (min-width:1024px){.bt-faq{grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}}
.bt-faq-list{border-top:1px solid var(--line)}
.bt-faq-item{border-bottom:1px solid var(--line)}
.bt-faq-item summary{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-family:var(--display);font-stretch:94%;font-weight:800;font-size:1.125rem;color:var(--ink)}
.bt-faq-item summary::-webkit-details-marker{display:none}
.bt-faq-item summary:after{content:"+";color:var(--red);font-size:1.5rem;line-height:1}
.bt-faq-item[open] summary:after{content:"\2212"}
.bt-faq-item p{margin:0 0 1.25rem;line-height:1.75;color:var(--muted-strong);font-weight:500}

/* hero crossfade slideshow (tools/home_industries_update.py): 3 photos, 6s each */
.bt-slides{position:absolute;inset:0}
.bt-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.bt-slides img:first-child{opacity:1}
.bt-slides img{animation:bt-slide 18s linear infinite}  /* a slow crossfade; runs even with reduced motion (owner request) */
.bt-slides img:nth-child(2){animation-delay:-12s}
.bt-slides img:nth-child(3){animation-delay:-6s}
@keyframes bt-slide{0%,30%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}