/*
 * -----------------------------------------------------------------------------
 * Icy Math Official Website
 * File: layout.css
 * Description: Page structure, spacing and responsive layout foundations.
 * -----------------------------------------------------------------------------
 */

.container {
  width: min(calc(100% - 2rem), var(--container-width));
  margin-inline: auto;
}

.site-header {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.main {
  padding-bottom: var(--space-24);
}

.section {
  padding-block: var(--space-16);
}

.section__head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  max-width: 760px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  padding-top: var(--space-12);
  padding-bottom: var(--space-16);
}

.hero__content {
  display: grid;
  gap: var(--space-6);
}

.hero__title {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  max-width: 10ch;
}

.hero__subtitle {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  max-width: 32rem;
  color: var(--text-secondary);
}

.hero__description {
  font-size: 1rem;
  max-width: 42rem;
  color: var(--text-muted);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}