/* Layout CSS - Container, Grid, Responsive */

/* Container */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 680px;
    padding: 0 var(--sp-xl);
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 920px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1040px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1140px;
  }
}

/* Section */
.section {
  padding: var(--sp-3xl) 0;
  position: relative;
}

.section--hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.section--dark {
  background-color: var(--bg-0);
}

.section--alt {
  background-color: var(--bg-1);
  position: relative;
  overflow: hidden;
}

/* 專題亮點區塊背景特效 */
.section--alt::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 229, 255, 0.08) 0%,
    rgba(0, 229, 255, 0.04) 30%,
    transparent 70%
  );
  animation: float-left 20s ease-in-out infinite;
  pointer-events: none;
}

.section--alt::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 35%;
  height: 180%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 45, 149, 0.06) 0%,
    rgba(255, 45, 149, 0.03) 30%,
    transparent 70%
  );
  animation: float-right 18s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float-left {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(5%, -10%) rotate(5deg);
  }
  50% {
    transform: translate(-5%, -5%) rotate(-3deg);
  }
  75% {
    transform: translate(3%, 5%) rotate(3deg);
  }
}

@keyframes float-right {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-8%, 5%) rotate(-5deg);
  }
  50% {
    transform: translate(5%, -8%) rotate(4deg);
  }
  75% {
    transform: translate(-3%, -3%) rotate(-2deg);
  }
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--sp-lg);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 768px) {
  .grid {
    gap: var(--sp-xl);
  }
  
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Flex Utilities */
.flex {
  display: flex;
}

.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--between {
  justify-content: space-between;
  align-items: center;
}

.flex--column {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.gap-sm {
  gap: var(--sp-sm);
}

.gap-md {
  gap: var(--sp-md);
}

.gap-lg {
  gap: var(--sp-lg);
}

/* Page Layout */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10003;
  background-color: var(--bg-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brd);
}

@media (max-width: 768px) {
  .page__header {
    background-color: rgba(11, 15, 20, 0.95);
  }
}

.page__main {
  flex: 1;
  margin-top: 80px;
}

.page__footer {
  background-color: var(--bg-1);
  border-top: 1px solid var(--brd);
  padding: var(--sp-2xl) 0;
  margin-top: auto;
}

/* Content Wrapper */
.content {
  max-width: 800px;
  margin: 0 auto;
}

.content--wide {
  max-width: 1200px;
}

/* Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }
.mt-3xl { margin-top: var(--sp-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }
.mb-2xl { margin-bottom: var(--sp-2xl); }
.mb-3xl { margin-bottom: var(--sp-3xl); }

.p-sm { padding: var(--sp-sm); }
.p-md { padding: var(--sp-md); }
.p-lg { padding: var(--sp-lg); }
.p-xl { padding: var(--sp-xl); }
.p-2xl { padding: var(--sp-2xl); }

/* Position Utilities */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  top: 0;
}

/* Z-index Layers */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }

/* Hide/Show */
.hidden {
  display: none;
}

.visible-sm {
  display: none;
}

@media (min-width: 576px) {
  .visible-sm {
    display: block;
  }
  
  .hidden-sm {
    display: none;
  }
}

@media (min-width: 768px) {
  .visible-md {
    display: block;
  }
  
  .hidden-md {
    display: none;
  }
}

@media (min-width: 992px) {
  .visible-lg {
    display: block;
  }
  
  .hidden-lg {
    display: none;
  }
}

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }