/* =====================================================================
   NACD Responsive — mobile-first, token-driven
   ---------------------------------------------------------------------
   Rewritten from the old max-width-only approach. Values reference
   tokens from tokens.css so breakpoint spacing is centralized.

   The --page-gutter token already shifts at 768px and 1024px via
   tokens.css, so container gutters are handled there — no need to
   repeat gutter rules here.
   ===================================================================== */

/* =================================================================
   TABLET AND BELOW (≤ 991px) — page-specific reflows
   ================================================================= */
@media (max-width: 991px) {
  /* ---- Contact page ---- */
  .contact-page-you-find-stones {
    margin-inline-start: 0;
  }
  .lawsAndLegislations .laws-section {
    padding: 0;
  }
  .contact-we-pleased-content .three-lines {
    margin-inline-end: 0;
  }
  .contact-deatils li:first-child::before,
  .contact-deatils li:last-child::before {
    display: none;
  }
  .do-you-find {
    padding: var(--space-5) var(--space-4);
    gap: var(--space-2);
  }

  /* ---- Letter of President ---- */
  .letterOfPresident .page-header-icon {
    display: none;
  }

  div.parent-div {
    padding: var(--space-4);
  }

  /* ---- Logo scales down ---- */
  .logo {
    width: 38%;
  }

  .about-title {
    font-size: var(--fs-h2);
  }

  /* ---- About diploma page ---- */
  .page-about-diploma {
    padding: var(--space-5);
  }
  .program-goals {
    padding: var(--space-5);
  }
  .deploma-stages {
    padding: 0;
  }
  .page-about-diploma .card-two {
    margin: 0;
    margin-top: var(--space-6);
  }
  .documents-required-container {
    width: 100%;
  }

  /* ---- Home slider ---- */
  .home-slider .carousel-caption h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-snug);
  }
  .carousel-control-con {
    bottom: var(--space-3);
  }
  .home-slider-prev,
  .home-slider-next {
    width: 30px;
    height: 30px;
    display: flex;
  }
  .home-slider-separator {
    height: 30px;
  }

  /* ---- Footer top CTA ---- */
  .footer-top h6 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-surface);
  }
  .footer-top .footer-top-btn a {
    font-size: var(--fs-h4);
    border-radius: var(--radius-pill);
    gap: var(--space-3);
    white-space: nowrap;
  }

  /* ---- Home video ---- */
  .home-video-container {
    height: 300px;
  }
  .home-video-container .home-video-cover-content {
    gap: var(--space-7);
  }
  .home-video-container .home-video-cover-content .video-title {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
  }
  .home-video-container .home-video-cover-content .play-icon {
    width: 100px;
    height: auto;
  }

  /* ---- Card links (discover programs) ---- */
  .card-links-content img {
    margin-bottom: 0;
    height: 120px;
  }
  .card-links-content {
    padding: var(--space-4);
    height: auto;
  }
  .card-links .card-title {
    margin-top: var(--space-4);
    font-size: var(--fs-h4);
  }

  /* ---- Easy contact ---- */
  #home-easy-contact .contact-with-ease {
    flex-direction: column;
  }
  #home-easy-contact .contact-with-ease h4 {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
  }

  /* ---- Section headers ---- */
  .section-header .section-title h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
  }
  .section-header .section-more-link {
    font-size: var(--fs-h4);
  }
  .section-header-icon {
    width: 40px;
  }
  .section-header {
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
  }
  .section-header .section-desc {
    flex: 0 0 100%;
  }

  /* ---- Page header ---- */
  .page-header .page-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    padding-bottom: var(--space-3);
  }
  .page-header .page-header-icon {
    margin-inline-start: 0;
    width: 50px;
  }

  /* ---- Card spacing ---- */
  .card-two {
    margin-bottom: var(--space-5);
  }
  .text-section {
    padding: 0 var(--space-4) var(--space-8);
  }

  /* ---- Discover programs ---- */
  #home-discover-programs h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
  }
  .home-discover-programs-header {
    background-image: none;
  }

  /* ---- Category list stacks on mobile ---- */
  .category-list {
    gap: 0;
    flex-direction: column;
  }
  .category-list li a {
    width: 100%;
  }

  /* ---- Partners decorative shapes ---- */
  .page-template-page-partners .custom-box {
    background-size: 0%;
  }
  .page-template-page-partners .img1 {
    top: 17%;
    inset-inline-start: var(--space-3);
  }
  .page-template-page-partners .img2 {
    width: 0;
    height: 0;
  }
  .page-template-page-about .img1 {
    top: 17%;
    inset-inline-start: var(--space-3);
  }

  /* ---- Children cards ---- */
  .children-card-container {
    padding-top: 140px;
  }
  .children-card {
    flex-wrap: wrap;
    background-image: none;
  }
  .children-card-shape {
    inset-inline-start: 0;
  }
  .children-card-container.caregivers .children-card-image {
    order: -1;
  }
  .children-card-container.caregivers .children-card-shape {
    inset-inline-start: 0;
    inset-inline-end: inherit;
  }

  /* ---- Job application form accordion ---- */
  #jobApplicationForm .accordion-header::before {
    width: 30px;
    height: 30px;
    font-size: var(--fs-xs);
    margin-inline-start: -42px;
  }
  #jobApplicationForm .accordion-item::before {
    width: 3px;
    margin: 0 var(--space-3);
    min-height: 65px;
  }
  #jobApplicationForm .accordion-header:has(.collapsed)::before {
    font-size: var(--fs-h4);
  }
  #jobApplicationForm .accordion-button {
    height: 32px;
    font-size: var(--fs-h4);
  }
  #jobApplicationForm .accordion-body {
    margin-inline-start: 0;
  }
  #jobApplicationForm .prev-btn,
  #jobApplicationForm .wpcf7-submit,
  #jobApplicationForm .next-btn {
    font-size: var(--fs-small);
  }

  /* ---- About diploma list items ---- */
  .page-about-diploma .list-unstyled.mt-5.px-5 {
    padding-inline: 0 !important;
  }
  .page-about-diploma .list-item {
    width: 100%;
  }
  .page-about-diploma .list-item::before {
    display: none;
  }

  /* ---- About page vision/message ---- */
  .page-about .vision-section,
  .page-about .message-section {
    padding: var(--space-5);
  }

  /* ---- Footer: stack columns on tablet/phone ---- */
  footer .row > [class*="col-"] {
    margin-block-end: var(--space-6);
  }
  footer .row > [class*="col-"]:last-child {
    margin-block-end: 0;
  }
  .footer-bottom {
    margin-block-start: var(--space-5);
  }
  .copy-rights {
    margin-block-start: var(--space-5);
  }
  .section-header .section-title h2{
    font-size: 32px !important;
  }
  .img-fluid{
    display: none;
  }
  .breadcrumbs a{
    font-size: 16px;
  }
}

/* =================================================================
   PHONE (≤ 768px) — tighter spacing
   ================================================================= */
@media (max-width: 768px) {
  .logo {
    width: 50%;
  }

  /* Card links center on phone */
  .card-links-content {
    width: 250px;
  }

  /* Testimonial cards: single uniform height (was conflicting across 3 breakpoints) */
  .testimonial-card {
    height: auto;
    min-height: 300px;
  }
  .testimonial-body {
    height: auto;
    min-height: 200px;
  }
  .testimonial-body p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }

  /* Hide decorative background images on benefit cards in mobile view */
  .benefit-card,
  .benefit-card[data-bg-image] {
    background-image: none !important;
    background-size: 0;
  }
}

/* =================================================================
   ≤ 1100px — hide desktop nav, show hamburger
   ================================================================= */
@media (max-width: 1100px) {
  .main-menu {
    display: none;
  }
  .header-container {
    justify-content: space-between;
    gap: var(--space-4);
  }
  .logo-container {
    flex: 1;
  }
  .menu-toggle{
    display :block;
  }
}

/* =================================================================
   ≤ 1280px — hide evaluation stages icons
   ================================================================= */
@media (max-width: 1280px) {
  .stages-icon {
    display: none;
  }
}

/* =================================================================
   ≤ 912px — evaluation stages stack vertically
   ================================================================= */
@media (max-width: 912px) {
  .container-evaluation-stages {
    flex-direction: column;
    align-items: stretch;
  }
  .container-evaluation-stages .card-evaluation-stages {
    width: 100%;
  }
}

/* =================================================================
   DESKTOP (≥ 1024px) — restore larger testimonial height
   Single rule replaces the old 3 conflicting breakpoints.
   ================================================================= */
@media (min-width: 1024px) {
  .testimonial-card {
    min-height: 350px;
  }
  .testimonial-body {
    min-height: 250px;
  }
  .testimonial-body p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
  }
  .benefit-card {
    background-image: none;
  }
}