/* AI-F1.157 - Private 05 Everly-style presentation parity.
 * Source: approved public scroll layout reviewed against Library P080 and user
 * screenshots. Scoped to authenticated, noindex previews; NOT a public publisher.
 * The public Project Page's core five-tab CSS/JS is already shared with Everly.
 */
.hng-scroll-preview {background:#0c0d0d;color:#fff;isolation:isolate}
.hng-scroll-preview .scroll-canvas {
  height:var(--hng-private-scroll-height,calc(100dvh - 112px));
  min-height:0;
  max-height:none;
  width:100%;
  position:relative;
  overflow:hidden;
  background:#101010;
}
.hng-scroll-preview .scroll-gallery-rail {z-index:0;touch-action:pan-y pan-x}
.hng-scroll-preview .scroll-gallery-slide>.v2-photo figcaption {display:none}
.hng-scroll-preview .scroll-gallery-slide.scroll-gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:4px;
  background:#141414;
}
.hng-scroll-preview .scroll-gallery-grid>.v2-photo {
  margin:0;
  width:100%;height:100%;min-height:0;
  overflow:hidden;background:#121212;
}
.hng-scroll-preview .scroll-gallery-grid>.v2-photo img {
  width:100%;height:100%;object-fit:cover;object-position:center;
}
.hng-scroll-preview .scroll-gallery-grid>.v2-photo figcaption {display:none}
.hng-scroll-preview .scroll-gradient {
  z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.43) 32%,transparent 72%),
    linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.02) 83%),
    linear-gradient(180deg,rgba(0,0,0,.42),transparent 24%);
}
/* Public Everly hierarchy: full-width title, location, three horizontal facts,
 * gallery controls, Explore Project. No 650px title cap or uppercase coercion. */
.hng-scroll-preview .scroll-copy {
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:stretch;justify-content:flex-end;
  width:100%;max-width:none;
  padding:20px clamp(26px,5.2vw,100px) clamp(26px,5.5vh,78px);
  overflow:hidden;
  pointer-events:none;
}
.hng-scroll-preview .scroll-copy-content {
  width:100%;max-width:none;min-width:0;
  max-height:100%;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#ffffff80 transparent;
  pointer-events:auto;
}
.hng-scroll-preview .scroll-heading {
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(14px,2.4vw,32px);width:100%;min-width:0;
}
.hng-scroll-preview .scroll-heading h1 {
  flex:1 1 auto;min-width:0;max-width:100%;
  margin:0;
  color:white;
  font:400 clamp(42px,7.1vw,122px)/.99 Arial,Helvetica,sans-serif;
  letter-spacing:-.045em;
  text-transform:none;
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:normal;
}
.hng-scroll-preview .scroll-heading .scroll-developer-logo {
  flex:0 0 auto;
  width:clamp(110px,12vw,167px);height:clamp(48px,6vw,77px);
  background:rgba(255,255,255,.94);
  margin-bottom:.15em;
}
.hng-scroll-preview .scroll-location {
  display:flex;align-items:center;gap:9px;
  max-width:100%;margin:clamp(10px,2vh,20px) 0 0;
  font-size:clamp(11px,.85vw,14px);font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;line-height:1.45;
}
.hng-scroll-preview .scroll-location-pin {width:18px;height:18px;flex:0 0 18px}
.hng-scroll-preview .scroll-facts {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) minmax(0,1.1fr);
  gap:0;max-width:min(1040px,100%);
  margin:clamp(20px,2.7vh,30px) 0 14px;padding:0;
  color:white;
}
.hng-scroll-preview .scroll-facts>div {
  min-width:0;padding:2px clamp(10px,1.2vw,22px);
  border-left:1px solid rgba(255,255,255,.46);
}
.hng-scroll-preview .scroll-facts dt {
  color:#fff;font:700 clamp(10px,.78vw,12px)/1.3 Arial,Helvetica,sans-serif;
  text-transform:uppercase;letter-spacing:.045em;
}
.hng-scroll-preview .scroll-facts dd {
  margin:8px 0 0;color:#fff;
  font:700 clamp(13px,1.1vw,17px)/1.32 Arial,Helvetica,sans-serif;
  overflow-wrap:break-word;
}
/* The base preview's old .scroll-facts span selector is not a fact value. */
.hng-scroll-preview .scroll-facts span {
  min-width:0;border:0;padding:0;letter-spacing:normal;
  font-size:inherit;text-transform:none;color:inherit;
}
.hng-scroll-preview .scroll-handover-date {display:block}
.hng-scroll-preview .scroll-handover-qualifier {
  display:block;margin-top:3px;
  font:500 .82em/1.35 Arial,Helvetica,sans-serif;
  overflow-wrap:break-word;
}
.hng-scroll-preview .scroll-gallery-controls {
  position:relative;inset:auto;top:auto;right:auto;
  display:flex;align-items:center;justify-content:space-between;
  width:max-content;max-width:100%;
  padding:0;margin:clamp(10px,1.8vh,17px) 0 12px;
  gap:12px;z-index:auto;
  background:transparent;
}
.hng-scroll-preview .scroll-gallery-controls>button {
  display:grid;place-items:center;width:38px;height:38px;
  min-width:38px;min-height:38px;
  padding:0;border:1px solid #ffffff91;background:#0005;
  font-size:22px;line-height:1;
}
.hng-scroll-preview .scroll-gallery-controls small {font-size:.74rem;min-width:42px;text-align:center}
.hng-scroll-preview .scroll-gallery-controls .scroll-gallery-dots:empty {display:none}
.hng-scroll-preview .scroll-actions {margin:0;display:flex;align-items:center;gap:14px}
.hng-scroll-preview .scroll-actions .hng-btn {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:182px;min-height:48px;padding:12px 20px;
  background:transparent;border:1px solid rgba(255,255,255,.85);
  color:white;font:700 12px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
/* Existing public Everly Explore Project CSS is already the approved layout.
 * Only add a long-name safety guard for other Project Master names. */
.hng-project-page .project-cover-copy h1 {
  max-width:100%;overflow-wrap:break-word;word-break:normal;
}
/* On the public mobile scroll HOUNGUES navigation sits on the image. Keep the
 * private status ribbon above it, but float only this 05 Scroll header. */
@media(max-width:959px) {
  body:has(.hng-scroll-preview) > [data-hng-public-shell="header"],
  body:has(.hng-scroll-preview) > .v2-site-header {
    position:absolute;left:0;right:0;top:var(--hng-private-ribbon-height,50px);
    z-index:25;width:100%;height:60px;background:transparent;color:white;
  }


  .hng-scroll-preview .scroll-copy {
    padding:18px clamp(15px,4vw,26px) clamp(16px,2.7vh,25px);
  }
  .hng-scroll-preview .scroll-heading h1 {
    font-size:clamp(31px,8.6vw,63px);line-height:1.04;letter-spacing:-.035em;
  }
  .hng-scroll-preview .scroll-heading .scroll-developer-logo {
    width:clamp(86px,24vw,128px);height:clamp(42px,8vw,60px);
  }
  .hng-scroll-preview .scroll-facts {margin:15px 0 9px;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) minmax(0,1fr)}
  .hng-scroll-preview .scroll-facts>div {padding:2px 8px}
  .hng-scroll-preview .scroll-facts dt {font-size:clamp(9px,1.55vw,11px);line-height:1.25}
  .hng-scroll-preview .scroll-facts dd {font-size:clamp(11px,1.9vw,15px);line-height:1.3;margin-top:5px}
  .hng-scroll-preview .scroll-gallery-controls {margin:6px 0 8px}
  .hng-scroll-preview .scroll-gallery-controls>button {width:34px;height:34px;min-width:34px;min-height:34px}
}
@media(max-width:620px) {

  .hng-scroll-preview .scroll-heading h1 {font-size:clamp(30px,8.1vw,49px);line-height:1.04}
  .hng-scroll-preview .scroll-heading {gap:8px}
  .hng-scroll-preview .scroll-heading .scroll-developer-logo {
    width:clamp(82px,25vw,105px);height:43px;margin-bottom:0;
  }
  .hng-scroll-preview .scroll-location {font-size:10px;letter-spacing:.05em;margin-top:9px}
  .hng-scroll-preview .scroll-location-pin {width:15px;height:15px;flex-basis:15px}
  .hng-scroll-preview .scroll-facts {grid-template-columns:minmax(0,.95fr) minmax(0,1.8fr) minmax(0,1fr);margin:13px 0 9px}
  .hng-scroll-preview .scroll-facts>div {padding:1px 5px}
  .hng-scroll-preview .scroll-facts dt {font-size:9px;letter-spacing:0}
  .hng-scroll-preview .scroll-facts dd {font-size:clamp(10px,2.75vw,13px);line-height:1.25}
  .hng-scroll-preview .scroll-handover-qualifier {font-size:.85em;line-height:1.23}
  .hng-scroll-preview .scroll-gallery-controls .scroll-gallery-dots {display:none}
  .hng-scroll-preview .scroll-gallery-controls {gap:7px}
  .hng-scroll-preview .scroll-gallery-controls>button {border:0;background:transparent}
  .hng-scroll-preview .scroll-actions .hng-btn {
    width:100%;min-width:0;min-height:45px;padding:10px;
    background:#917341;border-color:#917341;
    font-size:clamp(12px,3.2vw,15px);
  }
  .hng-scroll-preview .scroll-gallery-grid {gap:2px}
}
@media(max-width:359px) {
  .hng-scroll-preview .scroll-copy {padding-left:12px;padding-right:12px}
  .hng-scroll-preview .scroll-heading h1 {font-size:29px}
  .hng-scroll-preview .scroll-heading .scroll-developer-logo {width:70px;height:37px}
  .hng-scroll-preview .scroll-facts>div {padding:1px 4px}
}
@media(max-height:520px) and (min-width:621px) {
  .hng-scroll-preview .scroll-copy {padding-bottom:12px}
  .hng-scroll-preview .scroll-heading h1 {font-size:clamp(35px,5vw,70px)}
  .hng-scroll-preview .scroll-location {margin-top:6px}
  .hng-scroll-preview .scroll-facts {margin:10px 0 7px}
  .hng-scroll-preview .scroll-gallery-controls {margin:5px 0}
}