/**
 * Sections Builder for custom Pages — frontend CSS for the `.pg-*` markup
 * `App\Support\PageSectionRenderer` outputs. Mobile-first: the DEFAULT
 * (no media query) rules stack every Row into a single column; the
 * `min-width: 768px` block below switches to the real 12-column CSS grid.
 * This is the SAME stylesheet the admin Sections Builder's Mobile/Desktop
 * preview toggle loads (see resources/views/admin/pages/sections.php) —
 * one real ruleset, not a duplicated preview-only copy, so what an admin
 * sees in preview is truthful to what ships.
 *
 * Spacing values match this codebase's existing scale (see
 * PageTemplates::paddingValue()/marginValue() — none/16/32/48/64/96).
 */

/* ---- Row / Column grid ------------------------------------------------ */

.pg-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pg-col {
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .pg-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  .pg-row--valign-top { align-items: start; }
  .pg-row--valign-middle { align-items: center; }
  .pg-row--valign-bottom { align-items: end; }

  .pg-col--1 { grid-column: span 1; }
  .pg-col--2 { grid-column: span 2; }
  .pg-col--3 { grid-column: span 3; }
  .pg-col--4 { grid-column: span 4; }
  .pg-col--5 { grid-column: span 5; }
  .pg-col--6 { grid-column: span 6; }
  .pg-col--7 { grid-column: span 7; }
  .pg-col--8 { grid-column: span 8; }
  .pg-col--9 { grid-column: span 9; }
  .pg-col--10 { grid-column: span 10; }
  .pg-col--11 { grid-column: span 11; }
  .pg-col--12 { grid-column: span 12; }
}

.pg-row--gap-none { gap: 0; }
.pg-row--gap-sm { gap: 8px; }
.pg-row--gap-md { gap: 16px; }
.pg-row--gap-lg { gap: 28px; }

/* ---- Per-block alignment / padding / width ---------------------------- */

.pg-block { width: 100%; }
.pg-align-left { text-align: left; }
.pg-align-center { text-align: center; }
.pg-align-right { text-align: right; }
.pg-align-full { /* no text-align override — full-bleed content decides its own alignment */ }

.pg-pad-none { padding: 0; }
.pg-pad-sm { padding: 16px 0; }
.pg-pad-md { padding: 32px 0; }
.pg-pad-lg { padding: 64px 0; }

.pg-contained {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Page-level padding preset (Sections Builder "Page padding") ----- */

.pg-sections.pg-page-pad-compact .pg-block { padding-top: 12px; padding-bottom: 12px; }
.pg-sections.pg-page-pad-comfy .pg-block { padding-top: 32px; padding-bottom: 32px; }
.pg-sections.pg-page-pad-relaxed .pg-block { padding-top: 56px; padding-bottom: 56px; }

/* ---- FAQ --------------------------------------------------------------- */

.pg-faq-list { display: flex; flex-direction: column; gap: 10px; }
.pg-faq-item { border: 1px solid var(--line); border-radius: var(--rs); padding: 14px 16px; background: var(--surface); }
.pg-faq-item summary { cursor: pointer; font-weight: 700; list-style: none; }
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary::before { content: '+'; display: inline-block; width: 18px; color: var(--accent); font-weight: 800; }
.pg-faq-item[open] summary::before { content: '\2212'; }
.pg-faq-item__answer { margin-top: 10px; color: var(--muted); }

/* ---- Team ---------------------------------------------------------------- */

.pg-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.pg-team-card { text-align: center; }
.pg-team-card__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--soft); margin-bottom: 10px; }
.pg-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-team-card__placeholder { display: block; width: 100%; height: 100%; }
.pg-team-card__name { font-weight: 700; }
.pg-team-card__role { color: var(--muted); font-size: var(--fs-13); }

/* ---- Gallery ------------------------------------------------------------- */

.pg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pg-gallery-item { border-radius: var(--rs); overflow: hidden; aspect-ratio: 4 / 3; background: var(--soft); }
.pg-gallery-item img, .pg-gallery-item picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Hours ----------------------------------------------------------------- */

.pg-hours-table { width: 100%; border-collapse: collapse; }
.pg-hours-table th, .pg-hours-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.pg-hours-table th { font-weight: 700; }

/* ---- Map / Video embeds ----------------------------------------------------- */

.pg-map-embed, .pg-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--rs); overflow: hidden; }
.pg-map-embed iframe, .pg-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-map-address { margin-top: 10px; color: var(--muted); }

/* ---- Social links ------------------------------------------------------------ */

.pg-social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-social-link { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-13); }

/* ---- Call to action ------------------------------------------------------------ */

.pg-cta { text-align: inherit; }
.pg-cta__text { margin: 0 0 14px; }

/* ---- Stats -------------------------------------------------------------------- */

.pg-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; text-align: center; }
.pg-stat-item__value { font-size: var(--fs-28, 28px); font-weight: 800; color: var(--accent); }
.pg-stat-item__label { color: var(--muted); font-size: var(--fs-13); }