/* Newpark Dentistry — about.css
   Loaded by functions.php. See style.css for the full section index. */

/* =============================================================
   37. ABOUT — HERO
   ============================================================= */

.about-intro-row h1 {
  margin-bottom: 20px !important;
}


/* =============================================================
   38. ABOUT — OUR MISSION
   ============================================================= */

.about-mission > .kt-row-column-wrap {
  width: var(--np-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 0 !important;
}

.about-mission > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-mission-content) {
  overflow: hidden !important;
}

.about-mission > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-mission-content) .kt-inside-inner-col,
.about-mission > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-mission-content) figure {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-mission > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-mission-content) img {
  width: 100% !important;
  height: 100% !important;
  min-height: 340px !important;
  object-fit: cover !important;
}

.about-mission-content,
.about-mission-content > .kt-inside-inner-col {
  height: 100% !important;
}

.about-mission-content > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: var(--np-eucalyptus-strong) !important;
  padding: clamp(56px, 6vw, 88px) !important;
}

.about-mission-content h2 {
  margin-bottom: 12px !important;
  color: var(--np-heading) !important;
}

.about-mission-content p {
  margin-bottom: 0 !important;
  color: var(--np-body) !important;
}
/* =============================================================
   39. ABOUT — DR. JON COLEMAN BIO
   Same proven pattern as Mission.
   ============================================================= */

#about-jon > .kt-row-column-wrap {
  width: var(--np-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
  background: var(--np-forest) !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}

#about-jon > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-jon) {
  overflow: hidden !important;
}

#about-jon > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-jon) .kt-inside-inner-col,
#about-jon > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-jon) figure {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#about-jon > .kt-row-column-wrap > .wp-block-kadence-column:not(.about-jon) img {
  width: 100% !important;
  height: 100% !important;
  min-height: 340px !important;
  object-fit: cover !important;
}

.about-jon,
.about-jon > .kt-inside-inner-col {
  height: 100% !important;
  background: transparent !important;
}

.about-jon > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(40px, 4.5vw, 64px) !important;
}

.about-jon h2 {
  margin-bottom: 12px !important;
  color: var(--np-on-dark) !important;
}

.about-jon p {
  margin-bottom: 16px !important;
  color: var(--np-on-dark-muted) !important;
}


/* =============================================================
   40. ABOUT — TOUR OUR OFFICE + LOCATION CTA (merged section)
   "Tour Our" uses body color (not the washed-out muted tone),
   "Office" stays bold/dark. Arrows pushed further outward into
   the gap between the visible slide and the peeking next image.
   ============================================================= */

.about-gallery > .kt-row-column-wrap {
  width: var(--np-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center !important;
  padding-top: clamp(72px, 7vw, 104px) !important;
  padding-bottom: clamp(72px, 7vw, 104px) !important;
}

.about-gallery h2 {
  color: var(--np-body) !important;
  margin-bottom: 4px !important;
}

.about-gallery h2 .accent {
  font-weight: 800 !important;
  font-style: normal !important;
  color: var(--np-heading) !important;
}

.about-gallery > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-paragraph:first-of-type {
  color: var(--np-muted) !important;
  max-width: 520px !important;
  margin-inline: auto !important;
  margin-bottom: 12px !important;
}

.about-gallery .wp-block-kadence-advancedbtn {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

.about-gallery .wp-block-kadence-advancedbtn .kb-button {
  min-width: 240px !important;
}

.about-gallery p a[href^="tel:"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  position: relative !important;
  top: 2px !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
  color: var(--np-forest-deep) !important;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.about-gallery p a[href^="tel:"]:hover {
  color: var(--np-forest) !important;
}

.about-gallery p a[href^="tel:"]::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.npd-gallery img {
  border-radius: 0 !important;
}

.npd-gallery .splide__arrow {
  width: 44px !important;
  height: 72px !important;
  border-radius: 6px !important;
}

.npd-gallery .splide__arrow svg {
  width: 24px !important;
  height: 24px !important;
}

/* Arrows sit further out than the visible slide, in the gap where
   the next/previous slide peeks in -- that's the intended look on
   desktop and tablet, where a peeking slide is actually there
   (Kadence shows 2 columns down to tablet width). See
   responsive.css for the mobile-only override: below 767px the
   gallery drops to a single, edge-to-edge slide with nothing
   peeking, so there's no gap left to float the arrows in, and
   they'd otherwise be clipped by the page's overflow-x: hidden. */
.npd-gallery .splide__arrow--prev {
  left: -60px !important;
}

.npd-gallery .splide__arrow--next {
  right: -60px !important;
}

.npd-gallery .splide__pagination {
  margin-top: 24px !important;
}
/* =============================================================
   40b. ABOUT — TOUR OFFICE STONE BACKGROUND
   Same pattern as patient-resources.css's "What to Expect" tint:
   solid stone color for the first portion of the row, then a
   fade to transparent partway through the gallery below it.
   ============================================================= */

.about-gallery {
  background: linear-gradient(
    to bottom,
    var(--np-stone) 0%,
    var(--np-stone) 60%,
    transparent 60%,
    transparent 100%
  ) !important;
}