/* =============================================
   SECRET AGENTS - CUSTOM OVERRIDES
   Loads after style.css to guarantee precedence
   ============================================= */

/* === WARM BLACK BACKGROUND === */
:root {
  --page-bg: #231f20 !important;
  --image-placeholder: #231f20 !important;
  --lightest: #231f20 !important;
  --lighter: #231f20 !important;
  --cards-image-aspect-ratio-mobile: 1 / 1 !important;
  --cards-image-aspect-ratio-desktop: 1 / 1 !important;
}

/* === FEATURES SECTION: SQUARE IMAGES === */

/* Prevent flex stretch from overriding aspect-ratio */
.features__cards .card--split {
  align-items: flex-start !important;
}

/* Force square container */
.features__cards .card__image,
.features__cards .card--split .card__image {
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  width: 50% !important;
  align-self: flex-start !important;
  overflow: hidden !important;
  background-color: #231f20 !important;
}

/* Image fills the square */
.features__cards .card__image img,
.features__cards .card--split .card__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Mobile: full width */
@media all and (max-width: 56.24em) {
  .features__cards .card__image,
  .features__cards .card--split .card__image {
    width: 100% !important;
  }
}

/* === CTA SECTION: CORAL BORDER, MINIMAL === */

/* Remove light grey background, add coral border, reduce padding */
.section--dark.cta-section {
  background-color: transparent !important;
  border: 1px solid #D34A78 !important;
  color: #9F9F9F !important;
  padding: calc(var(--baseline) * 6) calc(var(--baseline) * 6) !important;
}

/* Text colors on dark background */
.cta-section__header h2 {
  color: #EEEDED !important;
}

.cta-section__header p {
  color: #9F9F9F !important;
}

/* Remove the dark box around the button */
.cta-section__aside {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* White pill button that turns coral on hover */
.cta-section__aside .btn {
  background-color: #EEEDED !important;
  border: 1px solid #EEEDED !important;
  color: #231f20 !important;
  border-radius: 60px !important;
  transition: all 0.3s ease !important;
}

.cta-section__aside .btn:hover {
  background-color: #D34A78 !important;
  border-color: #D34A78 !important;
  color: #fff !important;
}

/* === HIDE POST TITLES & DATES (everywhere except features) === */
.card__title,
.card__meta {
  display: none !important;
}

/* Bring them back in features */
.section.features .card__title,
.features__cards .card__title {
  display: block !important;
}

/* === FEATURES SECTION: SHOW TEXT PROMINENTLY === */
.features__cards .card__title {
  display: block !important;
  font-size: 1.5rem !important;
  color: #EEEDED !important;
  margin-bottom: 0.5em !important;
}

.features__cards .card__text {
  color: #9F9F9F !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.features__cards .card__body {
  padding-top: calc(var(--baseline) * 4) !important;
}

.features__cards .card__actions .btn {
  color: #D34A78 !important;
  font-size: 0.9rem !important;
}

/* === FEATURES ICONS: CORAL + ALWAYS-VISIBLE LABELS === */

/* Coral icon circles */
.features__list .icon-box__icon {
  background-color: rgba(211, 74, 120, 0.15) !important;
  border: 1px solid rgba(211, 74, 120, 0.3) !important;
  color: #D34A78 !important;
}

/* Always show tooltips as labels below icons */
.features__list .icon-box__tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  background-color: transparent !important;
  color: #9F9F9F !important;
  font-size: 0.85rem !important;
  padding: 0.5em 0 0 !important;
  white-space: normal !important;
  text-align: center !important;
  max-width: 140px !important;
}

/* Hide tooltip arrow */
.features__list .icon-box__tooltip::before {
  display: none !important;
}

/* Stack icon + label vertically */
.features__list .icon-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}