/* HOLIDAYS v1.6 — one alignment system for frames, labels and shadows. */

/* The calendar backing cards use the exact shell box, including its top/bottom padding. */
.calendar-scene {
  --calendar-side: 52px;
  --calendar-top-space: 96px;
  --calendar-bottom-space: 110px;
  padding: var(--calendar-top-space) var(--calendar-side) var(--calendar-bottom-space);
}

.calendar-scene::before,
.calendar-scene::after {
  bottom: var(--calendar-bottom-space);
  height: auto;
  left: var(--calendar-side);
  right: var(--calendar-side);
  top: var(--calendar-top-space);
  transform-origin: 50% 50%;
  width: auto;
}

.calendar-scene::before { transform: rotate(-.7deg); }
.calendar-scene::after { transform: rotate(.7deg); }

.calendar-scene .calendar-shell {
  margin-inline: auto;
  max-width: none;
  width: 100%;
}

/* Heading badges are centered independently of inherited text alignment. */
.schedule .section-heading::after {
  box-shadow: 0 4px 0 var(--navy);
  display: block;
  margin: 18px auto 0;
  width: max-content;
}

/* Decorative depth stays on the frame axis instead of drifting sideways. */
.photo-frame {
  box-shadow:
    0 10px 0 var(--pink),
    0 19px 0 rgba(255,218,94,.68),
    0 26px 34px rgba(38,33,60,.12);
}

.phone-frame {
  box-shadow:
    0 10px 0 var(--navy),
    0 18px 0 var(--yellow),
    0 27px 34px rgba(22,38,79,.2);
}

.phone-label {
  bottom: -22px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(-3deg);
  white-space: nowrap;
  z-index: 6;
}

.cta-card {
  box-shadow:
    0 11px 0 var(--pink),
    0 22px 34px rgba(38,33,60,.12);
  width: min(680px, 100%);
}

.cta-actions {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.18fr);
  margin: 24px auto 0;
  max-width: 570px;
}

.cta-card .cta-actions .price,
.cta-actions .button {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 54px;
  width: 100%;
}

.cta-card .cta-actions .price {
  line-height: 1.45;
  padding: 9px 12px;
}

.cta-actions .button { gap: 22px; }
.cta-actions .button-primary { box-shadow: 0 6px 0 var(--navy); }
.cta-actions .button-primary:hover { box-shadow: 0 8px 0 var(--navy); }

@media (max-width: 980px) {
  .calendar-scene { --calendar-side: 40px; }
}

@media (max-width: 760px) {
  .schedule-horizon::before,
  .schedule-horizon::after {
    opacity: .28;
  }

  .schedule-horizon {
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-scene {
    --calendar-bottom-space: 75px;
    --calendar-side: 10px;
    --calendar-top-space: 64px;
    padding: var(--calendar-top-space) var(--calendar-side) var(--calendar-bottom-space);
  }

  .calendar-scene::before,
  .calendar-scene::after {
    bottom: var(--calendar-bottom-space);
    left: var(--calendar-side);
    right: var(--calendar-side);
    top: var(--calendar-top-space);
    width: auto;
  }

  .calendar-scene::before { transform: rotate(-.45deg); }
  .calendar-scene::after { transform: rotate(.45deg); }

  .photo-frame {
    box-shadow:
      0 8px 0 var(--pink),
      0 15px 0 rgba(255,218,94,.68),
      0 22px 26px rgba(38,33,60,.1);
  }

  .phone-stage { padding-bottom: 34px; }
  .phone-frame {
    box-shadow:
      0 8px 0 var(--navy),
      0 15px 0 var(--yellow),
      0 23px 28px rgba(22,38,79,.18);
  }
  .phone-label { bottom: -17px; left: 50%; }

  .cta-card {
    box-shadow:
      0 9px 0 var(--pink),
      0 18px 27px rgba(38,33,60,.1);
    padding-left: 18px;
    padding-right: 18px;
  }

  .cta-actions {
    gap: 12px;
    grid-template-columns: 1fr;
    margin-top: 22px;
    width: 100%;
  }

  .cta-card .cta-actions .price,
  .cta-actions .button {
    min-height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame,
  .phone-frame { animation: none !important; }
}