/* RonRov - Behind Story polish (CSS only). Scoped to the existing markup on index.php */

/* Section title */
main .modern-section-title {
  margin: 0 0 2.2rem 0;
}
main .modern-section-title h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem) !important;
  letter-spacing: 0.2px;
  line-height: 1.15;
}
main .modern-section-title p {
  font-size: 0.98rem;
  margin-top: 0.55rem;
  opacity: 0.92;
}

/* Grid wrapper sits right after .modern-section-title in your index.php */
main .modern-section-title + div {
  gap: 1.6rem !important;
  align-items: stretch;
}

/* Cards: only in this grid */
main .modern-section-title + div > .card {
  border-radius: 18px !important;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
main .modern-section-title + div > .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -18px rgba(0,0,0,0.42);
}

/* Image wrapper */
main .modern-section-title + div > .card > div:first-child {
  border-radius: 18px 18px 0 0;
}
main .modern-section-title + div > .card img {
  filter: saturate(1.02) contrast(1.02);
}

/* Text area */
main .modern-section-title + div > .card > div:last-child h3 {
  font-size: 1.18rem !important;
  line-height: 1.25;
}
main .modern-section-title + div > .card > div:last-child {
  padding: 1.35rem 1.35rem 1.25rem 1.35rem !important;
}

/* Button: make it feel more premium without changing existing classes globally */
main .modern-section-title + div > .card .btn.sm.light {
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  font-weight: 600;
}

/* Side-by-side layout on wide screens (as requested: text next to image) */
@media (min-width: 920px) {
  main .modern-section-title + div > .card {
    flex-direction: row !important;
  }
  html[dir="rtl"] main .modern-section-title + div > .card {
    flex-direction: row-reverse !important;
  }

  main .modern-section-title + div > .card > div:first-child {
    width: 46%;
    flex: 0 0 46%;
    border-radius: 18px 0 0 18px;
  }
  html[dir="rtl"] main .modern-section-title + div > .card > div:first-child {
    border-radius: 0 18px 18px 0;
  }

  /* Keep the image area tall enough but not huge */
  main .modern-section-title + div > .card > div:first-child {
    aspect-ratio: auto !important;
    min-height: 230px;
  }

  main .modern-section-title + div > .card > div:last-child {
    width: 54%;
    flex: 1;
  }
}

/* Mobile: slightly tighter */
@media (max-width: 520px) {
  main .modern-section-title + div {
    gap: 1.1rem !important;
  }
  main .modern-section-title + div > .card > div:last-child {
    padding: 1.1rem !important;
  }
}