/* ============================================================
   BHS PL Beton – supplement til designets stylesheet

   bhs-styles.css er hentet direkte fra den kundegodkendte mockup og holdes
   urørt, så den kan sammenlignes med designkilden. Denne fil dækker det, som
   mockuppen ikke byggede, men som sitet har brug for.

   Alt herunder bruger designets egne custom properties, så en ny hovedsponsors
   accentfarve slår igennem her på samme måde som i resten af sitet.
   ============================================================ */

/* ---------- Staff på Team 2026 ----------
   Mockuppen har nul staff-klasser: sektionen blev aldrig bygget der, selv om
   staff var Christians eneste design-input 15/6 ("staff er forsvundet fra
   team2026 siden"). Kortet er derfor bygget af rytterkortets mål og typografi,
   uden flip-bagsiden, fordi et staff-medlem ikke har sæsonmål og rytterfakta. */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.staff-card {
  background: #fff;
  border: 1px solid #e7e7ea;
  overflow: hidden;
}

.staff-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-dark, #0e0e10);
}

.staff-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.staff-body {
  padding: 18px 20px 22px;
}

.staff-name {
  font-family: "Overpass", "Poppins", sans-serif;
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 4px;
}

.staff-role {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-accent, #2342a5);
  margin-bottom: 10px;
}

.staff-text {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.staff-contact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}

.staff-contact a {
  color: inherit;
  text-decoration: none;
}

.staff-contact a:hover {
  color: var(--c-accent, #2342a5);
}

.staff-contact i {
  width: 14px;
  margin-right: 6px;
  color: var(--c-accent, #2342a5);
}

/* ---------- Staff-kortet som link til profilsiden ----------
   Tilføjet 1/9 (KBM valg a). Navn og foto er links, og profillinjen spejler
   rytterkortets .flip-link, blot på lys baggrund, fordi staff-kortet ikke
   vender. */
.staff-name a {
  color: inherit;
  text-decoration: none;
}

.staff-name a:hover {
  color: var(--c-accent, #2342a5);
}

.staff-photo a {
  display: block;
}

.staff-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-accent, #2342a5);
  border-bottom: 2px solid var(--c-accent, #2342a5);
  padding-bottom: 2px;
  text-decoration: none;
}

.staff-link:hover {
  opacity: 0.75;
}

/* ---------- Link på rytterkortets bagside ----------
   Mockuppens kort havde ingen profilside at linke til. */
.rider-flip .flip-link {
  align-self: flex-start;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  border-bottom: 2px solid var(--c-accent, #2342a5);
  padding-bottom: 2px;
  text-decoration: none;
}

/* ---------- Nyheds- og sponsorkort som links ----------
   Kortene er <a> på sitet, hvor mockuppen brugte onClick. Uden dette arver de
   browserens linkfarve og understregning. */
.news-card > a,
.next-race-card,
.sponsor-cell a,
.sponsor-hero-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

.next-race-card {
  cursor: pointer;
}

/* Sponsorprofilens logo. article-img er til fotos (cover), som upscalede og
   klippede logoet; her vises hele logoet i et kort som paa sponsorsiden. */
.sponsor-profile-logo {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 44px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 36px;
}

/* Logoernes intrinsiske bredde (260px) er stoerre end 1fr-sporets minimum,
   saa repeat(6, 1fr) lod gitteret vokse ud over containeren. minmax(0, 1fr)
   fjerner min-content-bidraget; .sponsor-cell img har allerede max-width. */
.sponsor-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sponsor-hero-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Sektionsfod og centrering ----------
   Mockuppen satte marginen som inline style på en <div> under hver sektion. */
.sec-foot {
  margin-top: 34px;
}

.sec-foot.is-centered,
.section-manchet.is-centered {
  text-align: center;
}

.sponsor-strip.is-centered {
  justify-content: center;
}

.section-manchet {
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 0 26px;
}

.section-manchet.is-centered {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Richtext fra Umbraco ----------
   Mockuppen havde al brødtekst som faste <p>-afsnit. Redaktørens richtext kan
   også indeholde lister, mellemrubrikker og links. */
.rich-text > *:first-child {
  margin-top: 0;
}

.rich-text > *:last-child {
  margin-bottom: 0;
}

.rich-text h3 {
  font-family: "Overpass", "Poppins", sans-serif;
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  margin: 28px 0 10px;
}

.rich-text ul,
.rich-text ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.rich-text li {
  margin-bottom: 6px;
}

.rich-text a {
  color: var(--c-accent, #2342a5);
}

.sponsor-pitch {
  max-width: 760px;
  margin: 46px auto 0;
  text-align: center;
}

/* ---------- Ikon på nøglepunkt ---------- */
.name-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  background: var(--c-accent, #2342a5);
  color: #fff;
  font-size: 18px;
}

/* ---------- Billede til højre i billede/tekst-blokken ---------- */
.about-split.reverse .about-imgs {
  order: 2;
}

/* ---------- Formularfejl og honeypot ----------
   .field.error og .err-msg findes i designet; en fejl der gælder hele
   formularen gør ikke. */
.form-error {
  background: #fdeceb;
  border-left: 3px solid var(--c-accent-2, #d7282f);
  padding: 12px 14px;
  font-size: 13.5px;
  margin-bottom: 6px;
}

.bhs-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Responsivt lag for det supplerede ----------
   Samme burgergrænse som bhs-responsive.css, jf. designerens note om 1010px. */
@media (max-width: 1009px) {
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .staff-body {
    padding: 14px 15px 18px;
  }

  .staff-name {
    font-size: 15px;
  }

  .about-split.reverse .about-imgs {
    order: 0;
  }

  .sponsor-pitch {
    margin-top: 30px;
  }
}

@media (max-width: 599px) {
  .staff-grid {
    grid-template-columns: 1fr;
  }
}