/* AlMaha — layout primitives
   Spaceship Instruction Manual scaffolding: bracket frames, ratio grids,
   spec subgrids, container-query contexts.
   Pairs with tokens.css for colour + spacing. */

/* Shell — center column, predictable gutter */
.shell {
  width: min(100% - calc(var(--gutter) * 2), var(--max-w));
  margin-inline: auto;
}
.shell-wide {
  width: min(100% - calc(var(--gutter) * 1.5), 1680px);
  margin-inline: auto;
}

/* Stack — vertical rhythm with optional density */
.stack { display: grid; gap: var(--gap, 1rem); }
.stack-sm { --gap: 0.5rem; }
.stack-lg { --gap: 1.5rem; }
.stack-xl { --gap: 2.5rem; }

/* Cluster — wrap-friendly inline group */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 0.75rem);
  align-items: center;
}

/* Section — vertical breathing room */
.section {
  padding-block: var(--section-y);
}
.section-tight { padding-block: clamp(2rem, 4vw, 4rem); }

/* Bracket frame — four L-corner brackets via four small backgrounds.
   The brackets are tiny gradients so they recolour with currentColor.
   Hairline (1px) gold by default; the .frame variants override. */
.frame {
  --b-color: var(--gold);
  --b-len: 28px;
  --b-w: 1px;
  position: relative;
  padding: clamp(1.25rem, 2vw, 2rem);
  background-image:
    /* top-left */
    linear-gradient(var(--b-color), var(--b-color)),
    linear-gradient(var(--b-color), var(--b-color)),
    /* top-right */
    linear-gradient(var(--b-color), var(--b-color)),
    linear-gradient(var(--b-color), var(--b-color)),
    /* bottom-left */
    linear-gradient(var(--b-color), var(--b-color)),
    linear-gradient(var(--b-color), var(--b-color)),
    /* bottom-right */
    linear-gradient(var(--b-color), var(--b-color)),
    linear-gradient(var(--b-color), var(--b-color));
  background-repeat: no-repeat;
  background-size:
    var(--b-len) var(--b-w), var(--b-w) var(--b-len),
    var(--b-len) var(--b-w), var(--b-w) var(--b-len),
    var(--b-len) var(--b-w), var(--b-w) var(--b-len),
    var(--b-len) var(--b-w), var(--b-w) var(--b-len);
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
}
.frame-ink  { --b-color: var(--ink); }
.frame-sand { --b-color: var(--sand); }
.frame-thick { --b-w: 2px; --b-len: 38px; }

/* Hairline ratio grid backdrop — used as decoration on dense sections.
   Pure CSS, no SVG; lays a 12-col grid + 6-row baseline at gold/14%. */
.ratio-grid {
  position: relative;
  isolation: isolate;
}
.ratio-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--gold-12) var(--hairline), transparent var(--hairline)),
    linear-gradient(to bottom, var(--gold-12) var(--hairline), transparent var(--hairline));
  background-size: calc(100% / 12) 100%, 100% calc(100% / 6);
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* Spec grid — ASTM-style data table.
   Two-column subgrid: label | value. Multi-row, hairline-divided.
   Works as <dl> with .label and .value children. */
.spec-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 22ch) 1fr;
  align-items: baseline;
  row-gap: 0.5rem;
  column-gap: clamp(1rem, 2vw, 2rem);

  & > dt,
  & > .label {
    font-family: var(--font-data);
    font-size: var(--type-small);
    color: var(--ink-56);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  & > dd,
  & > .value {
    margin: 0;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: var(--type-data);
    color: var(--ink);
    border-bottom: var(--hairline) solid var(--ink-08);
    padding-bottom: 0.5rem;
  }
}

/* Hero-cine — full-bleed stacked picture wrapper */
.hero-cine {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: clip;
  background: var(--ink);
  color: var(--marble);
}
.hero-cine > .hero-pic {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cine > .hero-pic img,
.hero-cine > .hero-pic picture,
.hero-cine > .hero-pic picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-cine > .hero-overlay {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  padding: clamp(2rem, 5vw, 5rem);
  background: linear-gradient(180deg, transparent 35%, rgba(14,14,15,.55) 100%);
}

/* Card */
.card {
  background: var(--marble);
  border: var(--hairline) solid var(--ink-08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);

  &:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--gold-48);
  }
}
.card-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--sand-60);
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card-img { transform: scale(1.04); }

/* Container-query contexts — components query their parent, not the viewport */
.cq-stones,
.cq-projects {
  container-type: inline-size;
  container-name: stones;
}
.grid-stones {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@container stones (min-width: 520px) {
  .grid-stones { grid-template-columns: repeat(2, 1fr); }
}
@container stones (min-width: 880px) {
  .grid-stones { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@container stones (min-width: 1240px) {
  .grid-stones { grid-template-columns: repeat(4, 1fr); }
}
@container stones (min-width: 1600px) {
  .grid-stones { grid-template-columns: repeat(5, 1fr); }
}

/* Filter rail — sticky left rail for materials/projects */
.with-rail {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .with-rail {
    grid-template-columns: [rail] 240px [content] minmax(0, 1fr);
  }
  .with-rail > .rail { position: sticky; top: 6rem; align-self: start; }
}

/* Vein break — gradient line replacement, scroll-revealed when in motion.css */
.vein-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Inline numeric — RTL-safe LTR numerals when needed */
[dir="rtl"] .ltr-num { direction: ltr; display: inline-block; }