main {
  padding-left: calc(var(--page-padding) * 2);
  padding-right: calc(var(--page-padding) * 2);
  overflow-x: clip;
}

/* =============================================================================
   DREAMS PAGE — GRID LAYOUT
   Styles for the frontend rendering of the grid field.

   The snippet (fields/grid.php) outputs:
   - A wrapper:  #k-grid-{hash}.k-grid-wrapper
   - Each area:  .grid-area.grid-area--{id}.grid-area-size--{small|medium|large}
   The per-instance grid-template-areas and grid-column/grid-row values are
   written inline by the snippet, so this file handles everything else.
   ============================================================================= */

/* ── Custom properties ────────────────────────────────────────────────────── */
:root {
  /* Aspect ratio of a single grid cell expressed as a decimal.
     Each .grid-area gets aspect-ratio: colSpan / (rowSpan × this value), baked in by the grid.php snippet.
     Must match the cellAspectRatio prop passed to the snippet in dreams.php.
     Examples:
       1      → square cells
       0.5625 → 16:9 landscape
       0.75   → 4:3 landscape
       1.5    → 2:3 portrait           */
  --grid-cell-aspect-ratio: 0.75; /* 4:3 landscape cell — 2 rows = 2:3 portrait area — must match cellAspectRatio passed in dreams.php */

  --grid-cover-radius: 0px; /* border-radius on area cover images  */
  --grid-text-padding: 1.5rem; /* inner padding of the area text overlay */

  --text-overlay-padding: -6rem; /* amount of padding outside the image container of text */
}
@media screen and (max-width: 768px) {
  :root {
    --text-overlay-padding: -1rem; /* amount of padding outside the image container of text */
  }
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
/*
  The display:grid, grid-template-columns and grid-template-areas declarations
  are written inline by the PHP snippet so they can vary per-instance.
  Row heights are driven by aspect-ratio on each .grid-area, also set inline.
  We only add the shared properties here.
*/
.k-grid-wrapper {
  width: calc(100% + (var(--page-padding) * 2));
  margin-left: calc(var(--page-padding) * -1);
  margin-right: calc(var(--page-padding) * -1);
  padding-bottom: 6rem;
  /* Inline snippet sets: display, grid-template-*, gap */
}
@media screen and (max-width: 768px) {
  .k-grid-wrapper {
    /* Push the whole container up to overlap with the title */
    padding-top: 20rem;
    margin-top: -15rem;
  }
}

/* ── Every area ───────────────────────────────────────────────────────────── */
.grid-area {
  position: relative;
  overflow: visible;
}

/* ── Area link — fills the entire area, is the layout context ─────────────── */
.grid-area-link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  color: inherit;
}

/* ── Cover image wrap — clips the image to the cell boundary ──────────────── */
.grid-area-image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--grid-cover-radius);
  container-type: size;
  z-index: 0;
}

.grid-area-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: clamp(
      100%,
      0.5 * 100cqw - var(--crop-focus-x, 0.5) * (100cqw - 100%),
      0%
    )
    clamp(100%, 0.5 * 100cqh - var(--crop-focus-y, 0.5) * (100cqh - 100%), 0%);
  display: block;
}

/* ── Hover radial gradient — centred on the image, bleeds beyond it ───────── */
/*
  ::before sits exactly over the image (inset: 0) but uses the viewport-width
  trick to spread the radial gradient beyond the cell edges. Anchored at
  50% 50% so the magenta core is always centred on the cover image.
  A negative bottom value lets it hang below the image bottom edge.
*/
.grid-area-link::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -70%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  background: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    rgba(var(--color-magenta-rgb), 0.88) 0%,
    rgba(var(--color-magenta-rgb), 0.45) 35%,
    transparent 65%
  );
  z-index: 0;
  opacity: 0;
  transition: opacity var(--duration-nav) var(--ease-default);
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .grid-area-link.is-center::before {
    opacity: 1;
    animation: breathe var(--duration-breathe) var(--ease-in-out) infinite;
  }
}

/*
  TODO
  This needs to be controlled with Javascript, when it reaches the center of
  the viewport it fades in on each element sequentially.
*/
/*.grid-area-link:hover::before {
  opacity: 1;
}*/

/* ── Hover overlay — title only, centred on the image ────────────────────── */
.grid-area-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--duration-dreams-fade) var(--ease-default);
  pointer-events: none;
  width: calc(100% + (var(--text-overlay-padding) * -2));
  transform: translateX(var(--text-overlay-padding));
}

@media screen and (min-width: 769px) {
  .grid-area-overlay::before {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -70%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    background: radial-gradient(
      ellipse 70% 60% at 50% 45%,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.45) 35%,
      transparent 65%
    );
    z-index: -1;
    pointer-events: none;
  }
}

.grid-area-link:hover .grid-area-overlay {
  opacity: 1;
}

/* ── Title text ───────────────────────────────────────────────────────────── */
.grid-area-title {
  display: block;
  color: var(--color-black, #000);
  font-size: var(--body-font-size);
  font-weight: normal;
  line-height: var(--body-line-height);
  text-align: center;
  /*padding-inline: 0.75rem;*/
}

/* ── Size variants ────────────────────────────────────────────────────────── */
/*
  The snippet adds .grid-area-size--small / --medium / --large
  so you can tweak typography, padding or min-height per size.
*/
.grid-area-size--small {
  --grid-text-padding: 1rem;
}

.grid-area-size--medium {
  --grid-text-padding: 1.25rem;
}

.grid-area-size--large {
  --grid-text-padding: 1.75rem;
}

/* ── Article content inside each area ────────────────────────────────────── */
/*
  Each linked article's blocks are rendered directly inside the area div.
  These rules make sure block content sits correctly over the cover image.
*/

/* Headings */
.grid-area h1,
.grid-area h2,
.grid-area h3 {
  color: var(--color-black, #000);
  padding: var(--grid-text-padding);
  padding-bottom: 0;
}

/* Paragraphs */
.grid-area p {
  color: var(--color-black, #000);
  padding: 0 var(--grid-text-padding) var(--grid-text-padding);
  line-height: 1.5;
}

/* Images that are block-level (not the cover) */
.grid-area figure,
.grid-area .k-block-type-image {
  width: 100%;
  flex: 1;
}

.grid-area figure img,
.grid-area .k-block-type-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Empty areas (no linked page) ─────────────────────────────────────────── */
.grid-area--empty .grid-area-image-wrap,
.grid-area:not(:has(.grid-area-link)) {
  background: var(--color-sky, #b5d7cd);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/*
  The snippet outputs its own @media block with the editor-defined mobile
  grid-template-columns, grid-template-rows, grid-template-areas and per-area
  grid-column/grid-row values. This file must not override those layout
  declarations — it only adjusts visual properties at mobile breakpoints.

  If no mobile layout has been defined in the panel yet, the snippet outputs
  no @media block at all and the desktop layout remains in place.
*/
@media screen and (max-width: 768px) {
  /* On mobile the radial gradient is already viewport-wide — no overrides needed */
}