/* ==========================================================================
   Whimsy Design System – Page Layout Primitives

   Reusable CSS classes for consistent page structure across Whimsy.
   Two surface types: public (marketing) pages and admin (workspace) pages.

   PUBLIC pages:  .w-public-page  – centered, generous vertical rhythm
   ADMIN pages:   .w-admin-page   – full-width fluid, compact spacing

   Shared primitives inside both:
     .w-page-header        – title block with optional eyebrow, lead, divider
     .w-page-toolbar       – action bar (buttons, filters, counts)
     .w-page-section       – section wrapper with heading
     .w-content-card       – bordered card for panels/forms
     .w-form-section       – form grouping with consistent spacing
     .w-media-grid         – responsive image/grid layout
     .w-empty-state        – centered placeholder when no data
     .w-loading-state      – centered spinner

   Width choices:
     .w-content-narrow     – max-width ~720px (reading width)
     .w-content-standard   – max-width ~960px (default content width)
     .w-content-wide       – no max-width (full container)

   Spacing rules:
     - Sections:   var(--w-spacing-2xl) vertical gap  (3rem / 48px)
     - Cards:      var(--w-spacing-lg) padding         (1.5rem / 24px)
     - Form rows:  var(--w-spacing-md) gap             (1rem / 16px)
     - Toolbar:    var(--w-spacing-lg) bottom margin   (1.5rem / 24px)
     - Page top:   var(--w-spacing-2xl)                (3rem / 48px)

   Heading treatment:
     - Page h1:   Playfair Display, font-weight 600
     - Section h2: same family, smaller size
     - Divider:   .w-page-divider (colored line under page h1)

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

/* ----- Page Shells ------------------------------------------------------- */

/*
  .w-public-page
  Public / marketing page shell.
  Uses centered container with comfortable reading width.
  Wrap the entire page content in this.
*/
.w-public-page {
  padding-top: var(--w-spacing-2xl);
  padding-bottom: var(--w-spacing-3xl);
}

/*
  .w-admin-page
  Admin / workspace page shell.
  Uses fluid container for data-dense layouts.
*/
.w-admin-page {
  padding-top: var(--w-spacing-2xl);
  padding-bottom: var(--w-spacing-3xl);
}

/* ----- Content Widths ---------------------------------------------------- */

.w-content-narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.w-content-standard {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* .w-content-wide intentionally omitted – just use the container directly */

/* ----- Page Header ------------------------------------------------------- */

/*
  .w-page-header
  The top title block for any page. Contains:
    .w-page-eyebrow  – small label above the title (optional)
    h1 or .w-page-title
    .w-page-divider  – decorative line under title
    .w-page-lead     – subtitle / lead paragraph (optional)
    .w-page-actions  – CTA buttons area (optional)
*/
.w-page-header {
  margin-bottom: var(--w-spacing-2xl);
}

.w-page-eyebrow {
  font-size: var(--w-font-size-sm);
  font-weight: var(--w-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--w-color-text-muted);
  margin-bottom: var(--w-spacing-sm);
}

.w-page-title {
  margin-bottom: var(--w-spacing-md);
}

.w-page-divider {
  border: 0;
  border-top: 3px solid var(--w-color-border);
  width: 15%;
  min-width: 3rem;
  margin: var(--w-spacing-lg) 0;
}

.w-page-lead {
  font-size: var(--w-font-size-lg);
  line-height: var(--w-line-height-relaxed);
  color: var(--w-color-text-muted);
  margin-bottom: var(--w-spacing-lg);
}

.w-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--w-spacing-sm);
  margin-top: var(--w-spacing-md);
}

/* ----- Page Toolbar (Admin) ---------------------------------------------- */

/*
  .w-page-toolbar
  Horizontal action bar for admin pages. Contains buttons,
  filters, counts, etc. Sticks below the header.
*/
.w-page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--w-spacing-sm);
  margin-bottom: var(--w-spacing-lg);
}

.w-page-toolbar .w-toolbar-end {
  margin-left: auto;
}

/* ----- Section Wrapper --------------------------------------------------- */

/*
  .w-page-section
  A distinct section within a page, with optional heading.
*/
.w-page-section {
  margin-bottom: var(--w-spacing-2xl);
}

.w-page-section:last-child {
  margin-bottom: 0;
}

.w-page-section-title {
  margin-bottom: var(--w-spacing-md);
}

/* ----- Content Card ------------------------------------------------------ */

/*
  .w-content-card
  Bordered card for panels, form groups, info blocks.
  Used in both public and admin contexts.
*/
.w-content-card {
  background-color: var(--w-color-surface-card);
  border: 1px solid var(--w-color-border);
  border-radius: var(--w-radius-lg);
  padding: var(--w-spacing-lg);
  margin-bottom: var(--w-spacing-lg);
}

.w-content-card:last-child {
  margin-bottom: 0;
}

.w-content-card-title {
  margin-bottom: var(--w-spacing-md);
}

/* ----- Form Section ------------------------------------------------------ */

/*
  .w-form-section
  Wrapper for form rows. Consistent gap between form groups.
*/
.w-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--w-spacing-md);
}

/* ----- Media Grid -------------------------------------------------------- */

/*
  .w-media-grid
  Responsive grid for images, cards, gallery items.
  Defaults to 3 columns on desktop, 2 on tablet, 1 on mobile.
  Override with modifier classes.
*/
.w-media-grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--w-spacing-lg);
}

.w-media-grid > * {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .w-media-grid > * {
    flex: 0 0 calc(50% - var(--w-spacing-lg) / 2);
    max-width: calc(50% - var(--w-spacing-lg) / 2);
  }
}

@media (min-width: 992px) {
  .w-media-grid > * {
    flex: 0 0 calc(33.333% - var(--w-spacing-lg) * 2 / 3);
    max-width: calc(33.333% - var(--w-spacing-lg) * 2 / 3);
  }
}

/* 2-column variant */
.w-media-grid-cols-2 > * {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .w-media-grid-cols-2 > * {
    flex: 0 0 calc(50% - var(--w-spacing-lg) / 2);
    max-width: calc(50% - var(--w-spacing-lg) / 2);
  }
}

/* 4-column variant */
.w-media-grid-cols-4 > * {
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 992px) {
  .w-media-grid-cols-4 > * {
    flex: 0 0 calc(25% - var(--w-spacing-lg) * 3 / 4);
    max-width: calc(25% - var(--w-spacing-lg) * 3 / 4);
  }
}

/* ----- Empty State ------------------------------------------------------- */

/*
  .w-empty-state
  Centered placeholder for when there's no data.
*/
.w-empty-state {
  text-align: center;
  padding: var(--w-spacing-3xl) var(--w-spacing-lg);
}

.w-empty-state-icon {
  font-size: 3rem;
  opacity: 0.4;
  margin-bottom: var(--w-spacing-md);
}

.w-empty-state-title {
  color: var(--w-color-text-muted);
  margin-bottom: var(--w-spacing-sm);
}

.w-empty-state-text {
  color: var(--w-color-text-subtle);
  margin-bottom: var(--w-spacing-md);
}

/* ----- Loading State ----------------------------------------------------- */

/*
  .w-loading-state
  Centered spinner for async operations.
*/
.w-loading-state {
  text-align: center;
  padding: var(--w-spacing-3xl) var(--w-spacing-lg);
}

/* ----- Public Page Overrides --------------------------------------------- */

/*
  Public pages use a large display-style title matching the original bespoke
  hero markup (display-1, wide divider, serif lead text).
*/
.w-public-page .w-page-title {
  font-family: var(--w-font-heading);
  font-size: 5rem;
  font-weight: var(--w-font-weight-medium);
  line-height: var(--w-line-height-tight);
}

@media (max-width: 575.98px) {
  .w-public-page .w-page-title {
    font-size: 3rem;
  }
}

.w-public-page .w-page-divider {
  border-top-width: 6px;
  border-top-color: rgba(255, 255, 255, 0.5);
  width: 25%;
}

.w-public-page .w-page-lead {
  font-family: var(--w-font-heading);
}

/* ----- Article Page (Public Content Pages) ------------------------------ */

/*
  .w-article-page
  Public content-heavy pages (rules, manager directory, hours, etc.).
  Dark header band with overlapping light content panel.

  Structure:
    <div class="w-article-page">
      <div class="w-article-header">
        <div class="container">
          <div class="w-content-standard mx-auto">
            <h1>Title</h1>
            <hr class="w-article-divider" />
            <div class="w-article-meta">metadata + edit toolbar</div>
          </div>
        </div>
      </div>
      <div class="w-article-body">
        <div class="container">
          <div class="w-article-panel">
            <div class="w-content-standard mx-auto">
              ...content...
            </div>
          </div>
        </div>
      </div>
    </div>
*/

.w-article-page {
  /* no own styles – acts as namespace */
}

.w-article-header {
  padding: var(--w-spacing-2xl) 0 var(--w-spacing-2xl);
  padding: calc(var(--w-spacing-2xl) + 0.5rem) 0 var(--w-spacing-2xl); /* account for navbar */
}

@media (min-width: 992px) {
  .w-article-header {
    padding-top: calc(var(--w-spacing-2xl) + 1.5rem);
  }
}

.w-article-header h1 {
  font-family: var(--w-font-heading);
  font-weight: var(--w-font-weight-medium);
  margin-bottom: 0;
}

.w-article-divider {
  border: 0;
  border-top: 3px solid rgba(255, 255, 255, 0.5);
  width: 15%;
  min-width: 3rem;
  margin: var(--w-spacing-lg) 0;
}

.w-article-meta {
  display: flex;
  align-items: center;
  gap: var(--w-spacing-sm);
  margin-bottom: var(--w-spacing-lg);
  font-size: var(--w-font-size-sm);
  color: rgba(255, 255, 255, 0.75);
}

.w-article-meta-spacer {
  flex: 1;
}

.w-article-body {
  background-color: #fff;
  color: #212529;
}

.w-article-panel {
  background-color: #fff;
  margin-top: calc(-1 * (var(--w-spacing-2xl) + 0.5rem));
  padding: var(--w-spacing-lg) 0 var(--w-spacing-2xl);
}

@media (min-width: 992px) {
  .w-article-panel {
    margin-top: calc(-1 * (var(--w-spacing-2xl) + 1.5rem));
  }
}

/* Rules editor styling inside article pages */
.w-article-page .rules-editor {
  margin-bottom: var(--w-spacing-md);
}

/* ----- Access Denied (Admin) --------------------------------------------- */

/*
  .w-access-denied
  Standard "you don't have permission" block for admin pages.
*/
.w-access-denied {
  padding: var(--w-spacing-2xl) 0;
}