/**
 * TWC Feature Row Block Styles
 */

.twc-feature-row {
  --twc-dark-navy:  #060f1d;
  --twc-white:      #f0f2f5;
  --twc-grey:       #8a96a8;
  --twc-accent:     #0976bb;
  --twc-accent-dim: #07639C;

  position: relative;
  z-index: 2;
  padding: 80px 24px;
  background: var(--twc-dark-navy);
}

/* ─── Grid layout ─── */
.twc-feature-row__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Reverse: swap columns visually without touching the DOM order.
   Using flex-direction so screen readers and tab order stay logical. */
.twc-feature-row__inner--reverse {
  direction: rtl;
}

.twc-feature-row__inner--reverse > * {
  direction: ltr;
}

/* ─── Image ─── */
.twc-feature-row__img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid rgba(9, 124, 195, 0.1);
  transition: transform 0.6s ease;
  display: block;
}

.twc-feature-row__img:hover {
  transform: scale(1.02);
}

/* Placeholder shown in editor when no image is set */
.twc-feature-row__img-placeholder {
  width: 100%;
  height: 360px;
  border-radius: 20px;
  border: 2px dashed rgba(9, 124, 195, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(9, 124, 195, 0.4);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* ─── Text column ─── */
.twc-feature-row__headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: var(--twc-white);
  margin: 0 0 16px;
  line-height: 1.2;
}

.twc-feature-row__body {
  font-size: 16px;
  color: var(--twc-grey);
  line-height: 1.7;
  margin: 0 0 24px;
  font-family: 'DM Sans', sans-serif;
}

/* Button — shared with hero block; define once in theme if preferred */
.twc-feature-row .twc-btn--secondary {
  display: inline-block;
  padding: 16px 36px;
  border-radius: 8px;
  border: 1px solid rgba(9, 124, 195, 0.3);
  background: rgba(9, 124, 195, 0.05);
  color: var(--twc-accent);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.twc-feature-row .twc-btn--secondary:hover {
  background: rgba(9, 124, 195, 0.12);
  border-color: rgba(9, 124, 195, 0.5);
  color: var(--twc-accent);
  text-decoration: none;
}

/* ─── Scroll reveal ─── */
.twc-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.twc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .twc-feature-row__inner,
  .twc-feature-row__inner--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 32px;
  }

  .twc-feature-row__img,
  .twc-feature-row__img-placeholder {
    height: 240px;
  }
}

/* ─── Editor ─── */
.block-editor .twc-reveal {
  opacity: 1;
  transform: none;
}