/* ==========================================================================
   Press — company factsheet and press kits
   Two lists rather than product cards, so the page drops the fixed-height
   .card treatment and sets its own measure and rhythm, matching the reading
   measure of the support page. The factsheet is a ruled record of facts; the
   kits below it are poster tiles, cropped to the 2:3 of the artwork itself.
   Colours come from the site tokens in main.css, so both appearances hold.
   ========================================================================== */

/* The measure of the page, stated once for both sections so the hairlines of
   the factsheet and the edge of the poster grid line up. Neither uses the wide
   percentage gutters of .product-card, which are cut for full-bleed cover art
   rather than for reading. */
.press-facts,
.press-kits {
	max-width: 90rem;
	margin-left: auto;
	margin-right: auto;

	padding-left: max(2.0rem, env(safe-area-inset-left));
	padding-right: max(2.0rem, env(safe-area-inset-right));
}

.press-facts {
	margin-bottom: 5.2rem;
}

.press-kits {
	margin-bottom: 5.2rem;
}


/* ==========================================================================
   Section heads
   ========================================================================== */

.press-section-head {
	margin-bottom: 3.2rem;
}

.press-eyebrow {
	margin: 0 0 0.8rem;

	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--secondaryLabel);
}

.press-heading {
	margin: 0;

	font-size: 3.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--label);
}


/* ==========================================================================
   Factsheet
   A record of the company, laid out label beside value. Each pair is wrapped
   in its own row element: a dt and a dd cannot be ruled as one unit while they
   are siblings, and the wrapper is the only grouping a dl allows.
   ========================================================================== */

.press-facts-list {
	margin: 0;
	border-top: 1px solid var(--quaternaryLabel);
}

.press-fact {
	display: grid;
	grid-template-columns: minmax(14rem, 22ch) 1fr;
	gap: 1.6rem;

	padding: 2.2rem 0;
	border-bottom: 1px solid var(--quaternaryLabel);
}

.press-fact dt {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--secondaryLabel);
}

/* The UA gives dd a 40px indent, which would push every value away from its
   own grid column. */
.press-fact dd {
	margin: 0;
	max-width: 62rem;

	font-size: 1.7rem;
	line-height: 1.6;
	color: var(--label);
	text-wrap: pretty;
}


/* ==========================================================================
   Press kits
   Poster tiles, one per title. The grid is written to look deliberate while
   there is only one kit and to take further titles without a change.
   ========================================================================== */

.press-kit-grid {
	display: grid;

	/* min() keeps a lane from being wider than the padded content box: a plain
	   26rem minimum would overflow the safe area on a narrow screen whose side
	   insets leave less than that to lay a tile out in. Centring the tracks
	   keeps a single poster in the middle of the measure instead of against
	   the leading edge. */
	grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
	justify-content: center;
	gap: 3.2rem;

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

/* Without a cap, a lone tile would stretch its 1fr track across the whole
   measure and blow the poster up to nine hundred pixels wide. */
.press-kit {
	max-width: 34rem;
}

@property --press-kit-lift {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

.press-kit-link {
	display: block;
	border-radius: 13px;
}

.press-kit-link:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

/* The poster is cropped to its own 2:3 rather than trusted to arrive at that
   ratio, so a future kit whose artwork is cut differently still lines up with
   the others in the row.

   The lift is carried by the poster alone rather than by the whole tile, so
   the caption beneath it stays put while the artwork answers the pointer. */
.press-kit-poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;

	border-radius: 13px;
	background-color: var(--secondaryBackground);

	transform: scale(var(--press-kit-lift));
	transition:
		--press-kit-lift 0.25s ease-out,
		box-shadow 0.3s ease;
}

/* Hover state only on devices that really hover: touch browsers apply :hover
   on tap and keep it there, which would leave a tapped poster sitting enlarged
   after the download opens. */
@media (hover: hover) and (pointer: fine) {

	.press-kit-link:hover .press-kit-poster {
		--press-kit-lift: 1.02;
		box-shadow: 0 1.6rem 3.6rem rgba(0, 0, 0, 0.3);
	}

}

.press-kit-title {
	display: block;
	margin-top: 1.6rem;

	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--label);
}

.press-kit-meta {
	display: block;
	margin-top: 0.4rem;

	font-size: 1.4rem;
	line-height: 1.45;
	color: var(--secondaryLabel);
}

@media (prefers-reduced-motion: reduce) {

	.press-kit-poster {
		transition: none;
	}

}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media screen and (max-width: 767px) {

	.press-facts,
	.press-kits {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.press-heading {
		font-size: 2.6rem;
	}

	/* Too little width left for two columns: the label sits above its value
	   instead, and the gap between the pairs closes up. */
	.press-fact {
		grid-template-columns: 1fr;
		gap: 0.6rem;
		padding: 1.8rem 0;
	}

}