/**
 * Bangkok GRAD — Layout CSS
 * BG-008: Native HTML/CSS design system
 *
 * Contents:
 *   1. Container
 *   2. Page structure (header/main/footer)
 *   3. Section spacing
 *   4. Two-column desktop layout (event/report detail)
 *   5. Grid patterns
 *   6. Navigation layout
 *   7. Responsive utilities
 *
 * Breakpoints (mobile-first):
 *   sm:  480px  — large mobile
 *   md:  768px  — tablet
 *   lg:  1024px — laptop
 *   xl:  1280px — desktop
 *   2xl: 1440px — large desktop
 */

/* ============================================================
   1. Container
   ============================================================*/

.l-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-5);  /* 24px on mobile */
}

.l-container--sm  { max-width: var(--container-sm); }
.l-container--md  { max-width: var(--container-md); }
.l-container--lg  { max-width: var(--container-lg); }
.l-container--xl  { max-width: var(--container-xl); }
.l-container--2xl { max-width: var(--container-2xl); }

/* Wider padding on larger screens */
@media (min-width: 768px) {
  .l-container {
    padding-inline: var(--space-7);  /* 32px on tablet */
  }
}

@media (min-width: 1024px) {
  .l-container {
    padding-inline: var(--space-9);  /* 48px on laptop+ */
  }
}

/* ============================================================
   2. Page structure
   ============================================================*/

.l-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.l-page__main {
  flex: 1;
}

/* ============================================================
   3. Section spacing
   ============================================================*/

/* Standard content section */
.l-section {
  padding-block: var(--space-9);    /* 48px mobile */
}

@media (min-width: 768px) {
  .l-section {
    padding-block: var(--space-10); /* 64px tablet */
  }
}

@media (min-width: 1024px) {
  .l-section {
    padding-block: var(--space-12); /* 96px laptop+ */
  }
}

/* Compact section */
.l-section--sm {
  padding-block: var(--space-7);    /* 32px mobile */
}

@media (min-width: 768px) {
  .l-section--sm {
    padding-block: var(--space-9);  /* 48px tablet+ */
  }
}

/* Hero section */
.l-section--hero {
  padding-block: 0;
}

/* Dark section (navy background) */
.l-section--dark {
  background-color: var(--color-navy);
  color: var(--color-text-inverse);
}

/* Surface section (off-white background) */
.l-section--surface {
  background-color: var(--color-surface);
}

/* ============================================================
   4. Two-column detail layout (event / report detail)
   ============================================================*/

/* Mobile: single column stack
   Desktop: main content + sidebar */
.l-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.l-detail__main {}
.l-detail__sidebar {}

/* BG-006 §5.2 / §12.2: two-column at lg breakpoint */
@media (min-width: 1024px) {
  .l-detail {
    grid-template-columns: 1fr 340px;
    gap: var(--space-9);
    align-items: start;
  }
}

@media (min-width: 1280px) {
  .l-detail {
    grid-template-columns: 1fr 380px;
  }
}

/* Sticky sidebar on wide screens */
@media (min-width: 1024px) {
  .l-detail__sidebar--sticky {
    position: sticky;
    top: var(--space-6);
  }
}

/* ============================================================
   5. Grid patterns
   ============================================================*/

/* Auto-responsive card grid */
.l-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* Explicit responsive grids */
.l-grid--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .l-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.l-grid--3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .l-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .l-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.l-grid--4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .l-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .l-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Gallery grid: 2-col mobile, 3-col desktop */
.l-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .l-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
}

/* Horizontal scroll row (related cards on mobile) */
.l-scroll-row {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.l-scroll-row::-webkit-scrollbar {
  height: 4px;
}

.l-scroll-row::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.l-scroll-row::-webkit-scrollbar-thumb {
  background: var(--color-border-gold);
  border-radius: var(--radius-pill);
}

.l-scroll-row > * {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .l-scroll-row {
    overflow-x: visible;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    scroll-snap-type: none;
  }

  .l-scroll-row > * {
    flex: none;
  }
}

/* ============================================================
   6. Navigation layout
   ============================================================*/

.l-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.l-nav__brand {
  flex-shrink: 0;
}

.l-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Mobile: hide nav links; show hamburger */
@media (max-width: 767px) {
  .l-nav__links {
    display: none;
  }

  .l-nav__links--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: var(--color-navy);
    padding: var(--space-5);
    gap: var(--space-4);
  }
}

/* ============================================================
   7. Responsive utilities
   ============================================================*/

/* Hide below md (use !important so later display rules from components don't override) */
.u-hide-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  .u-hide-mobile {
    display: block !important;
  }
}

/* Hide at md+ */
.u-hide-desktop {
  display: block !important;
}

@media (min-width: 768px) {
  .u-hide-desktop {
    display: none !important;
  }
}

/* Flex utility */
.u-flex { display: flex; }
.u-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.u-flex-gap-2 { gap: var(--space-2); }
.u-flex-gap-4 { gap: var(--space-4); }
.u-flex-gap-5 { gap: var(--space-5); }
.u-flex-wrap { flex-wrap: wrap; }