/* ============================================================
   AshiX Studio: WordPress block styles

   The project body is authored in the WP block editor and injected
   into [data-cms-body]. WordPress's own stylesheets never load here,
   so this file reproduces them: the constrained-layout system first,
   then the individual blocks.

   Load after styles.css, on project.html only.
   ============================================================ */

/* ============================================================
   0. Tokens

   WordPress emits inline styles referencing --wp--preset--* vars
   (e.g. margin-top: var(--wp--preset--spacing--50)). Without these
   definitions those declarations resolve to nothing and spacing
   collapses. Map them onto the site's own scale.
   ============================================================ */

[data-cms-body] {
  --content: 42em;   /* default column, matches .case-prose */
  --wide: 72rem;     /* "Wide width" in the editor */

  --wp--style--block-gap: clamp(1.1rem, 2.5vw, 1.6rem);

  --wp--preset--spacing--20: 0.75rem;
  --wp--preset--spacing--30: 1.25rem;
  --wp--preset--spacing--40: 2rem;
  --wp--preset--spacing--50: clamp(2rem, 5vw, 3.5rem);
  --wp--preset--spacing--60: clamp(3rem, 7vw, 5rem);
  --wp--preset--spacing--70: clamp(4rem, 9vw, 6.5rem);
  --wp--preset--spacing--80: clamp(5rem, 11vw, 8rem);
}

/* ============================================================
   1. Constrained layout

   Every child sits in the content column. .alignwide steps out to
   --wide. .alignfull spans the container. Same three-tier model the
   editor previews, so what you compose is what ships.
   ============================================================ */

/* The reading column shares its left edge with the wide column, so a
   paragraph lines up under the image above it. That is what the editor
   canvas shows. Centering the text inside the wide column instead would
   indent it. */
[data-cms-body] {
  display: grid;
  max-width: none; /* overrides .case-prose */
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start content-start] min(var(--content), 100%) [content-end]
    minmax(0, calc(var(--wide) - var(--content))) [wide-end]
    minmax(0, 1fr) [full-end];
}

[data-cms-body] > * {
  grid-column: content;
  min-width: 0;
}

/* Text sits in the reading column. Media defaults to the wide column,
   which is what the block editor previews. Explicit Full width still
   spans the container. */
[data-cms-body] > figure,
[data-cms-body] > .wp-block-image,
[data-cms-body] > .wp-block-gallery,
[data-cms-body] > .wp-block-columns,
[data-cms-body] > .wp-block-media-text,
[data-cms-body] > .wp-block-embed,
[data-cms-body] > .wp-block-video,
[data-cms-body] > .alignwide {
  grid-column: wide;
}

[data-cms-body] > .alignfull {
  grid-column: full;
}

/* Left/right floats and explicit centering stay in the reading column. */
[data-cms-body] > .wp-block-image.alignleft,
[data-cms-body] > .wp-block-image.alignright,
[data-cms-body] > .wp-block-image.aligncenter {
  grid-column: content;
}

/* Vertical rhythm between top-level blocks. */
[data-cms-body] > * + * {
  margin-block-start: var(--wp--style--block-gap);
}

[data-cms-body] > figure,
[data-cms-body] > .wp-block-gallery,
[data-cms-body] > .wp-block-columns,
[data-cms-body] > .wp-block-media-text,
[data-cms-body] > .wp-block-embed,
[data-cms-body] > .wp-block-video {
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

/* The image block writes an inline width when it has been resized, and
   carries the intrinsic size of whichever image size WordPress picked.
   Either will make a single image narrower than a gallery in the same
   column. Force both to the track. Floated and centered images opt out. */
[data-cms-body] > figure,
[data-cms-body] > .wp-block-gallery,
[data-cms-body] > .wp-block-embed,
[data-cms-body] > .wp-block-video {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

[data-cms-body] > figure.wp-block-image:not(.alignleft):not(.alignright):not(.aligncenter) {
  width: 100% !important;
  max-width: none !important;
}

/* WordPress puts these on container blocks; without core CSS
   loaded they would be inert. */
.is-layout-flex {
  display: flex;
  gap: var(--wp--style--block-gap);
  flex-wrap: wrap;
}

.is-layout-grid {
  display: grid;
  gap: var(--wp--style--block-gap);
}

.is-layout-constrained > * {
  max-width: var(--content);
  margin-inline: auto;
}

.is-layout-constrained > .alignwide {
  max-width: var(--wide);
}

.is-layout-constrained > .alignfull {
  max-width: none;
}

/* ============================================================
   2. Typography
   ============================================================ */

[data-cms-body] h2 {
  font-size: var(--step-2);
  margin-block: clamp(2.5rem, 6vw, 4rem) 1rem;
}

[data-cms-body] h3 {
  font-size: var(--step-1);
  margin-block: clamp(1.75rem, 4vw, 2.5rem) 0.75rem;
}

[data-cms-body] p {
  color: var(--dim);
  text-wrap: pretty;
}

[data-cms-body] a {
  color: var(--cobalt-bright);
  text-underline-offset: 3px;
}

[data-cms-body] strong {
  color: var(--paper);
  font-weight: 600;
}

[data-cms-body] ul,
[data-cms-body] ol {
  color: var(--dim);
  padding-inline-start: 1.25rem;
}

[data-cms-body] li + li {
  margin-block-start: 0.5rem;
}

[data-cms-body] p:empty {
  display: none;
}

.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right; }
.has-text-align-left   { text-align: left; }

/* ============================================================
   3. Images
   ============================================================ */

/* Kill the UA default margin on figures without out-specifying the
   top-level margin-block rule above. :where() has zero specificity. */
:where([data-cms-body]) figure {
  margin: 0;
}

[data-cms-body] img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.wp-block-image.aligncenter {
  margin-inline: auto;
}

.wp-block-image.alignleft,
.wp-block-image.alignright {
  max-width: 50%;
}

.wp-block-image.alignleft  { float: left;  margin: 0.5rem 2rem 1.5rem 0; }
.wp-block-image.alignright { float: right; margin: 0.5rem 0 1.5rem 2rem; }

figcaption,
.wp-element-caption {
  margin-block-start: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--faint);
  text-align: left;
}

/* ============================================================
   4. Gallery
   ============================================================ */

/* WordPress puts `columns-default` on an unconfigured gallery and
   `columns-N` only when you set the Columns control. Match N explicitly
   -- a wildcard [class*="columns-"] also catches `columns-default` and
   forces a 3-up grid, leaving 2-image galleries two-thirds wide. */
.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.wp-block-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }

.wp-block-gallery figure {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* WordPress adds .is-cropped when "Crop images" is on (the default).
   Core does NOT crop to a fixed ratio -- it makes every image in a row
   the same height as the tallest, keeping portrait shots portrait.
   Reproduce that: stretch the grid row, fill it, cover the overflow. */
.wp-block-gallery.is-cropped figure {
  height: 100%;
}

.wp-block-gallery.is-cropped img {
  flex: 1;
  height: 100%;
  object-fit: cover;
}

/* Crop off: every image keeps its own height, tops aligned. */
.wp-block-gallery:not(.is-cropped) {
  align-items: start;
}

.wp-block-gallery:not(.is-cropped) img {
  height: auto;
}

/* ============================================================
   5. Columns, Group, Media & Text
   ============================================================ */

.wp-block-columns {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: flex-start;
}

.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

.wp-block-group {
  min-width: 0;
}

.wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  order: -1;
}

.wp-block-media-text__media img {
  border-radius: 14px;
}

/* ============================================================
   6. Quote, separator, buttons, table, embed, code
   ============================================================ */

[data-cms-body] blockquote {
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--cobalt);
  margin-block: clamp(2rem, 5vw, 3rem);
}

[data-cms-body] blockquote p {
  font-size: var(--step-1);
  color: var(--paper);
  text-wrap: balance;
}

[data-cms-body] cite,
.wp-block-quote__citation {
  display: block;
  margin-block-start: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--faint);
}

[data-cms-body] hr,
.wp-block-separator {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: clamp(2.5rem, 6vw, 4rem);
}

.wp-block-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}

.wp-block-button__link:hover {
  background: var(--cobalt-bright);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line-strong);
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.wp-block-table th,
.wp-block-table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  text-align: left;
  color: var(--dim);
}

.wp-block-table th {
  color: var(--paper);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* An <iframe> has no intrinsic size, so it needs a ratio imposed. */
.wp-block-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
}

/* A <video> carries its own dimensions. Forcing 16:9 letterboxes any
   portrait or square clip. Let it size itself, and match the images. */
[data-cms-body] video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.wp-block-video figcaption {
  margin-block-start: 0.75rem;
}

.wp-block-code,
[data-cms-body] pre {
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--navy);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  overflow-x: auto;
}

/* ============================================================
   7. Mobile
   ============================================================ */

@media (max-width: 48rem) {
  .wp-block-columns,
  .wp-block-media-text {
    display: block;
  }

  .wp-block-column + .wp-block-column,
  .wp-block-media-text__content {
    margin-block-start: clamp(1.5rem, 5vw, 2.5rem);
  }

  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    order: 0;
  }

  .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .wp-block-gallery.columns-1 {
    grid-template-columns: 1fr;
  }

  .wp-block-image.alignleft,
  .wp-block-image.alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}