/* Platypus CMS — Core Scaffolding
 *
 * This file contains ONLY structural CSS for the page framework.
 * Block-specific CSS is loaded on-demand from individual block files.
 * All visual styling (colors, typography, spacing) belongs in themes.
 */

:root {
  /* Layout structure */
  --plp-container-width: 1200px;
  --plp-grid-gap: 1rem;

  /* Breakpoints (for reference, used in media queries) */
  --plp-breakpoint-sm: 576px;
  --plp-breakpoint-md: 768px;
  --plp-breakpoint-lg: 992px;
}

/* ================================================================
   BASE RESETS
   ================================================================ */

/* Reset body margin for consistent full-width calculations */
body {
  margin: 0;
}

.plp-page {
  min-height: 50vh;
  /* Prevent horizontal scroll from 100vw elements when scrollbar is visible */
  overflow-x: clip;
  container-type: inline-size;
}

.plp-page *, .plp-page *::before, .plp-page *::after {
  box-sizing: border-box;
}

.plp-page img {
  max-width: 100%;
  height: auto;
}

/* ================================================================
   LAYOUT CONTAINERS
   ================================================================ */

.plp-slot {
  width: 100%;
}

.plp-container {
  max-width: var(--plp-container-width);
  margin-inline: auto;
}

.plp-container-narrow {
  max-width: var(--plp-breakpoint-md);
  margin-inline: auto;
}

/* Full-width section — breaks out of parent container */
.plp-block-section.plp-section-full {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Inner container in full-width section uses padding to match slot container alignment */
.plp-block-section.plp-section-full .plp-section-inner.plp-container {
  max-width: none;
  width: 100%;
  /* Padding centers content to match --plp-container-width */
  padding-inline: calc((100% - var(--plp-container-width)) / 2);
}

.plp-block-section.plp-section-full .plp-section-inner.plp-container-narrow {
  max-width: none;
  width: 100%;
  padding-inline: calc((100% - var(--plp-breakpoint-md)) / 2);
}

/* Legacy breakout utility */
.plp-section-breakout {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ================================================================
   SIMPLE BLOCKS (no separate CSS file needed)
   ================================================================ */

/* Text block */
.plp-block-text p:last-child {
  margin-bottom: 0;
}

/* Heading block */
.plp-block-heading {
  margin: 0;
}

/* Image block */
.plp-block-image {
  margin: 0;
}

.plp-block-image img {
  display: block;
}

/* Section block */
.plp-block-section {
  width: 100%;
}

/* Inner wrapper fills section width */
.plp-section-inner {
  width: 100%;
}

/* Ensure container fills section width regardless of align-items setting */
.plp-block-section .plp-section-inner.plp-container,
.plp-block-section .plp-section-inner.plp-container-narrow {
  width: 100%;
}

/* HTML block (passthrough) */
.plp-block-html {
  /* No scaffolding needed */
}

/* Spacer block */
.plp-block-spacer {
  /* Height set via inline style */
}

/* Divider block */
.plp-block-divider {
  border: none;
  margin: 0;
}

/* Semantic section wrappers (template-rendered sections) */
.plp-section, .plp-aside, .plp-nav, .plp-article { width: 100%; }

/* ================================================================
   CONTENT LAYOUT (sidebar / stacked)
   ================================================================ */

.plp-content-layout {
  width: 100%;
}

.plp-content-layout.plp-layout-sidebar-right {
  display: grid;
  grid-template-columns: 1fr var(--plp-sidebar-width, 300px);
  gap: var(--plp-grid-gap, 1rem);
}

.plp-content-layout.plp-layout-sidebar-left {
  display: grid;
  grid-template-columns: var(--plp-sidebar-width, 300px) 1fr;
  gap: var(--plp-grid-gap, 1rem);
}

/* Children fill their grid cell */
.plp-content-layout > * {
  min-width: 0;
}