/* ============================================================
   RWJBarnabas Health — Mammography Landing Page
   Namespace: mammo26-
   Notes:
   - Class selectors only (no #id styling), native CSS nesting.
   - Wrap the whole page in <div class="mammo26"> for isolation.
   - Fonts: Montserrat (headings) + Source Sans 3 (body) —
     already loaded site-wide on rwjbh.org.
   - For local preview, include Google Fonts link in <head>.
   ============================================================ */
 
.mammo26 {
  /* Site color tokens (from rwjbh.org global CSS) */
  --m-primary:     #00548B;
  --m-secondary:   #D0282E;
  --m-tertiary:    #3F79BC;
  --m-dark:        #53616F;
  --m-text:        #2B2E30;
  --m-body-text:   #3a4855;
  --m-light:       #EFECE4;
  --m-white:       #FFFFFF;
  --m-line:        #D9DEE3;
 
  /* Campaign-specific accent (breast cancer awareness pink) */
  --m-pink:        #BD2565;
  --m-pink-hover:  #A11E57;
 
  /* Footer uses a darker primary */
  --m-footer-bg:   #003B61;
 
  --m-max: 93.722em;
 
  /* Site font stacks */
  --m-heading:  'Montserrat', sans-serif;
  --m-body:     'Source Sans 3', sans-serif;
  --m-serif:    Georgia, 'Times New Roman', Times, serif;
 
  font-family: var(--m-heading);
  color: var(--m-text);
  line-height: 2;
  background: var(--m-white);
  font-weight: 400;
 
  *, *::before, *::after { box-sizing: border-box; }
  img { max-width: 100%; height: auto; display: block; }
 
  p {
    margin: 0;
    font-family: var(--m-body);
    color: var(--m-body-text);
    font-size: 1em;
    line-height: 2;
  }
 
  a {
    text-decoration: none;
    color: var(--m-primary);
    transition: color .4s ease 0s;
    &:hover { color: var(--m-secondary); }
  }
 
  h1, h2, h3, h4, h5 {
    margin: 0;
    line-height: 1;
    font-weight: 600;
    color: var(--m-dark);
    font-family: var(--m-heading);
  }
 
  h2 {
    color: var(--m-primary);
    line-height: 1.5;
  }
 
  /* ---------- Shared ---------- */
  .mammo26-wrap {
    max-width: var(--m-max);
    margin: 0 auto;
    padding: 0 6.444em;
  }
 
  .mammo26-section-label {
    font-family: var(--m-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--m-primary);
    margin: 0;
    line-height: 1.15;
  }
 
  .mammo26-section-title {
    font-family: var(--m-heading);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--m-text);
    margin: 0;
    line-height: 1.08;
  }
 
  /* Site button pattern (.btn.v1 match) */
  .mammo26-btn {
    display: inline-block;
    padding: 1.714em 3.5em;
    outline: none;
    cursor: pointer;
    color: var(--m-white);
    transition: 0.5s ease;
    text-align: center;
    font-weight: 600;
    font-family: var(--m-heading);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 0.778em;
    background-color: var(--m-secondary);
    border: 2px solid var(--m-secondary);
    text-decoration: none;
    min-width: 10em;
 
    &:hover {
      color: var(--m-secondary);
      background-color: var(--m-white);
    }
  }
 
  /* Pink variant for breast cancer campaign CTAs */
  .mammo26-btn-pink {
    display: inline-block;
    padding: 1.714em 3.5em;
    outline: none;
    cursor: pointer;
    color: var(--m-white);
    transition: 0.5s ease;
    text-align: center;
    font-weight: 600;
    font-family: var(--m-heading);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 0.778em;
    background-color: var(--m-pink);
    border: 2px solid var(--m-pink);
    text-decoration: none;
    min-width: 10em;
 
    &:hover {
      color: var(--m-pink);
      background-color: var(--m-white);
    }
  }
 
  /* ============================================================
     1. UTILITY BAR
     ============================================================ */
  .mammo26-utility {
    background: var(--m-primary);
    color: var(--m-white);
    font-size: 0.778em;
    padding: 0.6em 0;
    font-family: var(--m-body);
 
    .mammo26-utility-inner {
      max-width: var(--m-max);
      margin: 0 auto;
      padding: 0 6.444em;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5em;
      line-height: 1;
    }
 
    a {
      color: var(--m-white);
      font-weight: 400;
      &:hover { color: var(--m-light); text-decoration: underline; }
    }
  }
 
  /* ============================================================
     2. HEADER BAR
     ============================================================ */
  .mammo26-header {
    background: var(--m-white);
    border-bottom: 1px solid var(--m-line);
    padding: 1em 0;
 
    .mammo26-header-inner {
      max-width: var(--m-max);
      margin: 0 auto;
      padding: 0 6.444em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5em;
    }
 
    .mammo26-header-logo img { height: 2.667em; width: auto; }
 
    .mammo26-header-phone {
      color: var(--m-primary);
      font-weight: 700;
      font-size: 1em;
      &:hover { color: var(--m-secondary); }
    }
  }
 
  /* ============================================================
     3. HERO
     ============================================================ */
  .mammo26-hero {
    position: relative;
    min-height: 28em;
    display: flex;
    align-items: center;
    overflow: hidden;
 
    .mammo26-hero-bg {
      position: absolute;
      inset: 0;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
 
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        100deg,
        rgba(0, 30, 50, .72) 0%,
        rgba(0, 30, 50, .52) 40%,
        rgba(0, 30, 50, .10) 70%,
        transparent 100%
      );
      z-index: 1;
    }
 
    .mammo26-hero-inner {
      position: relative;
      z-index: 2;
      max-width: var(--m-max);
      width: 100%;
      margin: 0 auto;
      padding: 3em 6.444em;
    }
 
    .mammo26-hero-content { max-width: 42em; }
 
    .mammo26-hero-logos {
      display: flex;
      align-items: center;
      gap: 1em;
      margin-bottom: 1.5em;
 
      img {
        height: 3em;
        width: auto;
      }
    }
 
    .mammo26-hero-headline {
      color: var(--m-white);
      margin: 0 0 0.5em;
      line-height: 1.1;
 
      .mammo26-hero-italic {
        font-family: var(--m-serif);
        font-style: italic;
        font-weight: 400;
        font-size: clamp(1.5em, 3.5vw, 2.222em);
        display: block;
      }
 
      .mammo26-hero-bold {
        font-family: var(--m-heading);
        font-weight: 800;
        text-transform: uppercase;
        font-size: clamp(2em, 5vw, 3.333em);
        display: block;
        margin-top: 0.15em;
      }
    }
 
    .mammo26-hero-sub {
      color: var(--m-white);
      font-family: var(--m-body);
      font-size: 1.222em;
      margin: 1em 0 1.5em;
      line-height: 1.4;
    }
 
    .mammo26-hero-cta {
      display: inline-block;
      background: var(--m-white);
      color: var(--m-text);
      font-weight: 600;
      font-size: 0.889em;
      font-family: var(--m-heading);
      text-transform: uppercase;
      letter-spacing: .1em;
      padding: 1.2em 2.5em;
      border-radius: 2em;
      border: 2px solid var(--m-white);
      transition: .5s ease;
 
      &:hover {
        background: transparent;
        color: var(--m-white);
      }
    }
  }
 
  /* ============================================================
     4. STATS BAR
     ============================================================ */
  .mammo26-stats {
    background: var(--m-primary);
    color: var(--m-white);
    padding: 2em 0;
 
    .mammo26-stats-inner {
      max-width: var(--m-max);
      margin: 0 auto;
      padding: 0 6.444em;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
    }
 
    .mammo26-stat {
      padding: 0 2em;
      display: flex;
      align-items: center;
      gap: 0.889em;
      font-family: var(--m-body);
      font-size: 0.889em;
      line-height: 1.5;
 
      &:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, .35);
      }
      &:first-child { padding-left: 0; }
      &:last-child { padding-right: 0; }
    }
 
    .mammo26-stat-big {
      font-family: var(--m-heading);
      font-weight: 800;
      font-size: clamp(2em, 4vw, 3em);
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }
 
  /* ============================================================
     5. COMPREHENSIVE SCREENING SECTION
     ============================================================ */
  .mammo26-screening {
    padding: 6.333em 0;
 
    .mammo26-screening-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 3em;
      align-items: center;
    }
 
    .mammo26-screening-img {
      border-radius: 0.5em;
      overflow: hidden;
      img { width: 100%; display: block; }
    }
 
    .mammo26-screening-label {
      font-size: clamp(1.333em, 2.8vw, 1.667em);
      margin-bottom: 0.2em;
    }
 
    .mammo26-screening-title {
      font-size: clamp(1.444em, 3vw, 1.889em);
      margin-bottom: 1em;
    }
 
    .mammo26-screening-body {
      font-size: 1em;
      color: var(--m-body-text);
      margin: 0 0 1.5em;
      max-width: 35em;
    }
  }
 
  /* ============================================================
     6. VIDEO SECTION
     ============================================================ */
  .mammo26-videos {
    padding: 0 0 6.333em;
 
    .mammo26-videos-label {
      font-size: clamp(1.333em, 2.8vw, 1.667em);
      margin-bottom: 0.2em;
    }
 
    .mammo26-videos-title {
      font-size: clamp(1.444em, 3vw, 1.889em);
      margin-bottom: 0.5em;
    }
 
    .mammo26-videos-sub {
      font-size: 0.889em;
      color: var(--m-dark);
      margin: 0 0 1.5em;
    }
 
    .mammo26-video-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25em;
    }
 
    .mammo26-video-card {
      background: var(--m-white);
      border-radius: 0.625em;
      overflow: hidden;
      box-shadow: 0 0.125em 0.75em rgba(0, 0, 0, .08);
      text-decoration: none;
      color: var(--m-text);
      transition: transform .3s ease, box-shadow .3s ease;
 
      &:hover {
        transform: translateY(-0.2em);
        box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, .14);
        color: var(--m-text);
      }
    }
 
    .mammo26-video-thumb {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: linear-gradient(135deg, #1A3668 0%, #5B2D78 60%, #8B3A7A 100%);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Zooms past the YouTube 4:3 letterbox bars */
        transform: scale(1.35); 
      }

      /* Lighter brand tint over thumbnail so the play button reads */
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        /* Lowered opacity from .55/.40 to .25/.20 */
        background: linear-gradient(135deg, rgba(0, 59, 97, .25) 0%, rgba(189, 37, 101, .20) 100%);
        transition: opacity .3s ease;
      }

      .mammo26-play-btn { position: relative; z-index: 1; }

      iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        z-index: 2;
      }
    }
 
    .mammo26-video-card.playing {
      cursor: default;
      &:hover { transform: none; }
      .mammo26-video-thumb::after,
      .mammo26-play-btn { display: none; }
    }
 
    .mammo26-play-btn {
      width: 3.25em;
      height: 3.25em;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      border: 2px solid rgba(255, 255, 255, .7);
      display: flex;
      align-items: center;
      justify-content: center;
 
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.563em 0 0.563em 1em;
        border-color: transparent transparent transparent var(--m-white);
        margin-left: 0.2em;
      }
    }
 
    .mammo26-video-info {
      padding: 1em 1.125em 1.25em;
    }
 
    .mammo26-video-num {
      font-size: 0.667em;
      font-weight: 700;
      font-family: var(--m-heading);
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--m-pink);
      margin: 0 0 0.375em;
    }
 
    .mammo26-video-name {
      font-size: 0.778em;
      font-weight: 700;
      font-family: var(--m-heading);
      line-height: 1.35;
      color: var(--m-text);
      margin: 0;
    }
  }
 
  /* ============================================================
     7. WHY CHOOSE SECTION
     ============================================================ */
  .mammo26-why {
    padding: 6.333em 0;
    border-top: 1px solid var(--m-line);
 
    .mammo26-why-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 3em;
      align-items: start;
    }
 
    .mammo26-why-label {
      font-size: clamp(1.333em, 2.8vw, 1.667em);
      margin-bottom: 0.2em;
    }
 
    .mammo26-why-title {
      font-size: clamp(1.444em, 3vw, 1.889em);
      margin-bottom: 1em;
 
      em {
        font-family: var(--m-serif);
        font-weight: 400;
        color: var(--m-primary);
      }
    }
 
    .mammo26-why-body {
      color: var(--m-body-text);
      margin: 0 0 1em;
    }
 
    .mammo26-why-sub {
      font-weight: 700;
      font-family: var(--m-heading);
      color: var(--m-text);
      margin: 0 0 0.75em;
    }
 
    .mammo26-why-list {
      list-style: disc;
      padding-left: 1.5em;
      margin: 0;
 
      li {
        font-family: var(--m-body);
        font-size: 0.889em;
        line-height: 1.8;
        color: var(--m-body-text);
        margin-bottom: 0.5em;
      }
    }
 
    .mammo26-why-img {
      border-radius: 0.5em;
      overflow: hidden;
      img { width: 100%; display: block; }
    }
  }
 
  /* ============================================================
     8. LOCATIONS SECTION (static)
     ============================================================ */
  .mammo26-locations {
    padding: 6.333em 0;
    scroll-margin-top: 1em;
    border-top: 1px solid var(--m-line);
 
    .mammo26-locations-label {
      font-size: clamp(1.333em, 2.8vw, 1.667em);
      margin-bottom: 0.2em;
    }
 
    .mammo26-locations-title {
      font-size: clamp(1.444em, 3vw, 1.889em);
      margin-bottom: 0.75em;
    }
 
    .mammo26-locations-intro {
      color: var(--m-body-text);
      margin: 0 0 0.25em;
    }
 
    .mammo26-locations-note {
      font-size: 0.889em;
      color: var(--m-dark);
      margin: 0 0 1.5em;
    }
 
    .mammo26-region-tabs {
      display: flex;
      gap: 0.625em;
      margin-bottom: 1.5em;
      flex-wrap: wrap;
    }
 
    .mammo26-region-tab {
      font-family: var(--m-heading);
      font-size: 0.778em;
      font-weight: 600;
      padding: 0.6em 1.5em;
      border-radius: 1.5em;
      border: 1px solid var(--m-line);
      background: var(--m-white);
      color: var(--m-dark);
      cursor: pointer;
      transition: .4s ease;
 
      &:hover {
        border-color: var(--m-primary);
        color: var(--m-primary);
      }
 
      &.active {
        background: var(--m-primary);
        color: var(--m-white);
        border-color: var(--m-primary);
      }
    }
 
    .mammo26-location-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25em;
      margin-bottom: 1em;
    }
 
    .mammo26-location-card {
      border: 1px solid var(--m-line);
      border-radius: 0.5em;
      padding: 1.5em;
    }
 
    .mammo26-location-name {
      font-weight: 700;
      font-family: var(--m-heading);
      font-size: 0.889em;
      color: var(--m-text);
      margin: 0 0 0.25em;
      line-height: 1.4;
    }
 
    .mammo26-location-city {
      font-size: 0.778em;
      color: var(--m-dark);
      margin: 0 0 1em;
    }
 
    .mammo26-location-actions {
      display: flex;
      align-items: center;
      gap: 1em;
    }
 
    .mammo26-btn-schedule {
      display: inline-flex;
      align-items: center;
      gap: 0.375em;
      background: var(--m-pink);
      color: var(--m-white);
      font-weight: 600;
      font-family: var(--m-heading);
      font-size: 0.778em;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: 0.714em 1.25em;
      border-radius: 0.25em;
      transition: .4s ease;
 
      &:hover { background: var(--m-pink-hover); color: var(--m-white); }
      &::after { content: "›"; font-size: 1.25em; font-weight: 400; }
    }
 
    .mammo26-btn-directions {
      font-size: 0.778em;
      font-weight: 600;
      color: var(--m-text);
      text-decoration: underline;
      text-underline-offset: 0.15em;
      &:hover { color: var(--m-primary); }
    }
 
    .mammo26-region-panel {
      display: none;
      &.active { display: block; }
    }
  }
 
  /* ============================================================
     9. FAQ SECTION
     ============================================================ */
  .mammo26-faq {
    padding: 6.333em 0;
    border-top: 1px solid var(--m-line);
 
    .mammo26-faq-heading {
      font-family: var(--m-heading);
      font-weight: 700;
      font-size: clamp(1.444em, 3vw, 1.778em);
      color: var(--m-text);
      margin: 0 0 2em;
      line-height: 1.3;
    }
 
    .mammo26-faq-item {
      border-bottom: 3px solid var(--m-pink);
      padding: 1.25em 0;
    }
 
    .mammo26-faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1em;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      width: 100%;
      text-align: left;
      font-family: var(--m-heading);
      font-weight: 700;
      font-size: 1em;
      color: var(--m-text);
      line-height: 1.4;
    }
 
    .mammo26-faq-chevron {
      flex-shrink: 0;
      width: 1.5em;
      height: 1.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .25s ease;
      color: var(--m-primary);
 
      svg { width: 1.25em; height: 1.25em; }
    }
 
    .mammo26-faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease, padding .3s ease;
      font-family: var(--m-body);
      font-size: 0.889em;
      line-height: 1.8;
      color: var(--m-body-text);
 
      a {
        color: var(--m-primary);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 0.15em;
        &:hover { color: var(--m-secondary); }
      }
    }
 
    .mammo26-faq-item.open {
      .mammo26-faq-chevron { transform: rotate(180deg); }
      .mammo26-faq-answer {
        max-height: 40em;
        padding-top: 0.889em;
      }
    }
  }
 
  /* ============================================================
     10. FOOTER
     ============================================================ */
  .mammo26-footer {
    background: var(--m-footer-bg);
    color: var(--m-white);
    padding: 1.333em 0;
 
    .mammo26-footer-inner {
      max-width: var(--m-max);
      margin: 0 auto;
      padding: 0 6.444em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5em;
    }
 
    .mammo26-footer-contact {
      font-family: var(--m-body);
      font-size: 0.889em;
      a {
        color: var(--m-white);
        font-weight: 700;
        &:hover { color: var(--m-light); text-decoration: underline; }
      }
    }
 
    .mammo26-footer-lang {
      font-family: var(--m-body);
      font-size: 0.778em;
      a {
        color: var(--m-white);
        text-decoration: underline;
        text-underline-offset: 0.15em;
        &:hover { text-decoration: none; }
      }
    }
  }
 
  /* ============================================================
     RESPONSIVE (matching site breakpoints)
     ============================================================ */
  @media (max-width: 1200px) {
    .mammo26-wrap,
    .mammo26-utility .mammo26-utility-inner,
    .mammo26-header .mammo26-header-inner,
    .mammo26-hero .mammo26-hero-inner,
    .mammo26-stats .mammo26-stats-inner,
    .mammo26-footer .mammo26-footer-inner {
      padding-left: 3em;
      padding-right: 3em;
    }
  }
 
  @media (max-width: 1000px) {
    .mammo26-screening .mammo26-screening-grid,
    .mammo26-why .mammo26-why-grid {
      grid-template-columns: 1fr;
      gap: 2em;
    }
 
    .mammo26-stats .mammo26-stats-inner {
      grid-template-columns: 1fr;
      gap: 1.25em;
    }
 
    .mammo26-stat {
      border-left: none !important;
      padding: 0 !important;
      &:not(:last-child) {
        padding-bottom: 1.25em !important;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
      }
    }
 
    .mammo26-videos .mammo26-video-grid {
      grid-template-columns: 1fr 1fr;
    }
 
    .mammo26-locations .mammo26-location-grid {
      grid-template-columns: 1fr;
    }
  }
 
  @media (max-width: 800px) {
    .mammo26-wrap,
    .mammo26-utility .mammo26-utility-inner,
    .mammo26-header .mammo26-header-inner,
    .mammo26-hero .mammo26-hero-inner,
    .mammo26-stats .mammo26-stats-inner,
    .mammo26-footer .mammo26-footer-inner {
      padding-left: 1.5em;
      padding-right: 1.5em;
    }
 
    .mammo26-hero { min-height: 22em; }
    .mammo26-hero .mammo26-hero-logos img { height: 2.25em; }
 
    .mammo26-header .mammo26-header-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5em;
    }
 
    .mammo26-footer .mammo26-footer-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.625em;
    }
 
    .mammo26-videos .mammo26-video-grid {
      grid-template-columns: 1fr;
    }
 
    .mammo26-screening,
    .mammo26-videos,
    .mammo26-why,
    .mammo26-locations,
    .mammo26-faq {
      padding: 3em 0;
    }
  }
 
  @media (max-width: 600px) {
    .mammo26-hero .mammo26-hero-content { max-width: 100%; }

	.mammo26-hero .mammo26-hero-headline .mammo26-hero-italic {
	font-size: clamp(.9em, 3.5vw, 2.222em);
}

.mammo26-hero .mammo26-hero-headline .mammo26-hero-bold {
	font-size: clamp(1.4em, 5vw, 3.333em);
}

.mammo26-hero-bg {
	object-position: 66%;
}object-position: 66%;
}
  }
}