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

/* =============================================================
   32. RESPONSIVE — NARROW DESKTOP / BROWSER ZOOM
   ============================================================= */

@media (min-width: 1025px) and (max-width: 1320px) {
  .site-main-header-wrap .site-container,
  .site-main-header-wrap .site-header-row-container-inner > .site-container {
    padding-inline: 18px !important;
  }

  .site-header-main-section-left {
    gap: 16px !important;
  }

  .site-header-main-section-right {
    gap: 10px !important;
  }

  .main-navigation .primary-menu-container > ul {
    gap: 12px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .site-header-main-section-right .header-html,
  .site-header-main-section-right .header-html-inner,
  .header-contact-stack {
    display: none !important;
  }
}

@media (min-width: 1025px) and (max-width: 1130px) {
  .site-header-main-section-left {
    gap: 12px !important;
  }

  .main-navigation .primary-menu-container > ul {
    gap: 10px !important;
  }

  #masthead .header-button,
  #masthead .header-button-inner-wrap a,
  #masthead .site-header-main-section-right a.button {
    padding-inline: 14px !important;
  }
}


/* =============================================================
   33. RESPONSIVE — TABLET
   ============================================================= */

@media (max-width: 1024px) {
  :root {
    --np-section-space: 56px;
    --np-gutter: clamp(22px, 4vw, 34px);
  }

  /* Tablet hero: same dvh-based approach as desktop (see hero.css),
     just with bounds tuned for a tablet-sized screen instead of a
     fixed 440px. */
  .np-hero {
    height: 66vh !important;
    height: clamp(460px, 66dvh, 700px) !important;
    min-height: 66vh !important;
    min-height: clamp(460px, 66dvh, 700px) !important;
  }

  .np-hero > .kt-row-column-wrap {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .np-service-grid > .kt-row-column-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(calc(100% - (var(--np-gutter) * 2)), 760px) !important;
    gap: 28px !important;
  }

  .np-service-card {
    min-height: 450px !important;
  }

  .patient-resource-nav > .kt-row-column-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .patient-expect-row > .kt-row-column-wrap,
  .patient-resources-special > .kt-row-column-wrap,
  .before-visit-content-row > .kt-row-column-wrap,
  .patient-payment-options > .kt-row-column-wrap,
  .contact-main-row > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
  }

  /* The two vertical divider lines in Insurance & Payment are
     positioned assuming a 2-column layout (a line down the
     middle). Once that section stacks to one column above, those
     lines would otherwise cut straight across the stacked text. */
  .patient-payment-options > .kt-row-column-wrap::before,
  .patient-payment-options > .kt-row-column-wrap::after {
    display: none !important;
  }

  .np-split-media {
    min-height: 330px !important;
  }

  .patient-paperwork-copy {
    border-left: 0 !important;
    border-top: 1px solid rgba(23, 61, 52, 0.12) !important;
  }

  .patient-payment-options > .kt-row-column-wrap {
    gap: 22px !important;
  }

  .contact-main-row > .kt-row-column-wrap {
    gap: 38px !important;
  }

  .contact-map {
    min-height: 380px !important;
    height: 380px !important;
  }

  .preferred-day-field .kb-radio-check-item-wrap {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .time-preference-field .kb-radio-check-item-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .site-footer-wrap .site-footer-row-columns-4,
  .site-footer-wrap .site-top-footer-inner-wrap.site-footer-row-columns-4,
  .site-footer-wrap .site-middle-footer-inner-wrap.site-footer-row-columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 30px !important;
  }
}


/* =============================================================
   34. RESPONSIVE — MOBILE
   ============================================================= */

@media (max-width: 767px) {
  :root {
    --np-gutter: 20px;
    --np-section-space: 48px;
  }

  /* At this width the office-tour gallery drops to a single,
     edge-to-edge slide (no peeking next/previous image), so
     there's no gap left for the arrows to float in the way they
     do on desktop/tablet -- floating them out there here would
     just get clipped off-screen. Pull them just inside the image
     edge instead so they stay visible and tappable. */
  .npd-gallery .splide__arrow--prev {
    left: 8px !important;
  }

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

  /* Phone hero: still a percentage of the screen (never a fixed
     px), but a slightly larger share (60%) than desktop since
     phone content sections are simpler and a too-short hero on a
     phone reads as cramped. The floor/ceiling keep it from ever
     getting unusably short (very small phones) or absurdly tall
     (phones held sideways / landscape). */
  .np-hero {
    height: 68vh !important;
    height: clamp(440px, 68dvh, 640px) !important;
    min-height: 68vh !important;
    min-height: clamp(440px, 68dvh, 640px) !important;
  }

  .np-hero h1 {
    font-size: clamp(2.125rem, 9vw, 2.5rem) !important;
  }

  .np-hero p {
    font-size: 1.0625rem !important;
  }

  .np-service-hero + .wp-block-kadence-rowlayout {
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }

  .np-service-grid {
    padding-top: 16px !important;
    padding-bottom: 30px !important;
  }

  .np-service-grid > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
    width: min(calc(100% - (var(--np-gutter) * 2)), 420px) !important;
    gap: 22px !important;
  }

  .np-service-card {
    min-height: 0 !important;
  }

  .np-service-copy > .kt-inside-inner-col {
    padding: 20px !important;
  }

  .np-service-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .np-service-section h3 {
    margin-top: 22px !important;
  }

  .np-service-faq .kt-blocks-accordion-header {
    min-height: 56px !important;
    padding: 13px 15px !important;
    font-size: 0.9375rem !important;
  }

  .np-service-faq .kt-accordion-panel-inner {
    padding: 15px !important;
  }

  .patient-resource-nav {
    margin-top: -28px !important;
    padding-bottom: 44px !important;
  }

  .patient-resource-nav > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .patient-resource-link {
    height: 112px !important;
  }

  .patient-resource-link > .kt-inside-inner-col {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    grid-template-rows: 112px !important;
  }

  .patient-resource-link p {
    min-height: 112px !important;
    justify-content: flex-start !important;
    padding: 14px 16px !important;
    text-align: left !important;
  }

  .np-split-media {
    min-height: 290px !important;
  }

  .patient-expect-content > .kt-inside-inner-col,
  .patient-special-content > .kt-inside-inner-col {
    padding: 30px 24px !important;
  }

  .before-visit-intro > .kt-inside-inner-col {
    padding: 20px 0 22px !important;
  }

  .before-visit-checklist > .kt-inside-inner-col,
  .patient-paperwork-copy > .kt-inside-inner-col {
    padding: 30px 24px !important;
  }

  .new-patient-special-items {
    grid-template-columns: 1fr !important;
  }

  .patient-insurance-overview > .kt-inside-inner-col,
  .patient-payment-plans > .kt-inside-inner-col {
    padding: 30px 24px !important;
  }

  .contact-main-row {
    padding-top: 48px !important;
    padding-bottom: 58px !important;
  }

  .contact-office-grid > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-map {
    min-height: 330px !important;
    height: 330px !important;
  }

  .contact-form-column > .kt-inside-inner-col {
    padding: 26px 20px 28px !important;
  }

  .contact-name-row > .kt-row-column-wrap {
    grid-template-columns: 1fr !important;
  }

  .preferred-day-field .kb-radio-check-item-wrap,
  .time-preference-field .kb-radio-check-item-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }

  .payment-page {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }

  .payment-info {
    padding: 28px 22px !important;
  }

  .site-footer-wrap .site-footer-row-columns-4,
  .site-footer-wrap .site-top-footer-inner-wrap.site-footer-row-columns-4,
  .site-footer-wrap .site-middle-footer-inner-wrap.site-footer-row-columns-4 {
    grid-template-columns: 1fr !important;
    row-gap: 28px !important;
  }
}
@media (max-width: 767px) {
  .home-doctor-row > .kt-row-column-wrap {
    max-height: none !important;
    grid-template-columns: 1fr !important;
  }
  .home-doctor-row > .kt-row-column-wrap > .wp-block-kadence-column:not(.home-doctor-content) img {
    max-height: 320px !important;
  }
}


/* =============================================================
   35. VERY SMALL SCREENS
   ============================================================= */

@media (max-width: 420px) {
  :root {
    --np-gutter: 18px;
  }

  .np-hero h1 {
    font-size: 2.125rem !important;
  }

  .preferred-day-field .kb-radio-check-item-wrap,
  .time-preference-field .kb-radio-check-item-wrap {
    grid-template-columns: 1fr 1fr !important;
  }
}