/* layout.css — Container, base section, and responsive breakpoints */
/* Section-specific overrides live in components.css to avoid duplication */

/* ═══════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════ */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  width: 100%;
}

/* ═══════════════════════════════════════════
   SECTIONS — Base default
   ═══════════════════════════════════════════ */
.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

@media (max-width: 1024px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

@media (max-width: 767px) {
  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}


/* New Hero Grid Update */
@media (min-width: 1024px) { .hero__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; } }
/* Hackathon Section */
.hackathon__grid { display: grid; gap: var(--space-12); }
.hackathon__content { display: flex; flex-direction: column; }