/* ============================================
   PublicPages - Utility Classes
   ============================================
   Helper classes for layout, spacing, text
   ============================================ */

/* ============================================
   CONTAINERS
   ============================================ */
.pp-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .pp-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.pp-container-sm { max-width: 640px; }
.pp-container-md { max-width: 768px; }
.pp-container-lg { max-width: 1024px; }
.pp-container-xl { max-width: 1280px; }
.pp-container-2xl { max-width: 1536px; }

/* ============================================
   SECTIONS
   ============================================ */
.pp-section {
    padding: 4rem 0;
}

@media (min-width: 768px) {
    .pp-section {
        padding: 6rem 0;
    }
}

.pp-section-sm { padding: 2rem 0; }
.pp-section-lg { padding: 8rem 0; }

.pp-section-alt {
    background: var(--color-bg-alt);
}

.pp-section-bordered {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ============================================
   DISPLAY
   ============================================ */
.pp-flex { display: flex; }
.pp-inline-flex { display: inline-flex; }
.pp-grid { display: grid; }
.pp-block { display: block; }
.pp-inline-block { display: inline-block; }
.pp-hidden { display: none; }

.pp-flex-row { flex-direction: row; }
.pp-flex-col { flex-direction: column; }
.pp-flex-wrap { flex-wrap: wrap; }
.pp-flex-nowrap { flex-wrap: nowrap; }

.pp-items-start { align-items: flex-start; }
.pp-items-center { align-items: center; }
.pp-items-end { align-items: flex-end; }
.pp-items-stretch { align-items: stretch; }

.pp-justify-start { justify-content: flex-start; }
.pp-justify-center { justify-content: center; }
.pp-justify-end { justify-content: flex-end; }
.pp-justify-between { justify-content: space-between; }
.pp-justify-around { justify-content: space-around; }

.pp-gap-xs { gap: 0.25rem; }
.pp-gap-sm { gap: 0.5rem; }
.pp-gap-md { gap: 1rem; }
.pp-gap-lg { gap: 1.5rem; }
.pp-gap-xl { gap: 2rem; }
.pp-gap-2xl { gap: 3rem; }

/* ============================================
   GRID
   ============================================ */
.pp-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.pp-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pp-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pp-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pp-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.pp-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (min-width: 640px) {
    .sm\:pp-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:pp-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .md\:pp-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:pp-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:pp-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg\:pp-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:pp-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:pp-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\:pp-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================
   SPACING
   ============================================ */
.pp-m-0 { margin: 0; }
.pp-m-auto { margin: auto; }
.pp-mx-auto { margin-left: auto; margin-right: auto; }
.pp-my-auto { margin-top: auto; margin-bottom: auto; }

.pp-mt-0 { margin-top: 0; }
.pp-mt-sm { margin-top: 0.5rem; }
.pp-mt-md { margin-top: 1rem; }
.pp-mt-lg { margin-top: 1.5rem; }
.pp-mt-xl { margin-top: 2rem; }
.pp-mt-2xl { margin-top: 3rem; }

.pp-mb-0 { margin-bottom: 0; }
.pp-mb-sm { margin-bottom: 0.5rem; }
.pp-mb-md { margin-bottom: 1rem; }
.pp-mb-lg { margin-bottom: 1.5rem; }
.pp-mb-xl { margin-bottom: 2rem; }
.pp-mb-2xl { margin-bottom: 3rem; }

.pp-p-0 { padding: 0; }
.pp-p-sm { padding: 0.5rem; }
.pp-p-md { padding: 1rem; }
.pp-p-lg { padding: 1.5rem; }
.pp-p-xl { padding: 2rem; }
.pp-p-2xl { padding: 3rem; }

.pp-px-md { padding-left: 1rem; padding-right: 1rem; }
.pp-px-lg { padding-left: 1.5rem; padding-right: 1.5rem; }
.pp-py-md { padding-top: 1rem; padding-bottom: 1rem; }
.pp-py-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ============================================
   TEXT
   ============================================ */
.pp-text-xs { font-size: 0.75rem; }
.pp-text-sm { font-size: 0.875rem; }
.pp-text-base { font-size: 1rem; }
.pp-text-lg { font-size: 1.125rem; }
.pp-text-xl { font-size: 1.25rem; }
.pp-text-2xl { font-size: 1.5rem; }
.pp-text-3xl { font-size: 2rem; }
.pp-text-4xl { font-size: 2.5rem; }

.pp-font-normal { font-weight: 400; }
.pp-font-medium { font-weight: 500; }
.pp-font-semibold { font-weight: 600; }
.pp-font-bold { font-weight: 700; }
.pp-font-extrabold { font-weight: 800; }

.pp-text-left { text-align: left; }
.pp-text-center { text-align: center; }
.pp-text-right { text-align: right; }

.pp-text-primary { color: var(--color-text); }
.pp-text-secondary { color: var(--color-text-secondary); }
.pp-text-muted { color: var(--color-text-muted); }
.pp-text-accent { color: var(--color-primary); }
.pp-text-success { color: var(--color-success); }
.pp-text-error { color: var(--color-error); }

.pp-uppercase { text-transform: uppercase; }
.pp-capitalize { text-transform: capitalize; }
.pp-lowercase { text-transform: lowercase; }

.pp-tracking-tight { letter-spacing: -0.02em; }
.pp-tracking-normal { letter-spacing: 0; }
.pp-tracking-wide { letter-spacing: 0.05em; }

.pp-leading-tight { line-height: 1.2; }
.pp-leading-normal { line-height: 1.5; }
.pp-leading-relaxed { line-height: 1.7; }

.pp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   WIDTH & HEIGHT
   ============================================ */
.pp-w-full { width: 100%; }
.pp-w-auto { width: auto; }
.pp-h-full { height: 100%; }
.pp-h-screen { height: 100vh; }
.pp-min-h-screen { min-height: 100vh; }

.pp-max-w-xs { max-width: 320px; }
.pp-max-w-sm { max-width: 384px; }
.pp-max-w-md { max-width: 448px; }
.pp-max-w-lg { max-width: 512px; }
.pp-max-w-xl { max-width: 576px; }
.pp-max-w-2xl { max-width: 672px; }
.pp-max-w-3xl { max-width: 768px; }
.pp-max-w-4xl { max-width: 896px; }
.pp-max-w-5xl { max-width: 1024px; }
.pp-max-w-6xl { max-width: 1152px; }

/* ============================================
   BORDERS
   ============================================ */
.pp-border { border: 1px solid var(--color-border); }
.pp-border-t { border-top: 1px solid var(--color-border); }
.pp-border-b { border-bottom: 1px solid var(--color-border); }
.pp-border-l { border-left: 1px solid var(--color-border); }
.pp-border-r { border-right: 1px solid var(--color-border); }
.pp-border-0 { border: none; }

.pp-rounded-none { border-radius: 0; }
.pp-rounded-sm { border-radius: 4px; }
.pp-rounded { border-radius: 8px; }
.pp-rounded-md { border-radius: 12px; }
.pp-rounded-lg { border-radius: 16px; }
.pp-rounded-xl { border-radius: 24px; }
.pp-rounded-full { border-radius: 9999px; }

/* ============================================
   SHADOWS
   ============================================ */
.pp-shadow-none { box-shadow: none; }
.pp-shadow-sm { box-shadow: var(--shadow-sm); }
.pp-shadow { box-shadow: var(--shadow-md); }
.pp-shadow-md { box-shadow: var(--shadow-md); }
.pp-shadow-lg { box-shadow: var(--shadow-lg); }
.pp-shadow-xl { box-shadow: var(--shadow-xl); }

/* ============================================
   POSITIONING
   ============================================ */
.pp-relative { position: relative; }
.pp-absolute { position: absolute; }
.pp-fixed { position: fixed; }
.pp-sticky { position: sticky; }

.pp-inset-0 { inset: 0; }
.pp-top-0 { top: 0; }
.pp-right-0 { right: 0; }
.pp-bottom-0 { bottom: 0; }
.pp-left-0 { left: 0; }

.pp-z-0 { z-index: 0; }
.pp-z-10 { z-index: 10; }
.pp-z-20 { z-index: 20; }
.pp-z-30 { z-index: 30; }
.pp-z-40 { z-index: 40; }
.pp-z-50 { z-index: 50; }

/* ============================================
   OVERFLOW
   ============================================ */
.pp-overflow-hidden { overflow: hidden; }
.pp-overflow-auto { overflow: auto; }
.pp-overflow-visible { overflow: visible; }
.pp-overflow-x-auto { overflow-x: auto; }
.pp-overflow-y-auto { overflow-y: auto; }

/* ============================================
   VISIBILITY
   ============================================ */
.pp-visible { visibility: visible; }
.pp-invisible { visibility: hidden; }
.pp-opacity-0 { opacity: 0; }
.pp-opacity-50 { opacity: 0.5; }
.pp-opacity-100 { opacity: 1; }

/* ============================================
   RESPONSIVE VISIBILITY
   ============================================ */
.pp-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .pp-hide-mobile {
        display: block;
    }
    .pp-hide-desktop {
        display: none;
    }
}

/* ============================================
   CURSOR
   ============================================ */
.pp-cursor-pointer { cursor: pointer; }
.pp-cursor-default { cursor: default; }
.pp-cursor-not-allowed { cursor: not-allowed; }

/* ============================================
   POINTER EVENTS
   ============================================ */
.pp-pointer-events-none { pointer-events: none; }
.pp-pointer-events-auto { pointer-events: auto; }

/* ============================================
   SELECT
   ============================================ */
.pp-select-none { user-select: none; }
.pp-select-text { user-select: text; }
.pp-select-all { user-select: all; }

/* ============================================
   SR ONLY (Screen Reader)
   ============================================ */
.pp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}