/* ==================================================================
   NYCBC AI Certification Course — marketing section
   Pairs with the <section class="nai"> block in index.html.

   Image URLs are relative to THIS file (bmc/ots/css/), so they resolve
   correctly no matter which directory the host HTML page lives in.

   Sizes are in px on purpose: Bootstrap 3 sets html{font-size:10px},
   which would shrink any rem-based type inside this section.
   ================================================================== */

/* ---------- scoped reset ---------- */
.nai, .nai *, .nai *:before, .nai *:after { box-sizing: border-box; }

.nai {
  --nai-navy:   #101a46;
  --nai-ink:    #26305c;
  --nai-blue:   #1b8fbf;
  --nai-grad:   linear-gradient(95deg, #2d6cf6 0%, #7b3ff2 100%);
  --nai-pale:   #f5f7fd;
  --nai-font:   'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  position: relative;
  font-family: var(--nai-font);
  font-size: 17px;          /* absolute: host sets html{font-size:10px} */
  color: var(--nai-ink);
  line-height: 1.7;
  overflow: hidden;

  /* large screens: never let the section span more than 1500px */
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;

  /* One image, scaled to the section's own width and anchored top, so the
     hero and the top of the body read as a single continuous picture at
     every width. (Was background-attachment:fixed, which anchors to the
     viewport and would crop unpredictably now that the box is capped.) */
  background-color: var(--nai-pale);
}

/* The artwork, scaled to the section width and faded out along its own
   bottom edge so it never leaves a visible seam against the flat ground. */
.nai:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1536 / 864;      /* header.jpg's native ratio */
  background: url('../img/header.jpg') center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 75%, rgba(0,0,0,0) 100%);
  z-index: 0;
}

/* ---------- hero ---------- */
.nai-hero {
  position: relative;
  z-index: 1;
  padding: 70px 20px 112px;
  background: linear-gradient(100deg,
              rgba(245,247,253,0.97) 0%,
              rgba(245,247,253,0.94) 34%,
              rgba(245,247,253,0.55) 56%,
              rgba(245,247,253,0.05) 76%,
              rgba(245,247,253,0)    100%);
}

.nai-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.nai-hero-copy { max-width: 830px; }

.nai-logo {
  display: block;
  height: 132px;
  width: auto;
  margin: 0 0 26px -6px;
  filter: drop-shadow(0 2px 10px rgba(16,26,70,0.14));
}

.nai-title { margin: 0; }

.nai-title-thin,
.nai-title-bold {
  display: block;
  color: var(--nai-navy);
  text-transform: uppercase;
  line-height: 1.02;
}

.nai-title-thin {
  font-size: clamp(36px, 6.4vw, 72px);
  font-weight: 300;
  letter-spacing: 0.005em;
}

.nai-title-bold {
  font-size: clamp(27px, 4.6vw, 53px);
  font-weight: 700;
  letter-spacing: 0.004em;
  margin-top: 0.12em;
}

.nai-tagline {
  margin: 0.9em 0 0;
  font-size: clamp(17px, 1.75vw, 21px);
  font-weight: 500;
  color: var(--nai-ink);
  letter-spacing: 0.005em;
}

/* ---------- body ---------- */
.nai-body {
  position: relative;
  z-index: 1;
  padding: 0 20px 84px;
  /* readability wash — the artwork still reads through it up top */
  background-color: rgba(246,248,253,0.88);
}

.nai-body-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* video sits at the top of the body block, half-overlapping the hero */
.nai-video {
  position: relative;
  margin: -58px 0 46px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #0b1030;
  box-shadow: 0 22px 50px rgba(16,26,70,0.28);
}
.nai-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

.nai-body h2 {
  font-family: var(--nai-font);
  font-size: clamp(24px, 2.9vw, 32px);
  font-weight: 700;
  color: var(--nai-navy);
  margin: 0 0 18px;
  line-height: 1.25;
}

.nai-body h3 {
  font-family: var(--nai-font);
  font-size: clamp(19px, 2vw, 21px);
  font-weight: 700;
  color: var(--nai-navy);
  margin: 0 0 10px;
  line-height: 1.3;
}

.nai-body p {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 400;
}

.nai-lead {
  font-size: 19px !important;
  font-weight: 500;
}

.nai-rule {
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--nai-grad);
  margin: 0 0 26px;
}

/* two-part cards */
.nai-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 34px 0 38px;
}
.nai-part {
  flex: 1 1 320px;
  background: #fff;
  border: 1px solid rgba(16,26,70,0.09);
  border-top: 4px solid transparent;
  border-image: var(--nai-grad) 1;
  border-radius: 4px;
  padding: 26px 26px 8px;
  box-shadow: 0 10px 26px rgba(16,26,70,0.07);
}
.nai-part-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nai-blue);
  margin-bottom: 8px;
}
.nai-part p { font-size: 16.5px; }

/* call to action */
.nai-cta {
  margin-top: 8px;
  padding: 34px 30px;
  border-radius: 6px;
  background: var(--nai-grad);
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 38px rgba(45,108,246,0.28);
}
.nai-cta p {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 22px;
}
.nai-price { font-weight: 700; white-space: nowrap; }

.nai-btn {
  display: inline-block;
  padding: 15px 42px;
  background: #fff;
  color: #2d6cf6 !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 40px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nai-btn:hover,
.nai-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(11,16,48,0.22);
  color: #7b3ff2 !important;
}

/* keep the bold line unbroken on wide screens, as in the layout sample */
@media (min-width: 992px) {
  .nai-title-bold { white-space: nowrap; }
}

/* ==================================================================
   HOST-PAGE OVERRIDES
   ------------------------------------------------------------------
   text-align is an INHERITED property, so a `text-align: center` on any
   ancestor container in the site's own stylesheet cascades into this
   section and centres everything. These declarations state the intended
   alignment explicitly so nothing upstream can win.

   !important is used deliberately here: we cannot see the host
   stylesheet's selector specificity, and an id-based rule such as
   `#content p { text-align: center }` would otherwise beat these.

   The centred elements below are centred BY DESIGN — they are declared
   here too so a host rule forcing left alignment cannot break them.
   ================================================================== */

.nai,
.nai-hero-copy,
.nai-title,
.nai-title-thin,
.nai-title-bold,
.nai-tagline,
.nai-body h2,
.nai-body h3,
.nai-body p,
.nai-lead,
.nai-part,
.nai-part-label,
.nai-part h3,
.nai-part p {
  text-align: left !important;
}

/* intentionally centred */
.nai-cta,
.nai-cta p {
  text-align: center !important;
}

/* the rule under the heading is a block, not text — keep it flush left */
.nai-rule {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  /* the width-fitted image is too short to fill a phone hero, so give the
     hero its own cover-cropped copy instead */
  .nai { background-color: var(--nai-pale); }
  .nai:before { display: none; }
  .nai-hero {
    background:
      linear-gradient(180deg,
        rgba(245,247,253,0.86) 0%,
        rgba(245,247,253,0.80) 45%,
        rgba(245,247,253,0.95) 100%),
      url('../img/header.jpg') center 28% / cover no-repeat;
    text-align: center;
    padding: 52px 20px 74px;
  }

  /* mobile hero is centred by design — restated to beat the
     left-alignment overrides above */
  .nai-hero-copy,
  .nai-title,
  .nai-title-thin,
  .nai-title-bold,
  .nai-tagline {
    text-align: center !important;
  }
  .nai-hero-copy { max-width: 100%; }
  .nai-logo { margin: 0 auto 22px; height: 92px; }
  .nai-body { background-color: rgba(246,248,253,0.96); }
}

@media (max-width: 767px) {
  /* type scales with the screen instead of hitting a hard floor */
  .nai-title-thin { font-size: clamp(30px, 9.4vw, 46px); }
  .nai-title-bold { font-size: clamp(22px, 6.9vw, 34px); }
  .nai-tagline    { font-size: 16.5px; line-height: 1.55; }

  .nai-body h2 { font-size: clamp(23px, 5.9vw, 28px); }
  .nai-body h3 { font-size: 19px; }
  .nai-body p  { font-size: 17px; line-height: 1.75; }
  .nai-lead    { font-size: 18.5px !important; }
  .nai-part p  { font-size: 17px; }

  .nai-hero  { padding: 42px 18px 66px; }
  .nai-logo  { height: 86px; }
  .nai-video { margin: -46px 0 32px; border-radius: 8px; }
  .nai-body  { padding: 0 18px 62px; }

  .nai-parts { gap: 18px; margin: 28px 0 32px; }
  .nai-part  { padding: 22px 20px 6px; }

  .nai-cta   { padding: 28px 22px; }
  .nai-cta p { font-size: 17px; }
  .nai-btn   { display: block; width: 100%; padding: 16px 20px; font-size: 16px; }
}

@media (max-width: 380px) {
  .nai-hero { padding: 34px 15px 58px; }
  .nai-body { padding: 0 15px 54px; }
  .nai-logo { height: 76px; }
}