/* ================================
   PROJECT NEWS — the press a project has picked up, at the foot of its page.
   Only rendered when there is something to show: a page with no coverage keeps
   the layout it has today rather than carrying an empty shell.

   Laid out as tiles rather than a list. Each item is only a masthead, a
   headline and a year, which reads as a card far better than as a row with most
   of the measure left empty.

   The headline is the tile: centred, vertically middled, and given the room to
   be the only thing the eye lands on. The masthead sits above it as an eyebrow
   under a short centred rule, and the year is pinned to the top corner as a
   quiet marker rather than stranded at the foot of a half-empty box. Hovering
   brings in the same pink corner brackets the posters use.
   ================================ */

.project-news {
  padding: 5rem clamp(3rem, 6vw, 8rem);
  border-top: 1px solid var(--grey);
}

.project-news-label {
  font-family: 'Barlow', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 2.5rem;
}

/* Two abreast, so four stories land as a 2x2 block. Capped well short of the
   full measure and inset from the section's own padding: the tiles are a closing
   note under the breakdown, and running them wall to wall gave them more weight
   on the page than the work above them. */
.project-news-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  max-width: 54rem;
  margin: 0 auto;
}

.project-news-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 11.5rem;
  padding: 2.5rem clamp(1.5rem, 2.5vw, 2.75rem);
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--grey);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.project-news-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #3a3a3a;
  transform: translateY(-3px);
}

/* PINK CORNER BRACKETS — the poster treatment, at tile scale. One border is
   masked down to its four corners and eases in from outside to sit just off
   the tile edge. */
.project-news-item::before {
  content: '';
  position: absolute;
  inset: -12px;
  pointer-events: none;
  border: 1.5px solid var(--pink);
  opacity: 0;
  transition: opacity 0.4s ease, inset 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  --corner: linear-gradient(#000, #000);
  -webkit-mask-image: var(--corner), var(--corner), var(--corner), var(--corner);
  mask-image: var(--corner), var(--corner), var(--corner), var(--corner);
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-position: top left, top right, bottom left, bottom right;
  mask-position: top left, top right, bottom left, bottom right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.project-news-item:hover::before {
  opacity: 1;
  inset: -4px;
}

/* The masthead, centred over a short rule that reads as a divider between it
   and the headline rather than a line ruled across the whole box. */
.project-news-pub {
  position: relative;
  font-family: 'Barlow', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--pink);
  padding-bottom: 0.85rem;
  margin-bottom: 0.9rem;
}

.project-news-pub::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.75rem;
  height: 1px;
  background: var(--grey);
  transition: background 0.3s ease, width 0.3s ease;
}

.project-news-item:hover .project-news-pub::after {
  background: var(--pink);
  width: 3rem;
}

/* The tile's one piece of content, sized to carry it. */
a.project-news-headline {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1.2rem, 1.45vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.project-news-item:hover a.project-news-headline { color: var(--pink); }

/* Whole tile clickable, same trick as the news page. */
a.project-news-headline::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* No blurb here by design. The reader is already on the project page, so the
   summary from /news re-explains a film they are looking at — masthead plus
   headline is enough to earn the click, and it keeps the same copy from
   running on two URLs.

   Pinned to the top corner: the year is a filing mark, not a line of the tile's
   copy, and centring it under the headline gave it more weight than it earns. */
.project-news-date {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: 'Barlow', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: #5a5a5a;
  transition: color 0.3s ease;
}

.project-news-item:hover .project-news-date { color: var(--mid); }

/* Sits above the tile-wide link so it stays its own target. */
.project-news-more {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 2.5rem;
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  text-decoration: none;
  transition: opacity 0.2s;
}
.project-news-more:hover { opacity: 0.65; }

@media (max-width: 768px) {
  .project-news { padding: 3.5rem 1.5rem; }
  .project-news-list { grid-template-columns: 1fr; gap: 1rem; }
  .project-news-item { min-height: 0; padding: 2.25rem 1.5rem; }
  a.project-news-headline { font-size: 1.15rem; }
}

/* The brackets sit outside the tile, so they need room at the section edge on
   touch, where :hover can latch after a tap. */
@media (hover: none) {
  .project-news-item::before { display: none; }
  .project-news-item:hover { transform: none; }
}