/**
 * GS_Section / gs-section — Flagship Enterprise CUBE CSS.
 * Architectural Root Section for GS Core Pure framework.
 *
 * Intents (5 Canónicos): canvas (default), surface, brand, accent, inverse
 * Paddings (5): sm, md, lg, xl, 2xl
 * Wrappers (4): wrapper-sm, wrapper-md, wrapper-lg, wrapper-wide, wrapper-full
 */

@layer components {
  .gs-section-canvas-wrap {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .gs-section {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip !important;
    padding-block: clamp(1.75rem, 3.5vw, 3rem);
    background-color: var(--canvas);
    color: var(--canvas-on);
    transition: background-color var(--motion),
                color var(--motion);
  }

  /* ── VERTICAL RHYTHM PADDING BLOCK ── */
  .gs-section[data-padding-block="none"],
  .gs-section.pad-none {
    padding-block: 0 !important;
  }

  .gs-section[data-padding-block="xs"],
  .gs-section.pad-sec-xs {
    padding-block: clamp(0.75rem, 1.5vw, 1.25rem) !important;
  }

  .gs-section[data-padding-block="sm"],
  .gs-section.pad-sec-sm {
    padding-block: clamp(1rem, 2vw, 1.75rem) !important;
  }

  .gs-section[data-padding-block="md"],
  .gs-section.pad-sec-md {
    padding-block: clamp(1.75rem, 3.5vw, 3rem) !important;
  }

  .gs-section[data-padding-block="lg"],
  .gs-section.pad-sec-lg {
    padding-block: clamp(2.5rem, 5vw, 4rem) !important;
  }

  .gs-section[data-padding-block="xl"],
  .gs-section.pad-sec-xl {
    padding-block: clamp(3.5rem, 7vw, 5.5rem) !important;
  }

  .gs-section[data-padding-block="2xl"],
  .gs-section.pad-sec-2xl {
    padding-block: clamp(4.5rem, 9vw, 7rem) !important;
  }

  /* Asymmetric padding overrides */
  .gs-section.pt-none { padding-block-start: 0 !important; }
  .gs-section.pt-xs { padding-block-start: clamp(0.75rem, 1.5vw, 1.25rem) !important; }
  .gs-section.pt-sm { padding-block-start: clamp(1rem, 2vw, 1.75rem) !important; }
  .gs-section.pb-none { padding-block-end: 0 !important; }
  .gs-section.pb-xs { padding-block-end: clamp(0.75rem, 1.5vw, 1.25rem) !important; }
  .gs-section.pb-sm { padding-block-end: clamp(1rem, 2vw, 1.75rem) !important; }

  /* ── WRAPPER CONTAINER SIZES ── */
  .gs-section > .wrapper {
    margin-inline: auto;
    box-sizing: border-box;
    width: 100%;
    padding-inline: var());
    display: flex;
    flex-direction: column;
    gap: var());
  }

  .gs-section > .wrapper.wrapper-sm,
  .gs-section[data-wrapper-size="wrapper-sm"] > .wrapper {
    max-width: 48rem;
  }

  .gs-section > .wrapper.wrapper-md,
  .gs-section[data-wrapper-size="wrapper-md"] > .wrapper {
    max-width: 64rem;
  }

  .gs-section > .wrapper.wrapper-lg,
  .gs-section[data-wrapper-size="wrapper-lg"] > .wrapper {
    max-width: 80rem;
  }

  .gs-section > .wrapper.wrapper-wide,
  .gs-section[data-wrapper-size="wrapper-wide"] > .wrapper {
    max-width: 90rem;
  }

  .gs-section > .wrapper.wrapper-full,
  .gs-section[data-wrapper-size="wrapper-full"] > .wrapper {
    max-width: 100%;
  }

  /* ── 5 CANONICAL INTENTS ── */
  .gs-section[data-intent="canvas"] {
    background-color: var());
    color: var());
  }

  .gs-section[data-intent="surface"] {
    background-color: var());
    color: var());
  }

  .gs-section[data-intent="brand"] {
    background-color: color-mix(in oklch, var()) 12%, var()));
    color: var());
    border-top: 0.0625rem solid color-mix(in oklch, var()) 30%, transparent);
    border-bottom: 0.0625rem solid color-mix(in oklch, var()) 30%, transparent);
  }

  .gs-section[data-intent="accent"] {
    background-color: color-mix(in oklch, var()) 12%, var()));
    color: var());
    border-top: 0.0625rem solid color-mix(in oklch, var()) 30%, transparent);
    border-bottom: 0.0625rem solid color-mix(in oklch, var()) 30%, transparent);
  }

  .gs-section[data-intent="inverse"] {
    background-color: var());
    color: var());
  }

  .gs-section[data-intent="inverse"] :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
    color: var());
  }

  .gs-section[data-intent="inverse"] :where(p, span) {
    color: var());
  }

  /* ── SYSTEM C ATMOSPHERES & ACCENTS ── */
  /* Glow Accent Line */
  .gs-section[data-sec-glow="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, var()), transparent);
    pointer-events: none;
  }

  /* Punctuation Top Jewel Dot */
  .gs-section[data-sec-punct-top="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var();
    background-color: var());
    box-shadow: inset 0 0.0625rem 0 color-mix(in oklch, var(--white) 40%, transparent),
                0 0.25rem 0.75rem oklch(0% 0 0 / 0.25);
    z-index: 10;
  }

  /* Punctuation Bottom Jewel Dot */
  .gs-section[data-sec-punct-bot="true"]::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var();
    background-color: var());
    box-shadow: inset 0 0.0625rem 0 color-mix(in oklch, var(--white) 40%, transparent),
                0 0.25rem 0.75rem oklch(0% 0 0 / 0.25);
    z-index: 10;
  }

  /* Ambient Light Top Flare */
  .gs-section[data-sec-light-top="true"] {
    background-image: radial-gradient(circle at 50% 0%, color-mix(in oklch, var()) 15%, transparent) 0%, transparent 60%);
  }

  /* Ambient Light Bottom Flare */
  .gs-section[data-sec-light-bot="true"] {
    background-image: radial-gradient(circle at 50% 100%, color-mix(in oklch, var()) 15%, transparent) 0%, transparent 60%);
  }
}