/* 09-archive-featured-panel.css — home work archive, part 2: the archive head row
   and the featured panel (info column, specs, stage with browser/poster frames,
   pager). Its 900px stack is at the end of 10, its split-view stack in 05. */

.archive { border-top: 1px solid var(--rule); }
/* head rows */
.archive-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--inline-space);
  padding: var(--sp-2) var(--gutter);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.archive-head .section-label { margin: 0; }
.archive-explore { color: var(--ink); letter-spacing: 0.06em; cursor: pointer; transition: color 240ms var(--ease-out); }
.archive-explore:hover { color: var(--accent); }
.archive-scroll-buttons { display: flex; gap: var(--sp-3); }
.archive-scroll-buttons button:hover { opacity: 0.5; }

/* featured */
.featured-panel {
  display: grid;
  grid-template-columns: 50% 50%;      /* even split → text column stays roomy even at ~1280 */
  padding-right: var(--gutter);        /* stage stops at the page gutter, not the viewport edge */
  border-bottom: 1px solid var(--rule);
}

.featured-panel-info {
  display: flex;
  flex-direction: column;
  /* page gutter on the outer (left) edge only — a slim inner pad against the
     stage, so the text column doesn't get squeezed from both sides */
  padding: var(--section-space) var(--sp-6) var(--section-space) var(--gutter);
  border-right: 1px solid var(--rule);
}
.featured-panel-counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-body);
  letter-spacing: 0.02em;
}
.featured-panel-counter em { font-style: normal; color: var(--accent); }

/* slide animation when auto-advancing projects */
.featured-panel-body { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.featured-panel-body.is-out {
  transform: translateY(10px);
  opacity: 0;
}

.featured-panel-title {
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: var(--block-space) 0 var(--item-space);
}
/* featured-panel tag chips — same .archive-tag pills the cards use */
.featured-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0 0 var(--block-space);
}
.featured-panel-description {
  font-size: var(--text-body);
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: var(--block-space);
}

.featured-panel-specs { margin-top: auto; }
.featured-panel-specs > div {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: var(--sp-4);
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--text-body);
  letter-spacing: 0.01em;
}
.featured-panel-specs dt {
  color: var(--muted);
  letter-spacing: 0.06em;
  font-size: var(--text-label);
  align-self: center;
}
.featured-panel-specs dd { align-self: center; }

.featured-panel-link {
  display: flex;
  justify-content: space-between;
  padding-top: var(--item-space);
  border-top: 1px solid var(--rule);
  font-size: var(--text-body);
  letter-spacing: 0.06em;
}
.featured-panel-link:hover { opacity: 1; color: var(--accent); }

/* stage (image/video) */
.featured-panel-stage {
  --stage-h: clamp(300px, 34vw, 440px);   /* smaller — the image was crowding the panel */
  --stage-pad: var(--col-gap);
  position: relative;
  height: var(--stage-h);
  background: var(--bg-raised);
  overflow: hidden;
}
.featured-panel-stage[data-frame="browser"] {
  background: #000;
  padding: var(--stage-pad);
  display: flex;
  align-items: center;
  justify-content: center;     /* centre the browser window in the stage */
}
.featured-panel-media { width: 100%; height: 100%; position: relative; }
.featured-panel-media img,
.featured-panel-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole image, letterboxed on black — no crop */
  background: #000;
  display: block;
  transition: opacity 300ms var(--ease-out);
}
/* browser mode: the window shrink-wraps to the media in BOTH axes so the chrome
   and the content stay one unit — bar flush on top, window centred, no crop, no
   vertical letterbox gap. The image (height:auto below) drives the box size. */
.featured-panel-stage[data-frame="browser"] .featured-panel-media {
  /* Fixed height, so the window is the same size on every project — only its
     WIDTH follows the image's ratio. That keeps the chrome bar flush to the
     image (the bar spans the window, and the window is still shrink-wrapped
     horizontally, so no gap) while the vertical box never jumps as you page
     through the archive. */
  height: calc(var(--stage-h) - 2 * var(--stage-pad));
  width: fit-content;          /* shrink-wrap the window to the media width */
  max-width: 100%;
  position: relative;
  display: block;
  box-sizing: border-box;
  --chrome-bar-h: 28px;        /* drawn icon geometry — the bar below and the space reserved for it */
  padding-top: var(--chrome-bar-h);
  background: #1A1A18;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.featured-panel-stage[data-frame="browser"] .featured-panel-media::before {
  content: '';
  position: absolute;          /* overlay → spans the window (= media) width exactly */
  top: 0; left: 0; right: 0;
  height: var(--chrome-bar-h);
  background: #1A1A18;
  background-image:
    radial-gradient(circle at 14px 14px, #FF5F57 5px, transparent 5.5px),
    radial-gradient(circle at 34px 14px, #FEBC2E 5px, transparent 5.5px),
    radial-gradient(circle at 54px 14px, #28C840 5px, transparent 5.5px);
  border-bottom: 1px solid var(--rule);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.featured-panel-stage[data-frame="browser"] .featured-panel-media img,
.featured-panel-stage[data-frame="browser"] .featured-panel-media video {
  display: block;
  height: 100%;           /* fill the fixed window below the chrome bar */
  width: auto;            /* width follows the ratio → the bar matches it exactly */
  max-width: 100%;        /* very wide shots letterbox rather than overflow */
  object-fit: contain;
  background: #000;
}
.featured-panel-media.is-fading img,
.featured-panel-media.is-fading video { opacity: 0; }

/* poster mode: show the whole poster letterboxed on black — no crop, no chrome */
.featured-panel-stage[data-frame="poster"] .featured-panel-media img,
.featured-panel-stage[data-frame="poster"] .featured-panel-media video {
  object-fit: contain;
  background: #000;
}

.featured-panel-pager {
  position: absolute;
  bottom: var(--item-space); right: var(--item-space); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
}
.featured-panel-pager button:hover { color: var(--accent); }