/**
 * Responsive Styles
 * Media queries and breakpoint-specific styles
 */

/* Breakpoints:
 * sm: 640px
 * md: 768px
 * lg: 1024px
 * xl: 1280px
 */

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
  .container {
    padding: 0 var(--spacing-xl);
  }

  .site-header .container {
    padding: var(--spacing-md) var(--spacing-xl);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --font-size-base: 1.0625rem; /* 17px */
  }

  .container {
    padding: 0 var(--spacing-2xl);
  }

  .site-main {
    padding: var(--spacing-2xl) 0;
  }

  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-max-width);
  }

  .event-article {
    padding: var(--spacing-3xl) var(--spacing-2xl);
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .menu-toggle,
  .main-navigation,
  .event-navigation {
    display: none;
  }

  .site-main {
    padding: 0;
  }

  .event-article {
    max-width: 100%;
    padding: 0;
  }

  a {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }
}