/* ================================
   LAYOUT & CONTAINER STYLES
   Extracted from Zeitgeist Cloud
   Uses tokens from base CSS files
   ================================ */

/* Base page setup */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background-color: var(--page-bg);
  color: var(--ink);
  text-align: center;
  overflow-x: hidden;
}

/* Flexbox page structure for sticky footer */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main {
  flex: 1 0 auto;
}

/* ================================
   TEXT CONTENT PANEL
   White box with shadow for readable text content.
   Perfect for floating content on busy backgrounds.
   
   Original use: Disclaimer page, How-it-works page
   Replaces: .howitworks-panel and .cloud-panel (were identical)
   ================================ */
.text-content-panel {
  width: 100%;
  max-width: var(--content-width);
  margin: clamp(1rem, 6vmin, 4rem) auto;
  padding: var(--space-lg);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
}

/* ================================
   AD ZONES (Optional)
   Flexible container for ad placements
   ================================ */
.ad-zone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background-color: #F5F5F5;
}

.ad-zone-title {
  font-size: var(--text-sm);
  color: var(--ink);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  width: 100%;
  text-align: center;
}

.ad-slots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  width: 100%;
}

.ad-slot {
  width: clamp(250px, 40vmin, 300px);
  height: clamp(200px, 32vmin, 250px);
  background-color: #e0e0e0;
  border: 2px dashed #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #555;
  font-size: var(--text-sm);
  text-align: center;
  border-radius: var(--radius);
}

.ad-slot::before {
  content: "Reserved Ad Space";
}