/**
 * @file
 * Layout grid CSS — attribute-selector rules for grid display, region spans,
 * responsive breakpoints, alignment, and container width.
 *
 * Replaces inline style generation in LayoutEntity.php. Per-instance values
 * are set as CSS custom properties on data-attributed elements; this file
 * provides the static rules that consume them.
 */

/* === Grid display === */
/* !important needed because DOM entity CSS (theme weight) loads after this file
   (layout weight) and can override grid properties. data-grid-columns is the
   authoritative grid marker — its grid structure must be deterministic.
   Exception: when a dom:style entity explicitly sets field_display (e.g. flex),
   Dom::bindToElement() adds data-dom-display-override and the dom:style's
   display value takes precedence. Grid template/gap vars remain available. */
[data-grid-columns]:not([data-dom-display-override]) {
  display: grid !important;
  grid-template-columns: var(--ds-grid-responsive-template, var(--ds-grid-template, repeat(var(--ds-grid-cols, 12), minmax(0, 1fr)))) !important;
  column-gap: var(--ds-grid-gap, var(--ds-grid-inner-gutter, 1rem)) !important;
  row-gap: var(--ds-grid-row-gap, var(--ds-grid-gap, var(--ds-grid-inner-gutter, 1rem))) !important;
}

/* Gap fallback for display-overridden elements. No !important so dom:style
   entity gap values (loaded later, same specificity) take precedence.
   Provides layout-level gap when no dom:style gap is set. */
[data-grid-columns] {
  column-gap: var(--ds-grid-gap, var(--ds-grid-inner-gutter, 1rem));
  row-gap: var(--ds-grid-row-gap, var(--ds-grid-gap, var(--ds-grid-inner-gutter, 1rem)));
}

/* === Container width types === */
[data-grid-width-type="fixed"],
[data-grid-width-type="narrow"],
[data-grid-width-type="wide"] {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
[data-grid-width-type="fixed"] {
  max-width: var(--ds-container-width, var(--ds-grid-container-width, 1200px));
}
[data-grid-width-type="narrow"] {
  max-width: calc(var(--ds-container-width, var(--ds-grid-container-width, 1200px)) * 0.8);
}
[data-grid-width-type="wide"] {
  max-width: calc(var(--ds-container-width, var(--ds-grid-container-width, 1200px)) * 1.167);
}

/* === Responsive padding on outermost constrained containers === */
/* Only exclude nesting inside other constrained (fixed/narrow/wide) parents.
   Constrained containers inside fluid parents are still "outermost" for padding. */
[data-grid-width-type]:not([data-grid-width-type="fluid"]):not(
  [data-grid-width-type="fixed"] [data-grid-width-type]
):not(
  [data-grid-width-type="narrow"] [data-grid-width-type]
):not(
  [data-grid-width-type="wide"] [data-grid-width-type]
) {
  padding-left: var(--ds-grid-outer-gutter, 1rem);
  padding-right: var(--ds-grid-outer-gutter, 1rem);
}

/* === Region spans 1–12 === */
[data-region-span="1"]  { grid-column: span 1; }
[data-region-span="2"]  { grid-column: span 2; }
[data-region-span="3"]  { grid-column: span 3; }
[data-region-span="4"]  { grid-column: span 4; }
[data-region-span="5"]  { grid-column: span 5; }
[data-region-span="6"]  { grid-column: span 6; }
[data-region-span="7"]  { grid-column: span 7; }
[data-region-span="8"]  { grid-column: span 8; }
[data-region-span="9"]  { grid-column: span 9; }
[data-region-span="10"] { grid-column: span 10; }
[data-region-span="11"] { grid-column: span 11; }
[data-region-span="12"] { grid-column: span 12; }

/* === Responsive rules === */
/* ALL responsive @media rules (region spans, column reduction, mobile stacking)
   are generated dynamically by GridVariableGenerator::generateResponsiveCss()
   using theme entity breakpoint values. Injected in the
   <style data-design-system-grid> block at runtime. No hardcoded breakpoints. */

/* === Grid alignment enums === */
[data-grid-justify-content="start"]         { justify-content: start; }
[data-grid-justify-content="center"]        { justify-content: center; }
[data-grid-justify-content="end"]           { justify-content: end; }
[data-grid-justify-content="space-between"] { justify-content: space-between; }
[data-grid-justify-content="space-around"]  { justify-content: space-around; }
[data-grid-justify-content="space-evenly"]  { justify-content: space-evenly; }
[data-grid-justify-content="stretch"]       { justify-content: stretch; }

[data-grid-align-content="start"]         { align-content: start; }
[data-grid-align-content="center"]        { align-content: center; }
[data-grid-align-content="end"]           { align-content: end; }
[data-grid-align-content="space-between"] { align-content: space-between; }
[data-grid-align-content="space-around"]  { align-content: space-around; }
[data-grid-align-content="space-evenly"]  { align-content: space-evenly; }
[data-grid-align-content="stretch"]       { align-content: stretch; }

[data-grid-justify-items="start"]   { justify-items: start; }
[data-grid-justify-items="center"]  { justify-items: center; }
[data-grid-justify-items="end"]     { justify-items: end; }
[data-grid-justify-items="stretch"] { justify-items: stretch; }

[data-grid-align-items="start"]    { align-items: start; }
[data-grid-align-items="center"]   { align-items: center; }
[data-grid-align-items="end"]      { align-items: end; }
[data-grid-align-items="stretch"]  { align-items: stretch; }
[data-grid-align-items="baseline"] { align-items: baseline; }

/* === Region alignment === */
[data-region-justify-self="start"]   { justify-self: start; }
[data-region-justify-self="center"]  { justify-self: center; }
[data-region-justify-self="end"]     { justify-self: end; }
[data-region-justify-self="stretch"] { justify-self: stretch; }

[data-region-align-self="start"]    { align-self: start; }
[data-region-align-self="center"]   { align-self: center; }
[data-region-align-self="end"]      { align-self: end; }
[data-region-align-self="stretch"]  { align-self: stretch; }
[data-region-align-self="baseline"] { align-self: baseline; }

/* === Contextual links in grid layouts === */
.entity[data-grid-columns] > [data-contextual-id] {
  position: absolute;
}

/* === Nested contextual link stacking === */
/* Offset nested triggers horizontally so they don't overlap */
.contextual-region .contextual-region > .contextual {
  right: 28px;
}
.contextual-region .contextual-region .contextual-region > .contextual {
  right: 56px;
}
.contextual-region .contextual-region .contextual-region .contextual-region > .contextual {
  right: 84px;
}
/* Ensure inner triggers are above outer triggers */
.contextual-region .contextual-region > .contextual {
  z-index: 501;
}
.contextual-region .contextual-region .contextual-region > .contextual {
  z-index: 502;
}
.contextual-region .contextual-region .contextual-region .contextual-region > .contextual {
  z-index: 503;
}

/* === DT layout overflow containment === */
[data-dt-layout]:not([data-grid-width-type="fixed"]):not([data-grid-width-type="narrow"]):not([data-grid-width-type="wide"]) {
  max-width: 100%;
}