@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    overscroll-behavior: none;
  }

  main > :first-child {
    margin-top: 0 !important;
  }

  main > :last-child {
    margin-bottom: 0 !important;
  }
}

::-webkit-scrollbar {
  display: none;
}

/* ===== Hybrid Masonry: Columns (Mobile/Tablet) + Grid (Desktop) ===== */

/* MOBILE & TABLET: CSS Columns (True Masonry - no forced row alignment) */
@media (max-width: 1024px) {
  .masonry-grid {
    columns: 1;
    column-gap: 1rem;
  }

  .masonry-grid > * {
    break-inside: avoid;
    margin-bottom: 1rem;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .masonry-grid {
    columns: 1;
    column-gap: 1rem;
  }

  .masonry-grid > * {
    margin-bottom: 1rem;
  }
}

/* Tablet: 2 columns */
@media (min-width: 641px) and (max-width: 1024px) {
  .masonry-grid {
    columns: 2;
    column-gap: 1.25rem;
  }

  .masonry-grid > * {
    margin-bottom: 1.25rem;
  }
}

/* DESKTOP: CSS Grid (With spanning for visual hierarchy) */
@media (min-width: 1200px) {
  .masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: minmax(280px, auto);
    grid-auto-flow: dense;
    gap: 1.5rem;
    columns: unset;
    column-gap: 20px;
  }

  .masonry-grid > * {
    break-inside: unset;
    margin-bottom: unset;
  }
}

/* ===== Variable Card Sizes (Desktop Only) ===== */

/* Tall card - spans 2 rows (desktop only) */
@media (min-width: 1200px) {
  .masonry-card-tall {
    grid-row: span 2;
  }

  /* Wide card - spans 2 columns (desktop only) */
  .masonry-card-wide {
    grid-column: span 2;
  }

  /* Extra large - spans 2x2 (desktop only) */
  .masonry-card-large {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Mobile/Tablet: Spanning classes do nothing (cards flow naturally in columns) */
@media (max-width: 1200px) {
  .masonry-card-tall,
  .masonry-card-wide,
  .masonry-card-large {
    /* Columns layout ignores these classes */
    /* Cards display normally */
  }
}