/*
  Reusable 4-Column Grid System
  Responsive grid that adapts from 4 columns (desktop) to 3 (tablet) to 1 (mobile)
  Uses CSS Grid with 8px margins and gutters
*/

/* ============================================
   GRID CONTAINER
   ============================================ */

.grid-container {
  display: grid;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: var(--grid-margin);
  gap: var(--grid-gutter);
  background-color: var(--color-bg-primary);
}


/* ============================================
   DESKTOP LAYOUT (> 1140px)
   Default: 4 columns × 3 rows
   ============================================ */

@media (min-width: 1140px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "hero hero hero about"
      "hero hero hero about"
      "klokki playground copyright itinerary";
  }

  /* Grid items with semantic area names */
  .grid-item--hero {
    grid-area: hero;
  }

  .grid-item--about {
    grid-area: about;
  }

  .grid-item--klokki {
    grid-area: klokki;
  }

  .grid-item--card-1 {
    grid-area: klokki;
  }

  .grid-item--playground {
    grid-area: playground;
  }

  .grid-item--card-2 {
    grid-area: playground;
  }

  .grid-item--copyright {
    grid-area: copyright;
  }

  .grid-item--footer {
    grid-area: copyright;
  }

  .grid-item--itinerary {
    grid-area: itinerary;
  }

  .grid-item--sidebar {
    grid-area: itinerary;
  }
}


/* ============================================
   TABLET LAYOUT (768px - 1139px)
   3 columns × auto rows
   ============================================ */

@media (min-width: 768px) and (max-width: 1139px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "hero hero hero"
      "hero hero hero"
      "about about ."
      "klokki playground itinerary"
      ". copyright .";
  }

  .grid-item--hero {
    grid-area: hero;
    min-height: 60vh;
  }

  .grid-item--about {
    grid-area: about;
  }

  .grid-item--klokki {
    grid-area: klokki;
  }

  .grid-item--card-1 {
    grid-area: klokki;
  }

  .grid-item--playground {
    grid-area: playground;
  }

  .grid-item--card-2 {
    grid-area: playground;
  }

  .grid-item--copyright {
    grid-area: copyright;
  }

  .grid-item--footer {
    grid-area: copyright;
  }

  .grid-item--itinerary {
    grid-area: itinerary;
  }

  .grid-item--sidebar {
    grid-area: itinerary;
  }
}


/* ============================================
   MOBILE LAYOUT (< 768px)
   1 column × auto rows
   ============================================ */

@media (max-width: 767px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    min-height: 100vh;
    grid-template-areas:
      "hero"
      "about"
      "klokki"
      "playground"
      "itinerary"
      "copyright";
  }

  .grid-item--hero {
    min-height: 50vh;
    grid-area: hero;
  }

  .grid-item--about {
    grid-area: about;
  }

  .grid-item--klokki {
    grid-area: klokki;
  }

  .grid-item--playground {
    grid-area: playground;
  }

  .grid-item--itinerary {
    grid-area: itinerary;
  }

  .grid-item--copyright {
    grid-area: copyright;
  }
}


/* ============================================
   GRID ITEM BASE STYLES
   ============================================ */

.grid-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: transparent;
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Span utilities for custom layouts */
.span-col-1 {
  grid-column: span 1;
}

.span-col-2 {
  grid-column: span 2;
}

.span-col-3 {
  grid-column: span 3;
}

.span-col-4 {
  grid-column: span 4;
}

.span-row-1 {
  grid-row: span 1;
}

.span-row-2 {
  grid-row: span 2;
}

.span-row-3 {
  grid-row: span 3;
}


/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1139px) {
  .hide-tablet {
    display: none;
  }
}

/* Hide on desktop */
@media (min-width: 1140px) {
  .hide-desktop {
    display: none;
  }
}