/**
 * Index page section rhythm — Forton Homes
 * Wrappers: .index-section.index-section--{skin}
 */

.index-section {
  position: relative;
  isolation: isolate;
}

body.index-page-body {
  overflow-x: hidden;
  max-width: 100%;
}

.index-footer-wrap {
  position: relative;
  z-index: 10002;
  width: 100%;
  clear: both;
  flex-shrink: 0;
}

body.index-page-body .forton-footer,
body.index-page-body .index-footer-wrap .forton-footer {
  position: relative;
  z-index: 10002;
  display: block !important;
  visibility: visible !important;
}

/* --- clean-white --- */
.index-section--clean-white {
  background-color: #ffffff;
}

/* --- forton-glow (carousel) --- */
.index-section--forton-glow {
  background-color: #ffffff;
}

/* --- blush-dots + diagonal top (select_by_type) --- */
.index-section--blush-dots-diagonal {
  background-color: #fef7f7;
  background-image: radial-gradient(
    rgba(229, 0, 43, 0.07) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

.index-section--blush-dots-diagonal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 12%, 0 100%);
  z-index: 0;
  pointer-events: none;
}

.index-section--blush-dots-diagonal > * {
  position: relative;
  z-index: 1;
}

/* --- light gray band (reels) --- */
.index-section--light-gray-band {
  background-color: #fafafa;
}

.index-section--light-gray-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 12%, 0 100%);
  z-index: 0;
  pointer-events: none;
}

.index-section--light-gray-band > * {
  position: relative;
  z-index: 1;
}

.index-section--light-gray-band > div[style*="background-color"] {
  background-color: transparent !important;
}

.index-section--light-gray-band .container-sm[style*="background"] {
  background-color: transparent !important;
}

/* --- blog accent line top --- */
.index-section--accent-line-top {
  background-color: #ffffff;
}

.index-section--accent-line-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(229, 0, 43, 0.35) 15%,
    #e4002b 50%,
    rgba(229, 0, 43, 0.35) 85%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .index-section--blush-dots-diagonal::before,
  .index-section--light-gray-band::before {
    clip-path: none;
    height: 4px;
  }
}