/* ==========================================================================
   Bring On The Work 2026 - Store Locator Landing Page (BOCO-24009)

   Band 1 offer hero      - new for 2026
   Band 2 section header  - lifted from OctRetailEvent2025.css
   Band 3 locator         - styled by StoreLocator.css (NOT modified here)
   Band 4 footer          - lifted from OctRetailEvent2025.css

   Design tokens from Figma: Red #FF0033, Grey 4 #232026.
   ========================================================================== */

body {
  font-family: "PPNeueMontreal Medium", Arial, sans-serif;
  background-color: white !important;
}

* {
  box-sizing: border-box;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: "ArkitektMedium", Arial, sans-serif;
  margin: 0;
}

/* ==========================================================================
   Band 1 - Offer hero
   Figma: 12176:41375 (desktop 1440x555 / mobile 428x165)
   Photo and text sit side by side at every width, per both design frames.
   ========================================================================== */

/* Padding derived from the design band heights: desktop 555 - 415.9 media = 69.5
   top and bottom; mobile 165 - 123.6 = 20.7. */
.offer-hero {
  background-color: #f2f2f2;
  padding: clamp(1.29rem, 4.83vw, 4.34rem) 1rem;
}

.offer-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
}

/* Media: the bracket SVG is the outer frame (357.238 x 415.905) and the photo
   sits inside it at the designed inset (331.259 x 389.587). Percentages keep
   that relationship intact as the band scales. */
.offer-hero__media {
  position: relative;
  flex: 0 0 auto;
  width: clamp(106px, 25vw, 357px);
  aspect-ratio: 357.238 / 415.905;
}

.offer-hero__photo {
  position: absolute;
  left: 3.6%;
  top: 3.18%;
  width: 92.73%;
  height: 93.67%;
  object-fit: cover;
  object-position: center;
}

.offer-hero__brackets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.offer-hero__content {
  flex: 0 1 auto;
  text-align: center;
}

.offer-hero__headline {
  color: #ff0033;
  font-size: clamp(1.5rem, 5.6vw, 4.925rem);
  font-weight: 500;
  line-height: 0.88;
  text-transform: uppercase;
  margin: 0;
}

.offer-hero__eyebrow {
  font-family: "ArkitektMedium", Arial, sans-serif;
  color: #232026;
  font-size: clamp(0.7rem, 2.75vw, 2.447rem);
  line-height: 0.88;
  text-transform: uppercase;
  margin-top: clamp(0.75rem, 2vw, 2.5rem);
}

.offer-hero__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.9vw, 0.85rem);
  margin-top: clamp(0.35rem, 1vw, 0.85rem);
}

.offer-hero__wing {
  flex: 0 0 auto;
  width: clamp(15px, 3.5vw, 50px);
  height: auto;
}

.offer-hero__event {
  font-family: "ArkitektMedium", Arial, sans-serif;
  color: #232026;
  font-size: clamp(0.7rem, 2.75vw, 2.447rem);
  line-height: 0.88;
  text-transform: uppercase;
}

/* ==========================================================================
   Band 2 - Section header  (lifted from OctRetailEvent2025.css)
   ========================================================================== */

.store-locator-ufe {
  padding: 40px 2rem 0;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .store-locator-ufe {
    padding: 2rem;
  }
}

/* Location pin. Design sizes it 80.02 at 1440 and 51.98 at 428, so the middle
   term interpolates linearly between those two points:
   slope (80 - 52) / (1440 - 428) = 2.767vw, intercept 40.16px.
   Yields 52 at 428 and 80 at 1440. The inline SVG's width/height attributes
   remain as a no-CSS fallback; viewBox keeps it square as it scales. */
.store-locator__icon {
  display: block;
  width: clamp(52px, 40.16px + 2.767vw, 80px);
  height: auto;
}

/* 926px matches the design's header block (Figma 12176:41392) and keeps the
   title on one line. The 2025 page used 486px, which wraps it in two. */
.store-locator__search-container {
  max-width: 926px;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-gap: 1.5rem;
}

.store-locator__title {
  font-size: clamp(1.75rem, -0.274rem + 4.217vw, 2.625rem);
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
  color: #252828;
}

/* ==========================================================================
   Band 3 - Locator
   Styled by StoreLocator.css. Intentionally NOT restyled here: the partial is
   shared with 14 call sites and restyling is out of scope for BOCO-24009.
   Note: the 2025 page added `.store-container-col div:nth-child(odd)
   { background-color: #FFFFFF; }` to alternate card backgrounds. The 2026
   design shows uniform cards, so that override is deliberately NOT carried
   over. Any remaining delta against the Figma is reported, not fixed (NFR-6).
   ========================================================================== */

.store-locator {
  margin-bottom: 0px !important;
}

/* ==========================================================================
   Band 4 - Footer  (lifted from OctRetailEvent2025.css)
   ========================================================================== */

.footer {
  padding: 2rem 1rem;
}

@media (min-width: 767px) {
  .footer {
    padding: 60px 1rem 60px;
  }
}

.footer__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  align-items: center;
  gap: 2rem;
}

@media screen and (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer__content-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;
}

.footer__logo {
  width: 81px;
  height: auto;
}

.footer__address {
  text-transform: uppercase;
  line-height: 1;
  color: #000000;
}

.footer__disclaimer {
  max-width: 781px;
}

.footer__disclaimer-text {
  font-size: 0.75rem;
  line-height: 1.2;
  color: #000000;
}

/* ==========================================================================
   BOCO-24008 - Spanish acquisition page
   Appended; the blocks above belong to the store locator page (BOCO-24009)
   and are shared. Do not restructure them.
   Figma: 11983:4194 (desktop 1440x1171) / 11983:4247 (mobile 428x895)
   ========================================================================== */

/* The acquisition hero carries no BRING ON THE WORK / BOOT EVENT lockup, and
   its Spanish headline runs four lines at 86.265px where the locator page's
   English runs two at 78.8px. Modifier rather than an edit to the shared rule.
   Interpolated between the design's two frames: 26px at 428, 86.265px at 1440. */
.offer-hero__headline--es {
  font-size: clamp(26px, 0.51px + 5.955vw, 86.265px);
}

.email-capture-band {
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  padding: 0 1rem clamp(1.5rem, 4.45vw, 4rem);
}

.email-capture-card {
  background-color: #ffffff;
  width: 100%;
  max-width: 754px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  /* 34.5px inline keeps the intro block at the design's 685px inside a 754px
     card. At 40px the lede wrapped to two lines and pushed the band 25px over. */
  padding: 24px clamp(1rem, 2.4vw, 34.5px) 64px;
}

/* Mobile: 24px of white space under the CTA before the gray band resumes. */
@media (max-width: 767px) {
  .email-capture-card {
    padding-bottom: 24px;
  }
}

.email-capture-card__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 685px;
  text-align: center;
}

.email-capture-card__title {
  font-family: "ArkitektMedium", Arial, sans-serif;
  font-size: clamp(1.25rem, 1.95vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

/* Arkitekt Regular per the design (11983:4209). Without it the lede inherits
   PPNeueMontreal Medium, which is wider and wraps to two lines at the design's
   685px intro width where the design fits one. */
.email-capture-card__lede {
  font-family: "ArkitektRegular", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.25vw, 18px);
  line-height: 1.4;
  color: #000000;
  margin: 0;
}