/* 1. Define a containment context */
.card-container {
  container-type: inline-size;  /* respond to width */
  container-name: card-wrap;    /* optional: name the container */
}

/* Shorthand */
.card-container {
  container: card-wrap / inline-size;
}

/* 2. Query the container */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

/* Query a named container */
@container card-wrap (min-width: 600px) {
  .card__title {
    font-size: 1.5rem;
  }
}

/* container-type values:
   inline-size  — query inline dimension (width in horizontal)
   size         — query both dimensions
   normal       — no containment (default) */

/* Select a parent that contains a specific child */
.card:has(img) {
  padding-top: 0;  /* remove top padding when card has an image */
}

/* Style a label when its input is focused */
label:has(+ input:focus) {
  color: #6366f1;
}

/* Highlight a form group with an invalid field */
.form-group:has(:invalid) {
  border-color: #ef4444;
}

/* Select an element that does NOT contain something */
.card:not(:has(img)) {
  background: #f0f0f0;  /* text-only cards */
}

/* Style body based on modal being open */
body:has(.modal.open) {
  overflow: hidden;
}

/* Style a grid differently based on child count */
.grid:has(> :nth-child(4)) {
  grid-template-columns: repeat(2, 1fr);  /* 4+ items = 2 columns */
}

/* 1. Declare layer order (low → high priority) */
@layer reset, base, components, utilities;

/* 2. Add styles to layers */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
  }
}

@layer base {
  a { color: #6366f1; }
  h1 { font-size: 2rem; }
}

@layer components {
  .btn {
    padding: 0.5rem 1rem;
    background: #6366f1;
    color: white;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

/* Utilities layer wins over components, even with
   lower specificity, because it's declared later! */

/* Import a stylesheet into a layer */
@import url('vendor.css') layer(vendor);

/* Native CSS nesting — works in all modern browsers */
.card {
  padding: 1.5rem;
  border-radius: 12px;
  background: var(--bg-surface);

  /* Nested element */
  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  /* Pseudo-classes */
  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  /* Pseudo-elements */
  &::before {
    content: "";
    display: block;
  }

  /* Media queries can nest too! */
  @media (width >= 768px) {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

  /* Modifier patterns */
  &.card--featured {
    border-color: var(--color-primary);
  }
}

/* Deeply nested (but keep it shallow for readability!) */
.nav {
  & .nav-list {
    display: flex;

    & .nav-item {
      &:hover {
        color: var(--color-primary);
      }
    }
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.grid-item {
  display: grid;
  /* Inherit row tracks from parent grid */
  grid-row: span 3;               /* item spans 3 row tracks */
  grid-template-rows: subgrid;    /* children use parent's rows */
}

/* Now all .grid-item children align perfectly across the grid,
   even if their content has different lengths! */

/* Works for columns too */
.wide-item {
  grid-column: span 2;
  grid-template-columns: subgrid;
}

/* color-mix(in colorspace, color1 percentage, color2 percentage) */

/* Mix colors 50/50 */
background: color-mix(in srgb, #6366f1, #f472b6);

/* Create a tint (mix with white) */
--primary-light: color-mix(in srgb, #6366f1 30%, white);

/* Create a shade (mix with black) */
--primary-dark: color-mix(in srgb, #6366f1 70%, black);

/* Create semi-transparent version */
--primary-50: color-mix(in srgb, #6366f1 50%, transparent);

/* Use oklch for perceptually uniform mixing */
--blend: color-mix(in oklch, #6366f1, #34d399);

/* Works with CSS variables! */
--hover-bg: color-mix(in srgb, var(--color-primary) 15%, transparent);

/* Theme all form controls globally */
:root {
  accent-color: #6366f1;
}

/* Or per-element */
.custom-checkbox {
  accent-color: #34d399;
}

.danger-checkbox {
  accent-color: #ef4444;
}

/* Classic (problematic on mobile) */
height: 100vh;      /* includes space behind address bar on mobile */

/* Dynamic viewport height — changes as browser chrome shows/hides */
height: 100dvh;     /* updates dynamically — RECOMMENDED for most cases */

/* Small viewport height — minimum visible area (address bar showing) */
height: 100svh;     /* safe: never extends behind browser chrome */

/* Large viewport height — maximum visible area (address bar hidden) */
height: 100lvh;     /* same as 100vh on desktop */

/* Width equivalents also exist: dvw, svw, lvw */
/* Block/inline equivalents: dvb, svb, lvb, dvi, svi, lvi */

/* Common pattern for mobile-safe full-height layouts */
.hero {
  min-height: 100svh;  /* or 100dvh */
}

/* Old way: single transform property */
.element {
  transform: translateX(50px) rotate(45deg) scale(1.2);
}

/* New way: individual properties */
.element {
  translate: 50px 0;
  rotate: 45deg;
  scale: 1.2;
}

/* The big advantage: animate them independently! */
.card {
  translate: 0 0;
  scale: 1;
  transition: translate 0.3s ease, scale 0.2s ease;
}

.card:hover {
  translate: 0 -4px;  /* lifts up slowly */
  scale: 1.02;         /* grows quickly */
}

/* No more overriding the entire transform chain */
.base { rotate: 10deg; }
.base:hover { scale: 1.1; }  /* rotation is preserved! */

/* Register a custom property with type information */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --color-start {
  syntax: "<color>";
  initial-value: #6366f1;
  inherits: false;
}

/* Now you can ANIMATE the gradient! */
.gradient-box {
  background: linear-gradient(
    var(--gradient-angle),
    var(--color-start),
    #f472b6
  );
  transition: --gradient-angle 1s, --color-start 0.5s;
}

.gradient-box:hover {
  --gradient-angle: 180deg;
  --color-start: #34d399;
}

/* Supported syntax types:
   "<length>"    "<number>"     "<percentage>"
   "<color>"     "<angle>"      "<time>"
   "<integer>"   "<length-percentage>"
   "<custom-ident>"  "<image>"  "*" (any) */

/* Element's normal state */
.toast {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s, translate 0.3s;
}

/* State when element first appears */
@starting-style {
  .toast {
    opacity: 0;
    translate: 0 20px;
  }
}

/* Works with display transitions too! */
.dialog[open] {
  opacity: 1;
  scale: 1;
  transition: opacity 0.3s, scale 0.3s, display 0.3s allow-discrete;
}

@starting-style {
  .dialog[open] {
    opacity: 0;
    scale: 0.9;
  }
}

/* Apply to headings for balanced line wrapping */
h1, h2, h3 {
  text-wrap: balance;     /* balances lines evenly */
}

/* For body text that should fill all available space */
p {
  text-wrap: pretty;      /* avoids orphans on last line */
}

/* Note: balance works best on short text (max ~6 lines).
   For longer text, the browser falls back to normal wrapping. */

/* Check if a property is supported */
@supports (container-type: inline-size) {
  .card-wrapper {
    container-type: inline-size;
  }
}

/* Check if NOT supported (fallback) */
@supports not (container-type: inline-size) {
  .card {
    /* media query fallback */
  }
}

/* Check for a selector */
@supports selector(:has(*)) {
  /* use :has() safely */
}

/* Combine with AND / OR */
@supports (display: grid) and (gap: 1rem) {
  /* grid with gap support */
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Declare order from lowest to highest priority */
@layer reset, vendor, base, layout, components, utilities;

/* Import third-party CSS into a low-priority layer */
@import url('normalize.css') layer(reset);
@import url('library.css') layer(vendor);

/* Utility classes always win (highest layer) */
@layer utilities {
  .hidden { display: none !important; }
  .sr-only { /* screen reader only */ }
}