/* ============================================
   CONTENT SPLIT — FEATURES & BUTTONS
   Editorial 2-column hero with feature list.
   Swiss-Grid Editorial × Mediterranean warmth.
   ============================================ */

.op {
  position: relative;
  overflow: hidden;
}

/* ─── Main 2-column grid ─────────────────────────────────────── */
.op__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (min-width: 960px) {
  .op__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: center;
  }
}

/* Mobile: image first, copy below. Desktop: copy left, image right. */
.op__copy {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.op__visual {
  order: 1;
}

@media (min-width: 960px) {
  .op__copy { order: 1; gap: 20px; }
  .op__visual { order: 2; }
}

/* ─── Flip toggle (desktop only) ──────────────────────────── */
@media (min-width: 960px) {
  .op--flipped .op__copy { order: 2; }
  .op--flipped .op__visual { order: 1; }
}

/* ─── Eyebrow ─────────────────────────────────────────────── */
.op__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

/* ─── Heading — signature 2-line pattern ──────────────────── */
.op__heading {
  margin: 0;
  font-size: clamp(2.5rem, 6vw + 0.5rem, 5rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  color: var(--clr-primary);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.op__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-primary);
}

.op__heading-line2 {
  display: block;
  font-weight: 400;
  /* Upright serif — never italic per design guide §5 */
  color: var(--clr-primary);
  letter-spacing: 0;
  font-size: 0.85em;
  line-height: 1.05;
  margin-top: var(--space-xs);
}

/* ─── Body ────────────────────────────────────────────────── */
.op__body {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.65;
  color: var(--clr-text-secondary);
  max-width: 540px;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .op__body { font-size: var(--font-size-lg); }
}

/* Inline emphasis takes a typographic accent instead of just bold —
   matches the revamp-prima treatment so users coming from that section
   feel continuity. */
.op__body strong {
  font-family: var(--font-primary);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.04em;
  color: var(--clr-primary);
}

/* ─── Benefit chips ──────────────────────────────────────── */
.op__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
}

@media (min-width: 1024px) {
  .op__benefits { margin-top: var(--space-lg); }
}

/* Pill 100px is reserved for non-interactive tags per design guide §7. */
.op__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 18px;
  border-radius: 100px;
  background: rgba(181, 168, 130, 0.15);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--clr-primary);
  white-space: nowrap;
  line-height: 1.4;
}

.op__chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-brand-accent);
  flex-shrink: 0;
}

/* ─── CTAs ───────────────────────────────────────────────── */
.op__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.op__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--space-xl);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.op__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.op__btn-primary:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

.op__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--clr-primary);
  border-bottom: 1.5px solid var(--clr-primary);
  padding-bottom: var(--space-xs);
  transition: gap 0.3s ease;
}

.op__btn-secondary:hover { gap: 12px; }

.op__btn-secondary svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.op__btn-secondary:hover svg { transform: translateX(4px); }

.op__btn-secondary:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

/* ─── Visual column ─────────────────────────────────────── */
.op__visual {
  position: relative;
}

.op__image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.op__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.op__placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, #e8d9c9 0%, #d4ccbb 45%, #c9bfaa 100%);
  position: relative;
}

.op__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      rgba(60, 66, 46, 0.04) 12px,
      rgba(60, 66, 46, 0.04) 13px
    );
}

/* ─── Study callout — sits in copy column under the body ──── */
.op__study {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-left: var(--space-md);
  border-left: 2px solid var(--clr-border-strong);
  max-width: 540px;
}

.op__study-text {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 300;
  line-height: 1.55;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .op__study-text { font-size: var(--font-size-base); }
}

.op__study-cite {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* ============================================
   DARK BACKGROUND VARIANT — bg-accent-dark
   Inverse text + gold accents per design guide §4.
   ============================================ */
.op.bg-accent-dark .op__eyebrow {
  color: var(--clr-brand-accent);
}

.op.bg-accent-dark .op__heading-line1 {
  color: var(--clr-text-inverse);
}

.op.bg-accent-dark .op__heading-line2 {
  color: var(--clr-brand-accent);
}

.op.bg-accent-dark .op__body {
  color: var(--clr-text-inverse);
  opacity: 0.82;
}

.op.bg-accent-dark .op__body strong {
  color: var(--clr-text-inverse);
  opacity: 1;
}

.op.bg-accent-dark .op__chip {
  background: rgba(253, 252, 250, 0.08);
  color: var(--clr-text-inverse);
}

.op.bg-accent-dark .op__btn-primary {
  background: var(--clr-text-inverse);
  color: var(--clr-primary);
}

.op.bg-accent-dark .op__btn-secondary {
  color: var(--clr-text-inverse);
  border-bottom-color: var(--clr-text-inverse);
}

.op.bg-accent-dark .op__study {
  border-left-color: var(--clr-brand-accent);
}

.op.bg-accent-dark .op__study-text {
  color: var(--clr-text-inverse);
  opacity: 0.82;
}

.op.bg-accent-dark .op__study-cite {
  color: var(--clr-text-inverse);
  opacity: 0.6;
}

/* ============================================
   Reduced motion — neutralize transitions
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .op__btn-primary,
  .op__btn-secondary,
  .op__btn-secondary svg {
    transition: none;
  }
}