/* ============================================================
   Concept 3 — The Saleroom
   This file styles the rotating hero and NOTHING else. Every
   section below the hero is the approved balanced design from
   css/styles.css, untouched, so the two pages match exactly.
   ============================================================ */

.hero {
  position: relative;
  /* the page content column, so the panel lines up with .wrap */
  --col-edge: max(24px, calc((100vw - 1216px) / 2 + 24px));
}

.hero-stage {
  position: relative; height: min(60vh, 620px); min-height: 420px;
  overflow: hidden; background: var(--bg);
}
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease-soft), visibility .9s;
}
.slide.active { opacity: 1; visibility: visible; z-index: 2; }
.slide img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Sale details on a solid panel, aligned to the page's content column */
.slide-panel {
  position: absolute; left: var(--col-edge); bottom: 24px; z-index: 3;
  background: var(--dark); color: var(--on-dark);
  padding: 24px 30px 26px;
  width: min(470px, calc(100% - var(--col-edge) - 24px));
}
.slide-panel .chip {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.slide-panel .type { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-dark); }
.slide-panel .sep { width: 4px; height: 4px; background: var(--accent); transform: rotate(45deg); flex: none; }
.slide-panel .when { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); }
.slide-panel h2 { font-family: var(--display); font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.22; margin: 0; color: var(--on-dark); }
.slide-panel .where { margin: 8px 0 14px; font-size: 14.5px; color: var(--on-dark-muted); }
.slide-panel .link { color: var(--accent-on-dark); border-bottom-color: color-mix(in srgb, var(--accent-on-dark) 45%, transparent); }
@media (hover: hover) { .slide-panel .link:hover { border-color: var(--accent-on-dark); } }

/* Controls strip, aligned to the same column */
.hero-controls { background: var(--bg); border-bottom: 1px solid var(--hairline); }
.hero-controls-in {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: stretch;
}
.tabs { display: flex; flex: 1; min-width: 0; }
.tab {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  background: none; border: 0; border-right: 1px solid var(--hairline);
  padding: 13px 16px 15px; position: relative; color: var(--muted);
  font-family: var(--body);
  transition: color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.tab:first-child { border-left: 1px solid var(--hairline); }
@media (hover: hover) { .tab:hover { color: var(--ink); background: rgba(37,40,42,.04); } }
.tab .n { display: block; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--accent); margin-bottom: 3px; }
.tab .t {
  display: block; font-size: 14px; font-weight: 500; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab.active { color: var(--ink); }
.tab .bar { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--hairline); }
.tab .bar i { display: block; height: 100%; width: 0; background: var(--accent-link); }

.hero-arrows { display: flex; align-items: center; }
.h-arrow, .h-pause {
  width: 52px; background: none; border: 0; border-right: 1px solid var(--hairline);
  color: var(--ink); font-size: 17px; cursor: pointer; padding: 0;
  transition: background .3s var(--ease-soft);
}
.h-arrow:first-child { border-left: 1px solid var(--hairline); }
@media (hover: hover) { .h-arrow:hover, .h-pause:hover { background: rgba(37,40,42,.06); } }
.h-pause .pp { display: inline-block; width: 12px; }

@media (min-width: 1081px) { .m-count { display: none; }{ }}

@media (max-width: 1080px) {
  .hero-stage { height: 46vh; min-height: 340px; }
  .slide-panel { left: 16px; bottom: 16px; padding: 18px 20px 20px; width: min(440px, calc(100% - 32px)); }
  .tabs { display: none; }
  .hero-controls-in { justify-content: space-between; padding: 0 12px; }
  .m-count { display: flex; align-items: center; color: var(--muted); font-size: 14px; letter-spacing: .1em; padding: 14px 12px; }{
}}

@media (max-width: 640px) {
  /* Phones: the panel sits under the photo instead of over it, so the image stays visible.
     Slides share one grid cell so the crossfade still works and the stage takes the tallest slide. */
  .hero-stage { height: auto; min-height: 0; display: grid; }
  .slide { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; }
  .slide img.bg { position: static; height: 62vw; min-height: 220px; max-height: 340px; flex: none; }
  .slide-panel { position: static; left: auto; bottom: auto; width: 100%; flex: 1; padding: 18px 20px 22px; }
  .slide-panel h2 { font-size: 20px; }{
}}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }{
}}

/* ============================================================
   Labels vs links
   The shared stylesheet gives eyebrows and text links the same
   tracked-caps treatment, so an unboxed link reads like a label.
   On this page they are three clearly different things:
     eyebrow   copper tracked caps, never clickable
     link      sentence case with a solid underline
     button    boxed tracked caps (unchanged)
   currentColor keeps the link correct on stone, charcoal and patina.
   ============================================================ */
.link {
  font-size: 15px; letter-spacing: 0; text-transform: none;
  border-bottom-color: color-mix(in srgb, currentColor 45%, transparent);
}
@media (hover: hover) { .link:hover { border-bottom-color: currentColor; } }

/* ============================================================
   Header that steps out of the way
   Nicholas asked for the bar to disappear as you read down and
   come back on the smallest scroll up, so the hero is never
   permanently covered.
   ============================================================ */
/* Header hide/reveal rules live in styles.css, shared by every page. */

/* ============================================================
   Reviews in pages, so they can hold more than three and pick
   their favourites. Layout of each card is unchanged.
   ============================================================ */
.review[hidden] { display: none; }
.rev-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 44px;
}
.rev-arrow {
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  background: none; border: 1px solid var(--hairline); border-radius: 2px;
  color: var(--ink); font-size: 16px;
  transition: background .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
@media (hover: hover) { .rev-arrow:hover { background: var(--bg); border-color: var(--ink); } }
.rev-count {
  font-size: 14px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); min-width: 54px; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .header { transition: none; }{
}}{
}