/* featured.css — Featured work layout, galleries, metrics */

/* ── Featured project (stacked, visual dominant) ── */
.featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.featured:last-child { margin-bottom: 0; }

/* reverse modifier retained as no-op for markup compatibility */
.featured.reverse .featured-visual { order: 0; }

.featured-visual {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1513;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.featured-visual:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}

.featured-visual > img,
.featured-visual > video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}
.featured-visual:hover > img,
.featured-visual:hover > video {
  transform: scale(1.025);
}

.featured-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.featured-grid-2:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.featured-grid-2 img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* 2-up gallery cells (OIDN before/after etc.) */
.featured-gallery-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.featured-gallery-2:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.featured-gallery-2 > .cell {
  position: relative;
  background: #1a1513;
}
.featured-gallery-2 > .cell img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.featured-gallery-2 .cell-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdf9f3;
  background: rgba(16,12,10,0.68);
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

/* full-width research plates (multi-panel JPG results) */
.featured-plate {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0908;
  box-shadow: var(--shadow-sm);
  margin-top: 2px;
}
.featured-plate img {
  width: 100%;
  display: block;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}
.featured-plate .cell-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdf9f3;
  background: rgba(16,12,10,0.72);
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
  max-width: calc(100% - 20px);
}
.featured-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.featured-metric {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--accent-soft);
}
.featured-metric .num {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.featured-metric .lbl {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.featured-gallery-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.featured-gallery-2x2:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.featured-gallery-2x2 > * {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  background: #1a1513;
}

.featured-gallery-2x2 .cell {
  position: relative;
}

.featured-gallery-2x2 .cell img,
.featured-gallery-2x2 .cell video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.featured-gallery-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.featured-gallery-3:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.featured-gallery-3 > .cell {
  position: relative;
  background: #1a1513;
}

.featured-gallery-3 > .cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.featured-gallery-3 .cell-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdf9f3;
  background: rgba(16,12,10,0.68);
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

.featured-gallery-2x2 .cell-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdf9f3;
  background: rgba(16,12,10,0.68);
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

.featured-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.featured-grid-3:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.featured-grid-3 > .cell {
  position: relative;
  background: #1a1513;
  overflow: hidden;
}

.featured-grid-3 > .cell:first-child {
  grid-row: 1 / 3;
}

.featured-grid-3 > .cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.featured-grid-3 .cell-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fdf9f3;
  background: rgba(16,12,10,0.68);
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}