/* ==========================================================================
   devanshi jain — press (the bars and the scrolling frame are in page.css)
   ========================================================================== */

ul { margin: 0; padding: 0; list-style: none; }

/* five columns, newest first, read left to right */
.pr-list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(20px, 2vw, 32px); row-gap: clamp(36px, 6vh, 60px);
  padding: var(--fade) var(--right) var(--fade) var(--side);
}
.pr-item__line { display: block; }
.pr-item__line + .pr-item__line { margin-top: .5em; }
/* first line: date + publication in a darker grey, same light weight as the rest (no bold),
   as in the owner's mockup; place + type below stay the soft grey */
.pr-item__line:first-child { color: #2f3130; }
.pr-item__date { margin-right: .55em; }
.pr-item__name { font-weight: inherit; letter-spacing: 0.02em; }

/* entries with an online article link to it */
.pr-item__link {
  display: block; position: relative;
  -webkit-user-select: none; user-select: none;
  transition: opacity .25s ease;
}
.pr-item__link::after { content: ""; position: absolute; inset: -8px -10px; }
@media (hover: hover) { .pr-item__link:hover { opacity: .6; } }
@media (hover: none) { .pr-item__link:active { opacity: .55; transition: opacity 0s; } }
@media (prefers-reduced-motion: reduce) { .pr-item__link { transition: none; } }

/* ---------- recognition: honours below the press list, in the same form ---------- */
.pr-heading { margin: 0; padding: clamp(24px, 5vh, 56px) var(--right) 0 var(--side); font-size: 1em; font-weight: 300; color: #2f3130; letter-spacing: .03em; line-height: 1.6; }
.pr-list--recognition { padding-top: clamp(18px, 3vh, 28px); }

/* ---------- images under the list (as in the owner's layout) ---------- */
/* small pictures from the first column; the wide one ends at the last column's edge */
.pr-gallery {
  display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(28px, 3vw, 48px);
}
.pr-gallery__group { display: flex; align-items: flex-end; gap: clamp(28px, 3vw, 48px); min-width: 0; }
.pr-gallery__group--right { margin-left: auto; justify-content: flex-end; }
.pr-fig { margin: 0; min-width: 0; }
/* caption: date + publication, small, light and never bold, so it stays quieter than the list */
.pr-fig__cap { font-size: .82em; letter-spacing: .03em; line-height: 1.6; margin-bottom: .55em; white-space: nowrap; color: var(--ink-soft); opacity: .85; }
.pr-fig__cap .pr-item__name { letter-spacing: inherit; }
.pr-fig__link { display: block; -webkit-user-select: none; user-select: none; transition: opacity .25s ease; }
@media (hover: hover) { .pr-fig__link:hover { opacity: .8; } }
@media (hover: none) { .pr-fig__link:active { opacity: .6; transition: opacity 0s; } }
.pr-fig img { display: block; height: var(--pic-h); width: auto; max-width: 100%; object-fit: cover; background: #efefee; }

/* in the list (phones, tablets, short screens): the images close the scroll */
.pr-gallery--inline { padding: clamp(24px, 6vh, 56px) var(--right) var(--fade) var(--side); }
.pr-gallery--fixed { display: none; }

/* desktop: the images stay fixed above the footer, like the bars; only the entries scroll */
@media (min-width: 961px) and (min-height: 800px) {   /* shorter laptops (720–768px tall) scroll them instead: a fixed row would leave the list too little room */
  .pr-gallery--inline { display: none; }
  .pr-gallery--fixed {
    display: flex; position: fixed; z-index: 2;
    left: var(--side); right: var(--right); bottom: var(--frame-bottom);
  }
  .press-page { --gallery-room: calc(var(--pic-h) + var(--cap-h) + clamp(16px, 3vh, 32px)); }
  .press-page .page-frame { bottom: calc(var(--frame-bottom) + var(--gallery-room)); }
}
/* one height for every picture (so they share a top and bottom edge), and the caption line above it;
   set on the page so the scrolling frame can make room for the fixed row */
.press-page { --pic-h: clamp(140px, 19vh, 220px); --cap-h: calc(.82 * var(--text) * 2.15); }   /* caption line + its gap */

/* smaller laptops and tablets */
@media (max-width: 1180px) { .pr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .pr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* tablets: the gallery stacks — small pictures in a row, the wide one under them */
@media (max-width: 960px) {
  .pr-gallery { flex-direction: column; align-items: stretch; gap: 32px; }
  .pr-gallery__group--right { margin-left: 0; justify-content: flex-start; }
  /* the wide picture fills the width; the small ones share one height and fill exactly the same width
     (each grows by its shape, --r = width ÷ height, set by press.js) */
  .pr-gallery__group--right .pr-fig { width: 100%; }
  .pr-gallery__group--right img { width: 100%; height: auto; }
  .pr-gallery__group--left .pr-fig { flex: var(--r, 1) 1 0; width: auto; min-width: 0; }
  .pr-gallery__group--left .pr-fig img { width: 100%; height: auto; max-width: none; }
}

/* phones: two columns */
@media (max-width: 719px) {
  .pr-gallery { gap: 28px; }
  /* narrow pictures: the caption keeps to the picture's width, date over title */
  .pr-fig__cap { white-space: normal; line-height: 1.45; }
  .pr-fig__cap .pr-item__date { display: block; margin-right: 0; }
  .pr-fig__cap .pr-item__name { white-space: nowrap; }
  .pr-gallery__group--right .pr-fig__cap .pr-item__date { display: inline; margin-right: .55em; }
  .pr-gallery__group { gap: 14px; }
  .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 40px; }
  .pr-item__line + .pr-item__line { margin-top: .25em; }
}