/**
 * block-flex-section.css
 * Styles for block-flex-section.php — HNG Capital reusable content block.
 *
 * Covers:
 *  - Outer box toggle (dark transparent wrapper)
 *  - Layout A: side-by-side (text + image in a row)
 *  - Layout B: below (text top, then video / single image / image grid)
 *  - 4-column image grid with automatic row wrapping
 *  - Single image with header + caption
 *  - Video with custom play button overlay
 *  - WYSIWYG scoped styles (won't bleed globally)
 *  - CTA button
 *  - Responsive breakpoints
 *
 * Override brand tokens at the bottom to match your theme.
 */

/* ── LOCAL ALIASES → global tokens from hng-global.css ──────
   block-content.css references the global system exclusively.
   Do not hardcode these values — update hng-global.css instead.
────────────────────────────────────────────────────────────── */
.flex-section {
  --cb-orange: var(--hng-orange, #f58220);
  --cb-orange-light: var(--hng-orange-light, #f9a55a);
  --cb-white: var(--hng-white, #ffffff);
  --cb-img-radius: var(--radius-image, 40px);
  --cb-gap: var(--hng-col-gap, clamp(1.25rem, 3vw, 2.5rem));
  --cb-transition: var(--hng-transition, 0.25s ease);
}

/* ── OUTER WRAP ───────────────────────────────────────────── */
/* Provides the padding/margin breathing room around each block */
.flex-section-wrap {
  width: 100%;
  margin-bottom: 8%;
}

/* ── BASE BLOCK ───────────────────────────────────────────── */
.flex-section {
  position: relative;
  width: 100%;
  /* padding: clamp(1.5rem, 6vw, 6rem); */
}

/* No outer box: strip padding, keep block gap */
.flex-section--no-box {
  padding: 0;
}

.flex-section--single-image,
.flex-section--below-video {
  padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT A — SIDE BY SIDE
   Text on the left, single image on the right.
   Image 1 (Legacy. Evolve) is an example of this layout.
════════════════════════════════════════════════════════════ */
.flex-section__inner--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cb-gap);
  /* align-items: center; */
}

/* Alternating layout — image left, text right */
.flex-section--alt .flex-section__inner--row .flex-section__media--side {
  order: -1;
}

/* On narrower screens the two columns stack (order irrelevant) */
@media (max-width: 768px) {
  .flex-section__inner--row {
    grid-template-columns: 1fr;
  }
  .flex-section--alt .flex-section__inner--row .flex-section__media--side {
    order: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   LAYOUT B — BELOW
   Text block on top, media (video or images) below.
   Images 2, 3, 4, 5, 6 use this layout.
════════════════════════════════════════════════════════════ */
.flex-section__inner--col {
  display: flex;
  flex-direction: column;
  gap: var(--cb-gap);
}

/* ── TEXT AREA ────────────────────────────────────────────── */
.flex-section__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── HEADER (H2 per design spec — primary block heading) ──── */
.flex-section__header {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h2-size, clamp(2.25rem, 4.5vw, 3.625rem));
  line-height: 1.1;
  color: var(--cb-orange);
  margin: 0;
}

/* ── HEADER DESCRIPTION ──────────────────────────────────── */
/* Introductory paragraph directly below the orange header */
.flex-section__header-desc {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  color: var(--cb-white);
  line-height: 1.7;
  margin: 0;
}

/* ── SUB-HEADER ───────────────────────────────────────────── */
/* Bold line between header and body — Images 5, 6 */
.flex-section__subheader {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 600 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h3-size, clamp(1.5rem, 2.5vw, 1.875rem));
  color: var(--cb-white);
  margin: 0;
  line-height: 1.3;
}

/* ── WYSIWYG BODY ─────────────────────────────────────────── */
.flex-section__body.wysiwyg-content {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  color: var(--hng-white, #ffffff);
  line-height: 1.7;
  margin: 0;
}

.flex-section__body.wysiwyg-content p {
  margin: 0 0 0.85em;
}
.flex-section__body.wysiwyg-content p:last-child {
  margin-bottom: 0;
}
.flex-section__body.wysiwyg-content a {
  color: var(--cb-orange-light);
  text-decoration: underline;
}
.flex-section__body.wysiwyg-content ul,
.flex-section__body.wysiwyg-content ol {
  padding-left: 1.25rem;
  margin: 0.5em 0;
}
.flex-section__body.wysiwyg-content li {
  margin-bottom: 0.35em;
}
.flex-section__body.wysiwyg-content strong {
  color: var(--cb-white);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   TEXT LAYOUT — BODY COLUMNS  (block_text_layout = body_columns)
   block_body renders as the LEFT column,
   block_body_2 renders as the RIGHT column.
   Matches the "Telecommunication" / "50-Year Journey" 2-col body pattern.
════════════════════════════════════════════════════════════ */
.flex-section__body-cols-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cb-gap);
  align-items: start;
}

/* Collapse to single column on tablet */
@media (max-width: 768px) {
  .flex-section__body-cols-grid {
    grid-template-columns: 1fr;
  }
}

/* ── CTA BUTTON — uses global .hng-btn system ─────────────
   The class .flex-section__cta remains as a component alias
   that inherits from .hng-btn via HTML dual-class:
   <a class="flex-section__cta hng-btn">
──────────────────────────────────────────────────────────── */
.flex-section__cta {
  align-self: flex-start; /* don't stretch full width inside flex column */
}

/* ════════════════════════════════════════════════════════════
   TEXT LAYOUT — SUBHEADER SIDE  (block_text_layout = subheader_side)
   The entire text area splits into two equal columns:
     LEFT  → block_header (orange) + block_header_desc + block_cta
     RIGHT → block_subheader (bold white) + block_body
   Matches the "Metal / Sturdy & high-quality products" design.
════════════════════════════════════════════════════════════ */
.flex-section__text-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cb-gap);
  align-items: start;
}

/* Left column: header stacks with desc and cta, aligned top */
.flex-section__text-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

/* Right column: subheader sits flush top-right, body below */
.flex-section__text-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* In side mode the subheader sits at the very top of its column,
   matching the orange header's baseline on the left */
.flex-section__text-right .flex-section__subheader {
  margin: 0;
}

/* Collapse to single column on tablet */
@media (max-width: 768px) {
  .flex-section__text-side-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   MEDIA — SIDE IMAGE
   Used with layout A.
════════════════════════════════════════════════════════════ */
.flex-section__media--side {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   MEDIA — VIDEO
   Renders with a custom play button overlay.
   Image 4 (50-Year Journey video) uses this pattern.
════════════════════════════════════════════════════════════ */
.flex-section__media--video {
  width: 100%;
}

.flex-section__video-wrap {
  position: relative;
  border-radius: var(--cb-img-radius);
  overflow: hidden;
  background: #1a0a04;
  aspect-ratio: 16 / 9;
}

.flex-section__video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--cb-img-radius);
}

/* Custom play button overlay */
.flex-section__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    transform var(--cb-transition),
    opacity var(--cb-transition);
  z-index: 2;
}

.flex-section__play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 0.9;
}

/* Hide play button once video is playing — JS adds .is-playing to wrapper */
.flex-section__video-wrap.is-playing .flex-section__play-btn {
  opacity: 0;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   MEDIA — SINGLE IMAGE
   One image with optional header label + caption below.
   Image 3 (footprint map) is an example of this.
════════════════════════════════════════════════════════════ */
.flex-section__single-img {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Header label above the single image */
.flex-section__img-header {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 500 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-h3-size, clamp(1.5rem, 2.5vw, 1.875rem));
  color: var(--cb-white);
  margin: 60px 0 0 0;
}

/* Caption below the single image */
.flex-section__img-caption {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-body-size, clamp(1rem, 1.5vw, 1.25rem));
  color: var(--cb-white);
  line-height: 1.5;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   MEDIA — IMAGE GRID
   4 columns, auto-wraps at 5th item.
   Image 6 (HDPE Ducting, PN16 Ducting…) uses this pattern.
════════════════════════════════════════════════════════════ */
.flex-section__img-grid {
  display: grid;
  grid-template-columns: repeat(var(--img-grid-cols, 4), 1fr);
  gap: 30px;
}

/* On tablet: 2 columns */
@media (max-width: 768px) {
  .flex-section__img-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* On mobile: 1 column */
@media (max-width: 480px) {
  .flex-section__img-grid {
     grid-template-columns: repeat(2, 1fr);
  }
}

.flex-section__img-grid-item {
  display: flex;
  flex-direction: column;
}

/* Caption below each grid image */
.flex-section__grid-caption {
  font-family: "ITCAvantGarde", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-size: var(--hng-small-size, clamp(0.8rem, 1.2vw, 0.9rem));
  color: var(--cb-white);
  text-align: center;
  margin: 0.65rem 0 0;
  line-height: 1.4;
}

/* ── SHARED IMAGE WRAPPER ─────────────────────────────────── */
.flex-section__img-wrap {
  width: 100%;
  border-radius: var(--cb-img-radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2); /* placeholder while image loads */
}

.flex-section__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--cb-img-radius);
}

/* Side image: fixed aspect ratio to match the text column height */
.flex-section__media--side .flex-section__img-wrap {
  aspect-ratio: 4 / 3;
}

/* Single image: wide cinematic ratio */
.flex-section__single-img .flex-section__img-wrap {
  aspect-ratio: 26 / 9;
}

/* Grid items: square crops */
.flex-section__img-grid-item .flex-section__img-wrap {
  aspect-ratio: 0 / 0;
}

/* ── RESPONSIVE PADDING ───────────────────────────────────── */
@media (max-width: 768px) {
  /* .flex-section {
    padding: 1.75rem 1.25rem;
  } */

  :root {
    --cb-gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  /* .flex-section {
    padding: 1.25rem 1rem;
  } */

  :root {
    --cb-gap: 1.25rem;
  }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flex-section__img-wrap img,
  .flex-section__cta,
  .flex-section__cta svg,
  .flex-section__play-btn {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   JS adds .is-visible when elements enter the viewport.
   data-cb-index drives stagger delay on 3+ image grids.
   ═══════════════════════════════════════════════════════════ */

[data-cb-animate] {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-cb-animate="fade-up"] {
  opacity: 0;
  transform: translateY(48px);
}

[data-cb-animate="slide-from-left"] {
  opacity: 0;
  transform: translateX(-72px);
}

[data-cb-animate="slide-from-right"] {
  opacity: 0;
  transform: translateX(72px);
}

[data-cb-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Reduced motion: skip animations */
@media (prefers-reduced-motion: reduce) {
  [data-cb-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}