/* ============================================================
   APS Homepage v6 — sandbox stylesheet
   ------------------------------------------------------------
   Pairs with:  home/templates/home/home_page_v6.html
   Depends on:  css/aps_site.css  (brand tokens: --aps-link,
                --aps-blue, --aps-orange, --aps-green, --aps-text,
                --font-family) and Bootstrap 5.3.
   Collect to STATIC_ROOT as css/homepage_v6.css.
   Image paths below assume the two bg images are collected to
   static/images/. Adjust the url() paths if you place them in
   media/ instead.
   ============================================================ */

/* ---------- full-bleed band scaffold ----------
   Bands are block-level and sit OUTSIDE any .container, so they
   span the viewport naturally. Inner .container re-centers the
   content. No 100vw hacks, no horizontal scrollbars. */
.hp6 { color: var(--aps-text); }
.hp6 .hp6-top { padding-top: 28px; padding-bottom: 8px; }

/* ---------- video accent strip (decorative) ----------
   Thin full-bleed band directly under the sticky navbar. Plays
   once on load then holds its last frame (no loop, muted). */
.aps-accent-strip {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  background: #0a1420;            /* shows if video is still buffering */
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  /* 1px hairline under the band */
  animation: aps-accent-fade 900ms ease both;
}

.aps-accent-strip__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

@keyframes aps-accent-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect reduced-motion: no autoplay motion, no fade — show the poster still. */
@media (prefers-reduced-motion: reduce) {
  .aps-accent-strip { animation: none; }
}

/* ---------- section header (accent-bar motif) ---------- */
.hp6-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.hp6-head h2 {
    font-family: var(--font-family);
    font-weight: 400; font-size: 1.9em; line-height: 1; letter-spacing: .01em;
    color: #000; margin: 0;
    padding-left: 9px; border-left: 8px solid var(--aps-link);
}
.hp6-head .hp6-note { margin: 0; font-size: .93em; color: #777; font-style: italic; }
.hp6-head .hp6-rule { flex: 1 1 auto; height: 1px; background: rgba(58, 83, 164, .18); }

/* ============================================================
   1. WELCOME + SAVE-THE-DATE
   ============================================================ */
.hp6-welcome-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
    gap: 48px; align-items: start; margin-bottom: 44px;
}
.hp6-eyebrow {
    font-size: .75em; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--aps-link); line-height: 1;
    display: inline-block; margin-bottom: 14px;
}
.hp6-welcome h1 {
    margin: 0 0 16px; font-family: var(--font-family); font-weight: 300;
    font-size: clamp(1.7em, 2.2vw + 0.6em, 2.4em); line-height: 1.1; color: #000;
    padding-left: 11px; border-left: 10px solid var(--aps-link); letter-spacing: .01em;
}
.hp6-welcome p { margin: 0 0 14px 11px; max-width: 680px; font-size: clamp(16px, 1.867vw - 6.4px, 20.5px); line-height: 1.5; color: var(--aps-text); }
.hp6-welcome p:last-of-type { margin-bottom: 0; }

/* Save-the-Date card */
.hp6-std {
    background: var(--aps-blue); color: #fff; border-radius: 8px;
    padding: 26px 28px 28px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
    position: relative; overflow: hidden;
}
.hp6-std .hp6-std-ghost {
    position: absolute; right: -12px; top: -30px; font-size: 10em; font-weight: 700;
    color: rgba(255,255,255,.06); line-height: 1; letter-spacing: -.04em;
    pointer-events: none; user-select: none;
}
.hp6-std .hp6-eyebrow { color: var(--aps-orange); margin-bottom: 10px; }
.hp6-std h2 { margin: 0 0 10px; font-family: var(--font-family); font-weight: 300; font-size: 2em; color: #fff; line-height: 1.1; letter-spacing: .01em; }
.hp6-std-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; margin: 14px 0 18px; font-size: .98em; line-height: 1.4; }
.hp6-std-meta i { color: var(--aps-orange); font-weight: 600; }
.hp6-std-meta span:nth-child(even) { color: #fff; }
.hp6-std-theme { font-style: italic; line-height: 1.35; }
.hp6-std-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hp6-btn-amber {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
    background: var(--aps-orange); color: #000; font-weight: 600; border-radius: 6px;
    text-decoration: none; transition: background .2s ease;
}
.hp6-btn-amber:hover { background: #ffbf45; color: #000; }
.hp6-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.5); color: #fff; text-decoration: none; font-size: .95em;
}
.hp6-btn-ghost:hover { color: #fff; border-color: #fff; }

/* ============================================================
   2. PUBLICATIONS BAND  (cool molecular-network field)
   ============================================================ */
.hp6-pubs {
    padding: 48px 0;
    border-top: 1px solid rgba(58,83,164,.18);
    border-bottom: 1px solid rgba(58,83,164,.10);
    background: #e8eefa;   /* low-key blue wash (no background image) */
}
/* Publications cards: gray border + subtle resting shadow to match the other
   bands. Scoped to .hp6-pubs so the live site's shared .research-card styling
   (live homepage, research archive) is left untouched. */
.hp6-pubs .research-card { border-color: #c4c8ce; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* ============================================================
   3. NEWS BAND  (warm cream)
   ============================================================ */
.hp6-news { padding: 48px 0; background: #f5f4ee; }

/* ---------- publications grid (5-up) ---------- */
.hp6-grid-pubs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.hp6-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.hp6-grid-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hp6-actions-right { margin-top: 24px; text-align: right; }

/* ---------- publication card (image-top + category tag) ---------- */
.hp6-pubcard {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e6e9f0;
    box-shadow: 0 1px 4px rgba(33,52,107,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.hp6-pubcard:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(33,52,107,.16); }
.hp6-pubcard .hp6-fig { aspect-ratio: 4 / 3; background: #f2f2f2; overflow: hidden; }
.hp6-pubcard .hp6-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp6-pubcard .hp6-body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hp6-cat {
    font-size: .68em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    line-height: 1; padding-left: 6px; border-left: 3px solid var(--aps-blue); color: var(--aps-blue);
}
.hp6-pubcard h3 { margin: 2px 0 0; font-size: 1.05em; font-weight: 600; line-height: 1.25; color: #000; letter-spacing: .01em; transition: color .2s ease; }
.hp6-pubcard:hover h3 { color: var(--aps-link); }
.hp6-pubcard .hp6-meta { margin-top: auto; padding-top: 6px; }
.hp6-pubcard .hp6-lab { margin: 0; font-size: .86em; color: var(--aps-blue); font-style: italic; font-weight: 600; }
.hp6-pubcard .hp6-date { margin: 2px 0 0; font-size: .8em; color: #999; }

/* category accent colors — set border-left-color + color via modifier classes.
   Add the matching class on BOTH the tag (.hp6-cat) server-side. */
.hp6-cat--therapeutics      { border-left-color: #cb3b2d; color: #cb3b2d; }
.hp6-cat--synthesis         { border-left-color: #3a53a4; color: #3a53a4; }
.hp6-cat--natural-products  { border-left-color: #7ebd01; color: #7ebd01; }
.hp6-cat--structural-biology{ border-left-color: #f26522; color: #f26522; }
.hp6-cat--drug-delivery     { border-left-color: #FFA800; color: #FFA800; }
.hp6-cat--materials         { border-left-color: #5A5A5A; color: #5A5A5A; }

/* ---------- news mini card (thumb + text) ---------- */
.hp6-mini {
    display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px;
    background: #fff; border-radius: 8px; border: 1px solid #c4c8ce; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .2s ease; text-decoration: none; color: inherit; align-items: flex-start;
}
.hp6-mini:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.hp6-mini .hp6-thumb { width: 96px; height: 96px; border-radius: 6px; overflow: hidden; background: #f2f2f2; }
.hp6-mini .hp6-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp6-mini h3 { margin: 0 0 4px; font-size: 1.02em; font-weight: 600; line-height: 1.25; color: #000; letter-spacing: .01em; transition: color .2s ease; }
.hp6-mini:hover h3 { color: var(--aps-link); }
.hp6-mini .hp6-src { margin: 0; font-size: .86em; color: var(--aps-text); font-style: italic; }
.hp6-mini .hp6-date { margin: 2px 0 0; font-size: .8em; color: #999; }

/* ============================================================
   4. PEOPLE & PROCESSES  (5-up rail on white)
   ============================================================ */
.hp6-people { padding-top: 56px; }
.hp6-feature {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #c4c8ce;
    box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease;
}
.hp6-feature:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.hp6-feature .hp6-fig { aspect-ratio: 1 / 1; background: #f2f2f2; overflow: hidden; }
.hp6-feature .hp6-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp6-feature .hp6-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hp6-kind { font-size: .75em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; color: var(--aps-blue); }
.hp6-feature.hp6-doorway .hp6-kind { color: var(--aps-orange); }
.hp6-feature h3 { margin: 4px 0 0; font-size: 1.05em; font-weight: 600; line-height: 1.25; color: #000; letter-spacing: .01em; transition: color .2s ease; }
.hp6-feature:hover h3 { color: var(--aps-link); }
.hp6-feature .hp6-sub { margin: 2px 0 0; font-size: .82em; font-style: italic; color: var(--aps-blue); }
.hp6-feature .hp6-blurb { margin: 6px 0 0; font-size: .88em; line-height: 1.45; color: var(--aps-text); flex: 1; }
.hp6-feature .hp6-cta { margin-top: 10px; font-size: .85em; font-weight: 600; color: var(--aps-link); }
.hp6-feature.hp6-doorway .hp6-cta { color: var(--aps-orange); }

/* ============================================================
   5. MEMBERSHIP BAND  (text + bleed photo)
   ============================================================ */
.hp6-membership { position: relative; width: 100%; margin-top: 48px; }
.hp6-membership .hp6-ms-inner { padding: 56px 0; position: relative; background: #f8f9fa; border-radius: 8px; overflow: hidden; }
.hp6-ms-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px;
    border-left: 8px solid var(--aps-link); padding-left: 24px;
    padding-right: clamp(320px, 34vw, 560px);
}
.hp6-ms-bleed {
    position: absolute; top: 0; right: 0; bottom: 0; width: clamp(320px, 34vw, 560px);
    background-image: url("../images/membership_scientist.1d1145b39613.jpg"); background-size: cover; background-position: 32% top;
}
.hp6-ms-seam {
    position: absolute; top: 0; bottom: 0; right: calc(clamp(320px, 34vw, 560px) - 150px);
    width: 150px; background: linear-gradient(to right, #f8f9fa, rgba(248,249,250,0)); pointer-events: none;
}
.hp6-membership h2 { margin: 0 0 8px; font-family: var(--font-family); font-weight: 300; font-size: 1.9em; color: #000; line-height: 1.15; }
.hp6-membership p { margin: 0; font-size: 1.05em; line-height: 1.5; color: var(--aps-text); max-width: 560px; }
.hp6-ms-actions { display: flex; gap: 10px; flex-shrink: 0; }
.hp6-ms-actions a { white-space: nowrap; border-radius: 6px; padding: 12px 22px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hp6-ms-actions .hp6-ms-primary { background: var(--aps-blue); color: #fff; }
.hp6-ms-actions .hp6-ms-secondary { background: #f8f9fa; color: var(--aps-blue); border: 1px solid var(--aps-blue); font-weight: 500; }
.hp6-ms-stack { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .hp6-grid-pubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp6-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp6-ms-grid { grid-template-columns: 1fr; gap: 22px; padding-right: 24px; }
    .hp6-ms-bleed, .hp6-ms-seam { display: none; }
    .hp6-ms-stack { display: block; width: 100%; height: 240px; border-radius: 8px; background-image: url("../images/membership_scientist.1d1145b39613.jpg"); background-size: cover; background-position: 32% top; }
}
@media (max-width: 991px) {
    .hp6-welcome-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .hp6-grid-pubs, .hp6-grid-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .hp6-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp6-head { flex-wrap: wrap; }
    .hp6-head .hp6-rule { display: none; }
}
@media (max-width: 575px) {
    .hp6-grid-pubs, .hp6-grid-news, .hp6-grid-5 { grid-template-columns: 1fr; }
    .hp6-welcome-grid { gap: 22px; }
    .hp6-ms-actions { flex-direction: column; align-items: stretch; }
    .hp6-ms-stack { height: 200px; }
    .hp6-mini { grid-template-columns: 72px 1fr; }
    .hp6-mini .hp6-thumb { width: 72px; height: 72px; }
}

/* ===== APS 2027 slider (v7) ===== */
.hp6-eyebrow--amber{ color:#FFA800; }

.aps-slider__frame{
  position:relative; width:100%; aspect-ratio:2 / 1;   /* shorter than source 973/670 to match trimmed welcome text; images crop via object-fit:cover */
  min-height:225px;                                    /* floor so the countdown/CTA anchor slide never clips in a narrow window */
  border-radius:8px; overflow:hidden; background:#3a53a4;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.aps-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.aps-slide.is-active{ opacity:1; pointer-events:auto; }

/* Anchor slide */
.aps-slide--anchor{ display:flex; flex-direction:column; justify-content:space-between;
  padding:20px 22px; color:#fff; background:#3a53a4; }
.aps-slide__year{ position:absolute; right:-10px; top:-24px; font-size:8em; font-weight:700;
  color:rgba(255,255,255,.06); line-height:1; letter-spacing:-.04em; pointer-events:none; }
.aps-anchor__title{ margin:0 0 13px; font-weight:300; font-size:1.85em; line-height:1.05;
  letter-spacing:.01em; color:#fff; position:relative; }
.aps-anchor__top,.aps-anchor__bottom{ position:relative; }
.aps-anchor__meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:.86em;
  color:rgba(255,255,255,.92); margin:0 0 12px; }
.aps-anchor__meta .bi{ color:#FFA800; margin-right:6px; }
.aps-anchor__cta{ display:flex; gap:9px; flex-wrap:wrap; }

/* Countdown */
.aps-countdown{ display:flex; gap:7px; }
.aps-cd{ flex:1; text-align:center; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:8px 2px; }
.aps-cd__n{ display:block; font-size:1.7em; font-weight:700; color:#fff; line-height:1;
  font-variant-numeric:tabular-nums; }
.aps-cd__l{ display:block; font-size:.58em; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:5px; }

/* Buttons (match v6 amber/ghost) */
.aps-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:6px;
  text-decoration:none; font-size:.9em; font-weight:600; transition:background .2s ease; }
.aps-btn--amber{ background:#FFA800; color:#000; }
.aps-btn--amber:hover{ background:#ffbf45; }
.aps-btn--ghost{ border:1px solid rgba(255,255,255,.5); color:#fff; font-weight:500; font-size:.86em; }

/* News slides */
.aps-slide--news{ display:block; text-decoration:none; }
.aps-slide__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.aps-slide__scrim{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,28,60,.9) 0%, rgba(20,28,60,.58) 12%, rgba(20,28,60,.24) 28%, rgba(20,28,60,0) 44%); }
.aps-slide__tag{ position:absolute; left:20px; top:16px; background:#FFA800; color:#000;
  font-size:.62em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:4px; }
.aps-slide__text{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; }
.aps-slide__title{ margin:0 0 6px; color:#fff; font-weight:600; font-size:1.3em; line-height:1.18; letter-spacing:.01em; }
.aps-slide__blurb{ margin:0 0 7px; color:rgba(255,255,255,.86); font-size:.88em; line-height:1.4; }
.aps-slide__date{ margin:0; color:rgba(255,255,255,.68); font-size:.78em; }

/* Arrows + dots */
.aps-slider__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px;
  border:none; border-radius:50%; background:rgba(255,255,255,.20); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:4; transition:background .2s ease; }
.aps-slider__arrow:hover{ background:rgba(255,255,255,.34); }
.aps-slider__arrow--prev{ left:8px; } .aps-slider__arrow--next{ right:8px; }
.aps-slider__dots{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; }
.aps-dot{ width:8px; height:8px; border-radius:99px; border:none; padding:0; cursor:pointer;
  background:#c7cfe2; transition:all .25s ease; }
.aps-dot.is-active{ width:22px; background:#3a53a4; }

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