/* Event Detail Hero - Edge-to-Edge Layout
   ================================================================= */

/*
 * Makes the event detail header (hero image) extend edge-to-edge
 * by breaking out of the dashboard-main padding using negative margins.
 *
 * The dashboard-main has responsive padding:
 * - Desktop: var(--space-xl) = 32px
 * - Tablet (≤768px): var(--space-md) = 24px
 * - Mobile (≤480px): var(--space-sm) = 16px
 *
 * This class applies equal negative margins to compensate for that padding,
 * allowing the hero to span full viewport width.
 */

.event-detail-header--full-width {
  /* Desktop: Compensate for dashboard-main padding (32px) on all sides */
  margin-inline: calc(-1 * var(--space-xl));
  margin-block-start: calc(-1 * var(--space-xl)); /* Edge-to-edge vertically */
  margin-block-end: var(--space-2xl); /* Space below hero */
}

/* Tablet: Compensate for reduced dashboard-main padding (24px) */
@media (max-width: 768px) {
  .event-detail-header--full-width {
    margin-inline: calc(-1 * var(--space-md));
    margin-block-start: calc(-1 * var(--space-md));
  }
}

/* Mobile: Compensate for minimal dashboard-main padding (16px) */
@media (max-width: 480px) {
  .event-detail-header--full-width {
    margin-inline: calc(-1 * var(--space-sm));
    margin-block-start: calc(-1 * var(--space-sm));
  }
}