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


/* =============================================================
   22. SHARED SERVICE SYSTEM
   Used across Cosmetic / Family & Preventive / Restorative pages.
   ============================================================= */

/* =============================================================
   SERVICE OFFER SECTION
   ============================================================= */

.np-service-card-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  padding-top: clamp(65px, 6vw, 90px) !important;
  padding-bottom: clamp(75px, 7vw, 105px) !important;

  background: var(--np-eucalyptus) !important;
  border-radius: 0 !important;
}


/* -------------------------------------------------------------
   INTRO ROW
   ------------------------------------------------------------- */

.np-service-intro {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  /* Don't remove the section background */
  background: transparent !important;
}


/* Contain the intro content */

.np-service-intro > .kt-row-column-wrap {
  width: min(calc(100% - 44px), 960px) !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Heading */

.np-service-intro .wp-block-heading {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 0 18px !important;
  text-align: center !important;
}


/* Description */

.np-service-intro p {
  display: block !important;
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  margin: 0 auto !important;

  text-align: center !important;
  line-height: 1.7 !important;
}


/* -------------------------------------------------------------
   SERVICE CARDS
   ------------------------------------------------------------- */

.np-service-grid {
  background: transparent !important;
}

.np-service-grid > .kt-row-column-wrap {
  width: min(calc(100% - (var(--np-gutter) * 2)), 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* -------------------------------------------------------------
   SERVICE CARD GRID
   ------------------------------------------------------------- */

.np-service-grid {
  margin-top: 0 !important;
}

.np-service-grid + .np-service-grid {
  margin-top: 28px !important;
  padding-top: 20px !important;
}

.np-service-grid > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: min(calc(100% - (var(--np-gutter) * 2)), 1240px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  gap: clamp(56px, 5.5vw, 76px) !important;
}


/* -------------------------------------------------------------
   SERVICE CARD
   ------------------------------------------------------------- */

.np-service-card {
  min-width: 0 !important;
  min-height: 450px !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--np-forest-deep) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(10, 28, 23, 0.16) !important;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.np-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(10, 28, 23, 0.24) !important;
}


/* Card internal row */

.np-service-card > .kt-inside-inner-col,
.np-service-card > .kt-inside-inner-col > .wp-block-kadence-rowlayout,
.np-service-card
  > .kt-inside-inner-col
  > .wp-block-kadence-rowlayout
  > .kt-row-column-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.np-service-card
  > .kt-inside-inner-col
  > .wp-block-kadence-rowlayout
  > .kt-row-column-wrap {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  gap: 0 !important;
}


/* -------------------------------------------------------------
   SERVICE CARD IMAGE
   ------------------------------------------------------------- */

.np-service-media,
.np-service-media > .kt-inside-inner-col,
.np-service-media figure,
.np-service-media .wp-block-image,
.np-service-media .wp-block-kadence-image {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.np-service-media {
  position: relative !important;
  aspect-ratio: 3 / 2 !important;
  overflow: hidden !important;
  background: var(--np-soft) !important;
  border-radius: 0 !important;
}

.np-service-media > .kt-inside-inner-col,
.np-service-media figure,
.np-service-media .wp-block-image,
.np-service-media .wp-block-kadence-image {
  height: 100% !important;
}

.np-service-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}


/* Subtle green tint */

.np-service-card .np-service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 38, 32, 0.14);
  pointer-events: none;
}


/* -------------------------------------------------------------
   SERVICE CARD COPY
   ------------------------------------------------------------- */

.np-service-copy,
.np-service-copy > .kt-inside-inner-col {
  min-width: 0 !important;
  height: 100% !important;
  background: var(--np-forest-deep) !important;
  border-radius: 0 !important;
}

.np-service-copy > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(20px, 2vw, 28px) !important;
}

.np-service-copy h2,
.np-service-copy h3,
.np-service-copy .wp-block-heading {
  margin: 0 0 10px !important;
  color: var(--np-white) !important;
  font-size: clamp(1.1875rem, 1.12rem + 0.22vw, 1.3125rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.np-service-copy p {
  margin: 0 !important;
  color: var(--np-on-dark-muted) !important;
  font-size: var(--np-body-size) !important;
  line-height: 1.55 !important;
}


/* -------------------------------------------------------------
   LEARN MORE
   No underline. Hover changes color and moves arrow.
   ------------------------------------------------------------- */
.np-service-copy p:last-child {
  margin-top: auto !important;
}

.np-service-copy p:last-child a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--np-white) !important;
  font-size: var(--np-body-size) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 180ms ease !important;
}

.np-service-copy p:last-child a:hover {
  color: var(--np-forest-light) !important;
  text-decoration: none !important;
}

.np-service-copy p:last-child a:focus-visible {
  color: var(--np-forest-light) !important;
  outline: 2px solid var(--np-forest-light) !important;
  outline-offset: 4px !important;
}

.np-service-copy p:last-child a::after {
  content: "→";
  display: inline-block;
  transition: transform 180ms ease !important;
}

.np-service-copy p:last-child a:hover::after {
  transform: translateX(4px);
}


/* -------------------------------------------------------------
   DETAILED SERVICE SECTIONS
   ------------------------------------------------------------- */

.np-service-section {
  padding-top: clamp(54px, 5vw, 70px) !important;
  padding-bottom: clamp(54px, 5vw, 70px) !important;
  border-top: 1px solid var(--np-line-strong) !important;
}

.np-service-section > .kt-row-column-wrap {
  width: min(calc(100% - (var(--np-gutter) * 2)), 880px) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.np-service-section h2 {
  margin: 0 0 18px !important;
  color: var(--np-heading) !important;
}

.np-service-section h3 {
  margin: 26px 0 8px !important;
  color: var(--np-forest) !important;
  font-size: clamp(1.125rem, 1.06rem + 0.2vw, 1.3125rem) !important;
  line-height: 1.25 !important;
}

.np-service-section p,
.np-service-section li {
  max-width: none !important;
  color: var(--np-body) !important;
  font-size: var(--np-body-size) !important;
  line-height: 1.65 !important;
}

.np-service-section p {
  margin-bottom: 14px !important;
}

.np-service-section ul,
.np-service-section ol {
  margin: 10px 0 18px !important;
  padding-left: 24px !important;
}


/* =============================================================
   23. SHARED SERVICE FAQ
   ============================================================= */

.np-faq-wrapper {
  width: min(100%, 820px) !important;
  margin: 50px auto 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: var(--np-shadow-soft) !important;
  background: var(--np-white) !important;
}

.np-faq-wrapper h3,
.np-faq-wrapper .wp-block-heading {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: var(--np-forest) !important;
  color: var(--np-white) !important;
  font-size: clamp(1.0625rem, 1rem + 0.16vw, 1.1875rem) !important;
  border-radius: 0 !important;
}

.np-faq-wrapper > .np-service-faq {
  width: 100% !important;
  margin: 0 !important;
}

.np-service-faq .kt-accordion-inner-wrap {
  display: grid !important;
  gap: 0 !important;
  border: 0 !important;
}

.np-service-faq .kt-accordion-pane {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.np-service-faq .kt-accordion-header-wrap {
  margin: 0 !important;
}

.np-service-faq .kt-blocks-accordion-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  background: var(--np-eucalyptus) !important;
  color: var(--np-heading) !important;
  border: 0 !important;
  border-top: 1px solid var(--np-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--np-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.np-service-faq .kt-blocks-accordion-header:hover,
.np-service-faq .kt-blocks-accordion-header:focus-visible {
  background: var(--np-eucalyptus-strong) !important;
  color: var(--np-forest-deep) !important;
}

.np-service-faq .kt-blocks-accordion-header.kt-accordion-panel-active,
.np-service-faq .kt-blocks-accordion-header[aria-expanded="true"] {
  background: var(--np-forest-light) !important;
  color: var(--np-forest-deep) !important;
}

.np-service-faq .kt-blocks-accordion-icon-trigger {
  flex: 0 0 18px !important;
  margin-left: 14px !important;
  color: var(--np-forest-deep) !important;
}

.np-service-faq .kt-accordion-panel,
.np-service-faq .kt-accordion-panel-inner {
  background: var(--np-white) !important;
}

.np-service-faq .kt-accordion-panel {
  margin: 0 !important;
  border: 0 !important;
}

.np-service-faq .kt-accordion-panel-inner {
  margin: 0 !important;
  padding: 16px 18px 18px !important;
  border: 0 !important;
}

.np-service-faq .kt-accordion-panel-inner p {
  margin: 0 !important;
  color: var(--np-body) !important;
  font-size: var(--np-body-size) !important;
  line-height: 1.62 !important;
}