/*
 * CLS Fixes & Modern Layout Enhancements
 * Load this file *after* your main stylesheet.
 */

/* 1. Grid-based Page Skeleton for a stable footer */
/* Ensures the main grid container always spans the full dynamic viewport height. */
body {
  margin: 0;
}

r-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Header, Content, Footer */
  min-block-size: 100vh;
  /* Fallback for older browsers */
  /* Use modern dynamic viewport units where available */
  min-block-size: 100svh;
  /* Smallest viewport size, stable after UI retracts */
  min-block-size: 100dvh;
  /* Dynamic viewport size, accounts for browser UI */
}

/* 2. Footer Pinning */
/* The CSS equivalent of the old stickyFooter() JS. */
/* Pushes the footer to the bottom of the grid container. */
r-cell.footer-cell {
  margin-block-start: auto;
  /* Pushes the item to the end of the block axis */
  align-self: end;
  /* Aligns the item to the end of its grid area */
}

/* 3. Image Stability */
/* Prevent layout shifts from images loading by reserving space. */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  /* Allow height to be determined by the aspect ratio and width */
}

/* 4. Layout Containment for Fixed Header */
/* Informs the browser that the header's layout is self-contained, */
/* which can optimize rendering performance. */
.fixed-elements-container {
  contain: layout paint;
}

/* 5. Safer Transitions During Load */
/* Prevents layout-affecting properties from animating on page load, */
/* which could otherwise contribute to CLS. */
.content-not-ready * {
  transition-property: opacity, transform !important;
}

/* 6. Defer Off-screen Content Rendering */
.deferred-content {
  content-visibility: auto;
  /* Use auto keyword to let browser learn actual size after first render */
  /* Initial estimate of 500px is closer to typical content block height */
  contain-intrinsic-block-size: auto 500px;
}