/* ============================================================================
   Counselling topic explorer.
   Source: bridge/design-studies/shiftlab-direction-2026-10-07/topic-study/ at
   1426a2a (study.css + preview-overlay.css consolidated, computed result
   retained as TOPIC-HANDOFF.md requires). Tokens come from system.css.

   Review fixes applied from relay #549:
   1. The heading is capped to the paragraph's width so overlay text cannot
      cross 40% of the picture, where all the contrast failures were.
   2. Below 650px, and on any coarse pointer, the overlay STOPS being an overlay
      and becomes a stack. Hover does not exist on touch, so nothing is lost.
   3. Previous/next and the counter take the system label token rather than a
      hardcoded 11px.
   Desktop overlay stays on the LEFT, which is Martin's selected placement
   (#548, upheld in #551). The published gradient is unchanged: claude-web's
   contrast figures were measured against exactly these stops.
   ========================================================================= */

.explorer-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  border-top:1px solid var(--rule-dark);padding-top:12px;padding-bottom:18px;
}
.explorer-toolbar .label{color:var(--muted)}
.browse-hint{color:var(--muted);font-size:13px}
.view-switch{display:flex;gap:6px}
.view-switch button{
  border:0;background:transparent;color:var(--muted);
  min-width:78px;min-height:var(--tap);padding:10px 14px;
  font:400 var(--label-size)/1.4 var(--label-face);letter-spacing:.12em;text-transform:uppercase;
}
.view-switch button[aria-pressed="true"]{color:var(--cream);box-shadow:inset 0 -1px var(--bronze)}

/* --- The collection ------------------------------------------------------ */
.topic-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(24px,4vw,70px);row-gap:22px;
  padding-block:8px 72px;list-style:none;margin:0;
}
.topic{min-width:0;position:relative}
.topic-link{
  display:flex;flex-direction:column;align-items:stretch;
  text-decoration:none;position:relative;padding:12px 0 18px;min-height:var(--tap);
}
.image-space{height:220px;display:flex;align-items:center;justify-content:center}
.image-space img{
  width:auto;max-width:var(--image-width,100%);max-height:var(--image-height,200px);
  object-fit:contain;transition:filter .3s,opacity .3s;filter:brightness(.88);
}
/* The staggered heights are what make the collection read as a gallery rather
   than a table; they are the arrangement Martin chose. */
.topic:nth-child(4n+2) .image-space{padding-top:37px}
.topic:nth-child(4n+3) .image-space{padding-bottom:27px}
.topic:nth-child(4n) .image-space{padding-top:15px}
.topic:nth-child(6n+1){--image-width:94%;--image-height:205px}
.topic:nth-child(6n+2){--image-width:86%;--image-height:162px}
.topic:nth-child(6n+3){--image-width:100%;--image-height:215px}
.topic:nth-child(6n+4){--image-width:81%;--image-height:173px}
.topic:nth-child(6n+5){--image-width:94%;--image-height:190px}
.topic:nth-child(6n){--image-width:89%;--image-height:180px}
.topic-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px}
.topic-name{font:400 19px/1.4 var(--body);letter-spacing:-.035em}
.topic-number{font:400 var(--label-size)/1.3 var(--label-face);letter-spacing:.12em;color:var(--muted)}
.topic-link::after{
  content:'';height:1px;background:var(--bronze);width:0;
  position:absolute;bottom:8px;left:0;transition:width .3s;
}
.topic-link:is(:hover,:focus-visible)::after{width:100%}
.topic-link:is(:hover,:focus-visible) img{filter:brightness(1)}
.list-summary{display:none;color:var(--muted);font-size:14px;line-height:1.6}

.topic-grid.is-list{display:block;padding-top:16px}
.is-list .topic-link{
  display:grid;grid-template-columns:80px 1fr 1.3fr;align-items:center;gap:32px;
  border-bottom:1px solid var(--rule-dark);padding:22px 0;min-height:120px;
}
.is-list .image-space{height:70px;padding:0!important}
.is-list .image-space img{max-height:70px;max-width:80px}
.is-list .topic-meta{padding:0;justify-content:flex-start;gap:24px;flex-direction:row-reverse}
.is-list .topic-name{font-size:24px}
.is-list .list-summary{display:block}
.is-list .topic-link::after{display:none}

/* --- The preview / dialog ------------------------------------------------
   The photograph is the preview surface: no frame, no panel dividers. */
.topic-dialog{
  width:min(1130px,calc(100% - 64px));max-height:calc(100dvh - 64px);
  border:0;padding:0;background:transparent;box-shadow:none;color:#F6F1E8;overflow:auto;
}
.topic-dialog::backdrop{background:#120A08C9;backdrop-filter:blur(6px)}
.topic-dialog[data-mode="hover"]{
  position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  margin:0;z-index:50;width:min(1040px,calc(100% - 64px));
}
.detail-content{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;padding:0;isolation:isolate;background:#191715;
}
.detail-content::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,10,9,.90) 0%,rgba(12,10,9,.78) 30%,
                             rgba(12,10,9,.38) 48%,rgba(12,10,9,.04) 70%,transparent 100%);
}
.detail-image{grid-area:1/1;width:100%;height:auto;max-height:none;align-self:center;object-fit:contain}
.detail-copy{position:relative;z-index:1;grid-area:1/1;width:49%;min-width:0;padding:64px 38px 44px 48px;align-self:center}
.detail-copy .label{color:#E1D6C6;margin-bottom:16px}
/* #549 fix 1: the heading shares the paragraph's max-width. Unbounded, it
   reached x 42-45% of the picture, which is where every contrast failure was
   (boundaries' hand, depression's light bars, trauma's doorway). */
.detail-copy h2{
  font:400 clamp(38px,4.4vw,61px)/1.04 var(--body);
  letter-spacing:-.052em;text-wrap:balance;max-width:370px;overflow-wrap:break-word;
}
.detail-copy p:not(.label){
  color:#F0E9DD;line-height:1.7;font-size:16px;margin-top:22px;max-width:370px;
  text-shadow:0 1px 10px #0006;
}

/* Read button: cream/cocoa, square, arrow-free, deep-rose rising fill. */
.detail-copy .text-link{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:min(210px,100%);max-width:100%;min-height:48px;
  margin-top:26px;padding:13px 20px;
  border:1px solid var(--cream);border-radius:0;background:var(--cream);color:var(--cocoa);
  font:400 12px/1.5 var(--label-face);letter-spacing:.1em;text-transform:uppercase;
  white-space:normal;text-align:center;text-decoration:none;cursor:pointer;
  transition:color .2s .08s,border-color .25s;
}
.detail-copy .text-link::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:115%;width:165%;height:240%;border-radius:50%;
  background:var(--deep-rose);transform:translateX(-50%);
  transition:top .5s cubic-bezier(.55,0,.1,1);
}
.detail-copy .text-link:is(:hover,:focus-visible){color:#FFF9EF;border-color:var(--rose)}
.detail-copy .text-link:is(:hover,:focus-visible)::before{top:-70%}
.detail-copy .text-link:active{background:var(--deep-rose);color:#FFF9EF}
.detail-copy .text-link:focus-visible{outline:3px solid #FFF;outline-offset:5px}

.topic-dialog .close{
  position:absolute;z-index:2;top:17px;right:20px;
  min-height:var(--tap);padding:11px 12px;border:0;background:transparent;color:#FFF;
  font:400 var(--label-size)/1.5 var(--label-face);letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 1px 8px #000,0 1px 3px #000;
}
.topic-dialog .close:hover{background:#0003}
/* #549 fix 3: these were hardcoded 11px on desktop, under the system floor. */
.detail-bottom{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 24px;border:0;padding:0;margin-top:24px}
.detail-bottom button{
  background:transparent;border:0;min-height:var(--tap);padding:10px 0;color:#EEE5D9;
  font:400 var(--label-size)/1.5 var(--label-face);letter-spacing:.12em;text-transform:uppercase;
}
.detail-bottom button:hover{text-decoration:underline;text-underline-offset:5px}
.detail-bottom .label{font-size:var(--label-size);color:var(--muted);white-space:nowrap;margin-bottom:0}
.topic-dialog :focus-visible{outline:2px solid #FFF;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.detail-open{overflow:hidden}

@media(max-width:1000px){
  .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
  .image-space{height:210px}
}
@media(max-width:900px){
  .detail-copy{width:60%;padding:64px 26px 28px 32px}
  .detail-copy h2{font-size:43px}
  .detail-copy p:not(.label){font-size:15px;margin-top:18px}
  .detail-copy .text-link{margin-top:17px}
  .detail-bottom{margin-top:12px;gap:2px 18px}
}

/* #549 fix 2: STOP OVERLAYING.
   Below 650, and on any coarse pointer whatever the width, the copy block is
   350-450px tall over a landscape picture about 221px tall on a 393 phone, so
   an overlay spills off the image onto the plate above and below. Stacked, the
   whole photograph keeps its ratio and the copy sits under it on the plate.
   Hover does not exist on touch, so the phone dialog is simply a tap sheet. */
@media(max-width:650px),(pointer:coarse){
  .topic-dialog,.topic-dialog[data-mode="hover"]{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .detail-content{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .detail-content::after{display:none}      /* no gradient: nothing overlays */
  .detail-image{grid-area:1/1;align-self:start}
  .detail-copy{grid-area:2/1;width:100%;max-width:none;padding:26px 22px 28px}
  .detail-copy h2{font-size:36px;max-width:none}
  .detail-copy p:not(.label){font-size:15px;max-width:none;text-shadow:none}
  .topic-dialog .close{
    top:0;right:0;position:relative;grid-area:1/1;justify-self:end;align-self:start;
    margin:8px;background:#0c0a09b3;text-shadow:none;
  }
}
@media(max-width:650px){
  .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:12px;padding-bottom:40px}
  .image-space{height:150px;padding-block:0!important}
  .image-space img{max-height:140px;max-width:100%}
  .topic:nth-child(even) .image-space{padding-top:20px!important}
  .topic-name{font-size:17px;line-height:1.35}
  .topic-meta{align-items:flex-start;gap:7px;padding-top:12px}
  .browse-hint{display:none}
  .view-switch button{min-width:63px;padding-inline:8px}
  .is-list .topic-link{grid-template-columns:64px 1fr;gap:16px}
  .is-list .image-space{height:60px}
  .is-list .image-space img{max-height:60px;max-width:64px}
  .is-list .list-summary{display:none}
}
@media(prefers-reduced-motion:reduce){
  .detail-copy .text-link,.detail-copy .text-link::before{transition:none}
}

/* Mobile review preview: persistent close bar and a shorter image. */
@media(max-width:650px),(pointer:coarse){
 .topic-dialog,.topic-dialog[data-mode="hover"]{overflow:hidden;padding-top:48px;background:#191715;max-height:calc(100dvh - 24px)}
 .topic-dialog .detail-content{max-height:calc(100dvh - 72px);overflow:auto;overscroll-behavior:contain}
 .topic-dialog .close{position:absolute;top:0;right:8px;margin:0;min-height:48px;background:#191715;font-size:12px}
 .topic-dialog .detail-image{width:100%;height:min(25dvh,200px);object-fit:contain;background:#120f0d}
 .topic-dialog .detail-copy{padding:20px 22px 24px}
 .topic-dialog .detail-copy h2{font-size:clamp(28px,8vw,36px)}
 .topic-dialog .detail-bottom{gap:4px 16px}
 .topic-dialog .detail-bottom button{font-size:12px}
}