/* =============================================
   ARTICLES + CASE STUDY (Nest Butler)

   Usage:
   - Elementor template: /elementor-templates/articles-case-study.json
   ============================================= */

.nb-articles-case-study {
  width: 100%;
  color: #000000;
  container-type: inline-size;
  --nb-acs-thumb-height: clamp(220px, 22vw, 300px);
  --nb-acs-grid-gap: 30px;
}

/*
  The Blog page (ID 3776) uses a boxed Elementor container for this section.
  Elementor applies large padding and can also carry height/min-height settings
  that leave a big white gap before the footer on short content.
*/
#articles-case-study {
  --nb-acs-section-pad-bottom: clamp(40px, 4vw, 72px);
  --height: auto;
  --min-height: 0px;
  --padding-bottom: var(--nb-acs-section-pad-bottom);
}

#articles-case-study > .e-con-inner {
  padding-block-end: var(--nb-acs-section-pad-bottom) !important;
}

#articles-case-study .nb-acs-inner {
  --align-items: flex-start;
}

#articles-case-study .nb-acs-cards,
#articles-case-study .nb-acs-cards > .e-con-inner {
  --e-con-grid-template-rows: auto;
  grid-template-rows: auto !important;
  align-content: start !important;
}

.nb-articles-case-study h1,
.nb-articles-case-study h2,
.nb-articles-case-study h3,
.nb-articles-case-study h4,
.nb-articles-case-study h5,
.nb-articles-case-study h6 {
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.elementor-editor-active) .nb-articles-case-study .elementor-widget {
  margin: 0 !important;
}

.nb-articles-case-study .nb-acs-inner,
.nb-articles-case-study .nb-acs-inner > .e-con-inner {
  gap: clamp(24px, 3vw, 56px);
}

.nb-articles-case-study .nb-acs-col,
.nb-articles-case-study .nb-acs-col > .e-con-inner {
  min-width: 0;
}

.nb-articles-case-study .nb-acs-col--case {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  /*
    Visually align the case-study card width with the article cards.
    (Article cards are 2 columns with a column-gap, so each card is slightly narrower.)
  */
  padding-left: clamp(24px, calc(1vw + (var(--nb-acs-grid-gap) / 2)), 30px);
}

/* Keep Loop Grid spacing predictable (Elementor default is 30px) */
.nb-articles-case-study .nb-acs-col--articles > .elementor-widget-loop-grid,
.nb-articles-case-study .nb-acs-col--case > .elementor-widget-loop-grid {
  --grid-column-gap: var(--nb-acs-grid-gap);
  --grid-row-gap: var(--nb-acs-grid-gap);
}

.nb-articles-case-study .nb-acs-heading .elementor-heading-title,
.nb-articles-case-study .nb-acs-col > .elementor-widget-heading .elementor-heading-title,
.nb-articles-case-study .nb-acs-col > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
  margin: 0 0 20px !important;
  font-size: 42px !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
}

.nb-articles-case-study .nb-acs-cards,
.nb-articles-case-study .nb-acs-cards > .e-con-inner {
  display: grid !important;
  gap: clamp(18px, 2.4vw, 40px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.nb-articles-case-study .nb-acs-col--articles .nb-acs-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.nb-articles-case-study .nb-acs-col--case .nb-acs-cards {
  grid-template-columns: 1fr !important;
}

.nb-articles-case-study .nb-acs-card,
.nb-articles-case-study .nb-acs-card > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  width: 100% !important;
  min-width: 0 !important;
}

.nb-articles-case-study .nb-acs-card > .elementor-widget-theme-post-featured-image,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-theme-post-featured-image,
.nb-articles-case-study .nb-acs-card > .elementor-widget-theme-post-featured-image .elementor-widget-container,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-theme-post-featured-image .elementor-widget-container {
  width: 100% !important;
}

.nb-articles-case-study .nb-acs-card > .elementor-widget-image,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-image,
.nb-articles-case-study .nb-acs-card > .elementor-widget-image .elementor-widget-container {
  width: 100% !important;
}

.nb-articles-case-study .nb-acs-card > .elementor-widget-image .elementor-widget-container,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-image .elementor-widget-container {
  position: relative;
  height: var(--nb-acs-thumb-height);
  overflow: hidden;
}

.nb-articles-case-study .nb-acs-card > .elementor-widget-theme-post-featured-image .elementor-widget-container,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-theme-post-featured-image .elementor-widget-container {
  position: relative;
  height: var(--nb-acs-thumb-height);
  overflow: hidden;
}

.nb-articles-case-study .nb-acs-card__image img,
.nb-articles-case-study .nb-acs-card > .elementor-widget-image img,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.nb-articles-case-study .nb-acs-card > .elementor-widget-theme-post-featured-image img,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-theme-post-featured-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.nb-articles-case-study .nb-acs-card__title .elementor-heading-title,
.nb-articles-case-study .nb-acs-card > .elementor-widget-heading .elementor-heading-title,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
  margin: 18px 0 12px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  hyphens: auto;
  text-wrap: balance;
}

.nb-articles-case-study .nb-acs-card__excerpt .elementor-widget-container,
.nb-articles-case-study .nb-acs-card > .elementor-widget-text-editor .elementor-widget-container,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-text-editor .elementor-widget-container {
  max-width: 38ch;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #555555 !important;
  margin: 0 0 18px !important;
}

.nb-articles-case-study .nb-acs-card__excerpt .elementor-widget-container p:last-child {
  margin-bottom: 0;
}

.nb-articles-case-study .nb-acs-button .elementor-button,
.nb-articles-case-study .nb-acs-card > .elementor-widget-button .elementor-button,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 36px !important;
  border-radius: 10px !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #1a1a1a !important;
  background: transparent !important;
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: lowercase !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.nb-articles-case-study .elementor-widget-button .elementor-button-text {
  white-space: nowrap;
}

.nb-articles-case-study .nb-acs-button .elementor-button:hover,
.nb-articles-case-study .nb-acs-button .elementor-button:focus,
.nb-articles-case-study .nb-acs-card > .elementor-widget-button .elementor-button:hover,
.nb-articles-case-study .nb-acs-card > .elementor-widget-button .elementor-button:focus,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-button .elementor-button:hover,
.nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-button .elementor-button:focus {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

@container (max-width: 860px) {
  .nb-articles-case-study .nb-acs-inner,
  .nb-articles-case-study .nb-acs-inner > .e-con-inner {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .nb-articles-case-study .nb-acs-col--case {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 22px;
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  .nb-articles-case-study .nb-acs-inner,
  .nb-articles-case-study .nb-acs-inner > .e-con-inner {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .nb-articles-case-study .nb-acs-col--case {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 22px;
    margin-top: 0;
  }
}

@container (max-width: 520px) {
  .nb-articles-case-study .nb-acs-heading .elementor-heading-title,
  .nb-articles-case-study .nb-acs-col > .elementor-widget-heading .elementor-heading-title,
  .nb-articles-case-study .nb-acs-col > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
    font-size: 32px !important;
  }

  .nb-articles-case-study .nb-acs-col--articles .nb-acs-cards {
    grid-template-columns: 1fr !important;
  }

  .nb-articles-case-study .nb-acs-card__title .elementor-heading-title,
  .nb-articles-case-study .nb-acs-card > .elementor-widget-heading .elementor-heading-title,
  .nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
    font-size: 18px !important;
  }

  .nb-articles-case-study .nb-acs-card__excerpt .elementor-widget-container,
  .nb-articles-case-study .nb-acs-card > .elementor-widget-text-editor .elementor-widget-container,
  .nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-text-editor .elementor-widget-container {
    max-width: 46ch;
  }
}

@media (max-width: 767px) {
  .nb-articles-case-study .nb-acs-heading .elementor-heading-title,
  .nb-articles-case-study .nb-acs-col > .elementor-widget-heading .elementor-heading-title,
  .nb-articles-case-study .nb-acs-col > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
    font-size: 32px !important;
  }

  .nb-articles-case-study .nb-acs-col--articles .nb-acs-cards {
    grid-template-columns: 1fr !important;
  }

  .nb-articles-case-study .nb-acs-card__title .elementor-heading-title,
  .nb-articles-case-study .nb-acs-card > .elementor-widget-heading .elementor-heading-title,
  .nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
    font-size: 18px !important;
  }

  .nb-articles-case-study .nb-acs-card > .e-con-inner > .elementor-widget-text-editor .elementor-widget-container {
    max-width: 46ch;
  }
}

/* Mobile: Increase image height so it doesn't look cut off */
@media (max-width: 767px) {
  .nb-articles-case-study {
    --nb-acs-thumb-height: 280px;
  }
}

/* Tablet: increase featured image height for better visual presence on iPad */
@media (max-width: 1024px) and (min-width: 768px) {
  .nb-articles-case-study {
    --nb-acs-thumb-height: clamp(280px, 35vw, 380px);
  }
}

/* =============================================
   EDITOR MODE CLEANUP
   Keep the layout readable inside Elementor sidebar width.
   ============================================= */

body.elementor-editor-active .nb-articles-case-study .nb-acs-inner {
  gap: 32px !important;
}

body.elementor-editor-active .nb-articles-case-study .nb-acs-cards .elementor-empty-view,
body.elementor-editor-active .nb-articles-case-study .nb-acs-cards .e-grid-outline {
  display: none !important;
}

body.elementor-editor-active .nb-articles-case-study .nb-acs-cards.e-empty {
  min-height: 0 !important;
}

body.elementor-editor-active .nb-articles-case-study .nb-acs-cards,
body.elementor-editor-active .nb-articles-case-study .nb-acs-cards.e-con,
.elementor-edit-mode .nb-articles-case-study .nb-acs-cards,
.elementor-edit-mode .nb-articles-case-study .nb-acs-cards.e-con {
  min-height: 0 !important;
  height: fit-content !important;
  max-height: none !important;
  align-content: start !important;
  place-content: start !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;

  /* Try to neutralize Elementor grid CSS vars if present */
  --e-con-grid-template-rows: auto;
  --e-con-grid-auto-rows: auto;
}

body.elementor-editor-active .nb-articles-case-study .nb-acs-button .elementor-button,
body.elementor-editor-active .nb-articles-case-study .nb-acs-card > .elementor-widget-button .elementor-button {
  padding: 12px 28px !important;
}