/*
 * Homepage styles — 2026 interim redesign.
 * Loaded on the homepage only (see front-page.php). Every rule starts with
 * .lmb-home or .lmbh-, so nothing here can change another page. The sticky
 * header and the red Donate button are sitewide and live in style.css.
 *
 * Colors (2019 LMB Style Guide):
 *   LMB Light Blue  #006097   headings, links, buttons
 *   LMB Dark Blue   #012939   dark text, photo shade
 *   Light Blue      #009CDE   accents on dark backgrounds
 *   Dark Grey       #545759   secondary text
 *   Light Grey      #C3C5C8   borders
 *   Tint            #F3F3F3   light bands (already used across the site)
 */

/* ---------- Page frame ---------- */
.lmb-home {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  color: #3e3e3e;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.lmb-home p {
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  margin: 0 0 12px;
}
.lmb-home a:hover,
.lmb-home a:focus {
  text-decoration: none;
}
.lmbh-wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}
.lmbh-section {
  padding: 40px 0;
}
@media (min-width: 768px) {
  .lmbh-section {
    padding: 52px 0;
  }
}
.lmbh-section--tint {
  background: #f3f3f3;
}
.lmbh-section--blue {
  background: #006097;
  color: #fff;
  padding: 34px 0;
}

/* ---------- Type ---------- */
.lmbh-kicker {
  font-family: "Montserrat", sans-serif;
  font-size: 13px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
  color: #006097;
  margin: 0 0 6px !important;
}
.lmbh-h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  color: #012939;
  margin: 0;
}
@media (min-width: 768px) {
  .lmbh-h2 {
    font-size: 30px;
  }
}
.lmbh-section--blue .lmbh-h2 {
  color: #fff;
}
.lmb-home .lmbh-lead {
  font-size: 18px;
  margin: 6px 0 0;
}
.lmbh-heading-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
}
.lmbh-arrow {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #006097;
  display: inline-block;
  padding: 8px 0;
}
.lmbh-arrow:after {
  content: " \2192";
}
.lmbh-arrow:hover,
.lmbh-arrow:focus {
  color: #012939;
}
.lmbh-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 36px;
  margin-top: 16px;
}

/* ---------- Buttons ---------- */
.lmbh-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.lmbh-btn {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  display: inline-block;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.lmbh-btn--light {
  background: #009cde;
  border-color: #009cde;
  color: #012939;
}
.lmbh-btn--light:hover,
.lmbh-btn--light:focus {
  background: #fff;
  border-color: #fff;
  color: #012939;
}
.lmbh-btn--white {
  background: #fff;
  border-color: #fff;
  color: #006097;
}
.lmbh-btn--white:hover,
.lmbh-btn--white:focus {
  background: #012939;
  border-color: #012939;
  color: #fff;
}
.lmbh-btn--outline-light {
  border-color: #fff;
  color: #fff;
}
.lmbh-btn--outline-light:hover,
.lmbh-btn--outline-light:focus {
  background: #fff;
  color: #012939;
}

/* ---------- Hero ---------- */
.lmbh-hero {
  position: relative;
  overflow: hidden;
  background: #012939;
}
.lmbh-hero__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.lmbh-hero__shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 41, 57, 0.6);
}
.lmbh-hero__inner {
  position: relative;
  padding-top: 48px;
  padding-bottom: 52px;
  color: #fff;
}
@media (min-width: 710px) {
  /* The header logo hangs down over the top of the hero, so the text starts lower. */
  .lmbh-hero__inner {
    padding-top: 104px;
    padding-bottom: 76px;
  }
}
.lmb-home .lmbh-hero__tagline {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}
.lmbh-hero__title {
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 16px;
}
.lmb-home .lmbh-hero__text {
  font-size: 18px;
  max-width: 600px;
  margin: 0;
}
@media (min-width: 768px) {
  .lmb-home .lmbh-hero__tagline {
    font-size: 19px;
  }
  .lmbh-hero__title {
    font-size: 50px;
  }
  .lmb-home .lmbh-hero__text {
    font-size: 20px;
  }
}
@media (min-width: 1100px) {
  .lmbh-hero__title {
    font-size: 58px;
  }
}

/* ---------- Rider Resources tiles ---------- */
.lmbh-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 22px;
}
@media (min-width: 900px) {
  .lmbh-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
.lmbh-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #c3c5c8;
  border-radius: 6px;
  padding: 16px 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lmbh-tile:hover,
.lmbh-tile:focus {
  border-color: #006097;
  box-shadow: 0 4px 14px rgba(1, 41, 57, 0.12);
}
.lmbh-icon {
  flex: none;
  width: 40px;
  height: 40px;
  color: #006097;
}
.lmbh-icon__accent {
  stroke: #009cde;
}
.lmbh-tile__title {
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #012939;
}
.lmbh-tile:hover .lmbh-tile__title,
.lmbh-tile:focus .lmbh-tile__title {
  color: #006097;
}
@media (max-width: 480px) {
  .lmbh-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
  }
  .lmbh-tile__title {
    font-size: 16px;
  }
}

/* ---------- Mission ---------- */
.lmb-home .lmbh-mission {
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  color: #012939;
  max-width: 1000px;
  margin: 6px 0 0;
}
@media (min-width: 768px) {
  .lmb-home .lmbh-mission {
    font-size: 23px;
  }
}
.lmbh-mission strong {
  font-weight: 800;
  color: #006097;
}

/* ---------- Get involved band ---------- */
.lmbh-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 56px;
}
.lmbh-cta .lmbh-buttons {
  margin-top: 0;
}

/* ---------- Statement above the road and trail panels ---------- */
.lmb-home .lmbh-statement {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #012939;
  margin: 0 0 22px;
}
@media (min-width: 768px) {
  .lmb-home .lmbh-statement {
    font-size: 24px;
  }
}

/* ---------- Road and trail panels ---------- */
.lmbh-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 820px) {
  .lmbh-panels {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lmbh-panel {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #012939;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.lmbh-panel__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lmbh-panel__photo--road {
  object-position: 75% 35%;
}
.lmbh-panel__shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 41, 57, 0.62);
}
.lmbh-panel__body {
  position: relative;
  padding: 26px 26px 28px;
}
.lmbh-panel__title {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 8px;
}
.lmb-home .lmbh-panel__body p {
  margin: 0;
}

/* ---------- Events, issues, news: three short lists ---------- */
.lmbh-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
}
@media (min-width: 640px) {
  .lmbh-lists {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1060px) {
  .lmbh-lists {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 36px;
  }
}
.lmbh-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lmbh-list__title {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: #012939;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 3px solid #006097;
  align-self: stretch;
}
.lmbh-list ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  align-self: stretch;
}
.lmbh-list li {
  border-bottom: 1px solid #c3c5c8;
}
.lmbh-list li a {
  display: block;
  padding: 12px 0;
}
.lmbh-list__meta,
.lmbh-list__name {
  display: block;
}
.lmbh-list__meta {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #545759;
  margin-bottom: 2px;
}
.lmbh-list__name {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #012939;
}
.lmbh-list li a:hover .lmbh-list__name,
.lmbh-list li a:focus .lmbh-list__name {
  color: #006097;
}