/* ========================================
   UTILITIES
======================================== */

/* =====================================================
   FILE: utilities.css

   PURPOSE
   Reusable helper classes used throughout the website.
   Utilities solve common layout and styling needs without
   creating page-specific CSS.

   WHEN TO USE
   • Creating consistent spacing
   • Centering content
   • Building grids and flex layouts
   • Applying common shadows or border radii
   • Utility-only styling

   WHEN NOT TO USE
   • Do NOT style specific pages.
   • Do NOT style unique sections.
   • Do NOT add branding here.
   • If only one page needs the style, place it in that
     page's CSS instead.

   EXAMPLES

   .pdk-container
   Centers content and limits maximum width.

   .pdk-grid
   Creates a responsive CSS grid.

   .pdk-section
   Adds standard vertical spacing between sections.

   ===================================================== */

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

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

.pdk-section {
  padding-block: var(--site-section-spacing);
}

.pdk-text-center {
  text-align: center;
}

.pdk-text-left {
  text-align: left;
}

.pdk-grid {
  display: grid;
  gap: var(--site-space-md);
}

.pdk-flex {
  display: flex;
  gap: var(--site-space-md);
}

.pdk-rounded {
  border-radius: var(--site-radius-md);
}

.pdk-shadow {
  box-shadow: var(--site-shadow-md);
}

.pdk-surface {
  background: var(--site-surface);
}

.pdk-hidden {
  display: none !important;
}