/**
 * 6 Columns Content Block Styles
 * Based on the about-values section from about.html
 */

/* =================================================================
   MAIN BLOCK CONTAINER - unified background effect matching text-4-columns-block
   ================================================================= */

.columns-6-content-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 100px 80px 80px;
  /* Base light teal background - unified with text-4-columns-block */
  background: #E9F7F8;
}

/* Optional flat fill from ACF - using unified light teal color */
.columns-6-content-block--bg-soft {
  background: #E9F7F8;
}

/* When textured background is on: unified effect matching text-4-columns-block */
.columns-6-content-block--has-bg {
  position: relative;
  overflow: hidden;
  background: #E9F7F8;
  isolation: isolate;
}

/* Light teal tinted background with texture - unified effect across all blocks */
.columns-6-content-block__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.columns-6-content-block__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24; /* Unified opacity with text-4-columns-block */
  max-width: none;
  transform-origin: center center;
}

/* =================================================================
   HEADER SECTION - matches .about-values-header
   ================================================================= */

.columns-6-content-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1056px;
  text-align: center;
}

/* Section label with icon — same as .our-brands-home-header / global .home-section-label.
   Anchor on .columns-6-content-block so nested span color wins over generic .entry-content / plugin resets. */
.columns-6-content-block .columns-6-content-header .home-section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Label crown: theme .es-icon-titles */

.columns-6-content-block .columns-6-content-header .home-section-label span {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  /* !important beats aggressive theme/editor rules that force body grey on all spans */
  color: #0097a7 !important;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =================================================================
   CARDS GRID - matches .about-values-grid
   ================================================================= */

.columns-6-content-grid {
  position: relative;
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
}

/* =================================================================
   INDIVIDUAL CARD - matches .about-values-card
   ================================================================= */

.columns-6-content-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 40px 24px;
}

/* Card icon - matches .about-values-card-icon */
.columns-6-content-card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.columns-6-content-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Card description - matches .about-values-card-text */
.columns-6-content-card-text {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--smith-grey, #333);
}

/* =================================================================
   CTA BUTTON - matches other block CTAs (cta-hero, cta-two-columns, etc.)
   ================================================================= */

/* CTA wrapper for centering */
.columns-6-content-cta-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* CTA Button: orange primary button per theme */
.columns-6-content-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 8px 32px;
  border-radius: 8px;
  /* Ensure button renders above background effect with isolation/z-index */
  position: relative;
  z-index: 1;
  background-color: var(--btn-primary-rest, #ff6b35);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.columns-6-content-cta:hover {
  background-color: var(--btn-primary-hover, #e55a2b);
  box-shadow: 0px 6px 14px rgba(1, 13, 20, 0.1);
}

.columns-6-content-cta:active {
  background-color: var(--btn-primary-pressed, #cc4a1f);
  box-shadow: none;
}

.columns-6-content-cta:focus-visible {
  outline: 2px solid var(--btn-primary-pressed, #cc4a1f);
  outline-offset: 2px;
}

/* =================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================= */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .columns-6-content-block {
    padding: 64px 32px;
    gap: 40px;
  }

  .columns-6-content-grid {
    flex-wrap: wrap;
  }

  .columns-6-content-card {
    flex: 1 1 calc(50% - 12px);
    min-width: 280px;
    padding: 32px 24px;
  }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
  .columns-6-content-block {
    padding: 48px 20px;
    gap: 32px;
  }

  .columns-6-content-grid {
    flex-direction: column;
    gap: 16px;
  }

  .columns-6-content-card {
    flex: 1 1 100%;
    min-width: auto;
    padding: 24px;
  }
}

/* Align with global style.css: slightly smaller label text on very small viewports */
@media (max-width: 480px) {
  .columns-6-content-block .columns-6-content-header .home-section-label span {
    font-size: 14px;
  }
}