/* ============================================================
   Diagonal Section Transitions — clip-path edges
   ============================================================ */

/* ── BASE DIAGONAL ─────────────────────────────────────────── */

.diagonal-section {
  position: relative;
  overflow: hidden;
}

/* Top diagonal cut — section starts with angled top edge */
.diagonal-section--top {
  margin-top: -60px;
  padding-top: calc(var(--section-py) + 60px);
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
}

/* Bottom diagonal cut — section ends with angled bottom edge */
.diagonal-section--bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
  padding-bottom: calc(var(--section-py) + 60px);
}

/* Both top and bottom */
.diagonal-section--both {
  clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
  padding-top: calc(var(--section-py) + 60px);
  padding-bottom: calc(var(--section-py) + 60px);
}

/* Reversed diagonal — other direction */
.diagonal-section--reverse-top {
  clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 100%);
  padding-top: calc(var(--section-py) + 60px);
}

.diagonal-section--reverse-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
  padding-bottom: calc(var(--section-py) + 60px);
}

/* ── DIAGONAL SPACER / DIVIDER ────────────────────────────── */
/* Used as an empty div between sections for color transition */

.section-divider {
  height: 80px;
  position: relative;
  overflow: hidden;
}

.section-divider--navy-to-white {
  background: var(--color-primary-navy);
}

.section-divider--navy-to-white::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--color-white);
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
}

.section-divider--white-to-navy {
  background: var(--color-white);
}

.section-divider--white-to-navy::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--color-primary-navy);
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
}

/* ── HERO DIAGONAL BOTTOM EDGE ─────────────────────────────── */

.hero-diagonal-edge {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  overflow: hidden;
  z-index: 2;
}

.hero-diagonal-edge svg {
  width: 100%;
  height: 100%;
}

/* ── MOBILE: shallower angles ──────────────────────────────── */

@media (max-width: 768px) {
  .diagonal-section--top    { clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--section-py) + 30px); margin-top: -30px; }
  .diagonal-section--bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); padding-bottom: calc(var(--section-py) + 30px); }
  .diagonal-section--both   { clip-path: polygon(0 30px, 100% 0, 100% calc(100% - 30px), 0 100%); padding-top: calc(var(--section-py) + 30px); padding-bottom: calc(var(--section-py) + 30px); }
}