/* ==========================================================================
   Work page: grid section, cards and the hover overlay.
   One hover/overlay design for every card (project, illustration, animate): black 68% overlay, all text pure white, title Roboto
   Bold 18 (-0.25px), info lines Roboto Regular 14, centred, 0.2s ease-out. Cards are links (projects) or buttons (modals); the colour
   is pinned for every state so the parent theme's link colours can never change it.
   ========================================================================== */
.ps-grid-section { padding-block: 24px 40px; }
.ps-card__link { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: center; text-decoration: none; cursor: pointer; }
.ps-card__link:is(:hover, :focus, :focus-visible, :active, :visited) { color: #fff; text-decoration: none; }
.ps-card__media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ps-card__overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: 16px; box-sizing: border-box; background: rgba(0, 0, 0, 0.68);
	font-family: 'Roboto', var(--ps-font-body); color: #fff; opacity: 0; transition: opacity 0.2s cubic-bezier(0, 0, 0.58, 1);
	overflow: hidden;
}
.ps-card__link:hover .ps-card__overlay, .ps-card__link:focus-visible .ps-card__overlay { opacity: 1; }
.ps-card__link:focus-visible { outline-offset: -4px; outline-color: #fff; }
.ps-card__title { display: block; font-weight: 700; font-size: 18px; line-height: 22px; letter-spacing: -0.25px; color: #fff; overflow-wrap: anywhere; }
.ps-card__line { display: block; font-weight: 400; font-size: 14px; line-height: 18px; color: #fff; overflow-wrap: anywhere; }

/* No hover on touch screens: the same texts stay visible at the bottom of each card. */
@media (hover: none) {
	.ps-card__overlay { opacity: 1; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 75%); padding-bottom: 14px; gap: 2px; }
	.ps-card__title { font-size: 16px; line-height: 20px; }
	.ps-card__line { font-size: 13px; line-height: 17px; }
}
@media (prefers-reduced-motion: reduce) { .ps-card__overlay { transition: none; } }