/*
 * ShineSky 006 homepage News (Figma 2008:203 desktop, 2008:221 mobile),
 * internal gray prototype. All selectors scoped to .ss6-news; no JS.
 *
 * Desktop anchor 1440x720 (px values from Figma; vw = px / 1440, clamped
 * to the Figma value as the maximum):
 *   top 82 | eyebrow 17 | 27 | heading 65 | 54 | cards 400 | 75 = 720
 *   content x66.25, width 1292.5 (right gap 81.25), 3 x 416.1458 + 2 x 22
 *   card: image 224.1985 | 15 | date 15 | 8 | title 2 x 26 | 13
 *         | summary 33 | 39.8 = 400
 *   Title/summary offsets inside the card are measured from the Figma
 *   export pixels (+/-1px), not from node metadata.
 * Mobile anchor 390x1168:
 *   top 56 | eyebrow 13.2 | 22.8 | heading 33.846 | 40.154
 *   | 3 x card 310 + 2 x 20 | 32 = 1168; card: image 188.5625 | 15
 *   | date 13.75 | 10.25 | title 2 x 25.53 | 31.4 = 310. No summaries.
 * Tablet 600-1023 is an approved interpolation (two columns), not Figma.
 * Responsive modes: desktop >=1024, tablet 600-1023, phone <600.
 */

.ss6-news {
	--ss6n-bg: #fbfaf8;
	--ss6n-ink: #171615;
	--ss6n-muted: #5e5a55;
	--ss6n-placeholder: #d9d9d9;
	--ss6n-inset-start: clamp(16px, 4.6007vw, 66.25px);
	--ss6n-inset-end: clamp(16px, 5.6424vw, 81.25px);
	--ss6n-gap: 22px;
	--ss6n-row-gap: 22px;
	--ss6n-title-lh: 1.1064;

	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: clamp(56px, 5.6944vw, 82px) 0 clamp(40px, 5.2083vw, 75px);
	background: var(--ss6n-bg);
	color: var(--ss6n-ink);
}

.ss6-news *,
.ss6-news *::before,
.ss6-news *::after {
	box-sizing: border-box;
}

.ss6-news__inner {
	padding-inline: var(--ss6n-inset-start) var(--ss6n-inset-end);
	max-width: 1440px;
	margin-inline: auto;
	position: relative;
	left: clamp(0px, calc(1.5625vw - 22.5px), 7.5px);
}

.ss6-news__eyebrow {
	margin: 0;
	font-family: "Inter Variable", "Inter", system-ui, sans-serif;
	font-size: clamp(13px, 1.02vw, 14.6875px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Heading top lands at y126: 82 + 16.156 (eyebrow) + 27.844. */
.ss6-news__heading {
	margin: clamp(14px, 1.9336vw, 27.844px) 0 0;
	font-family: "Montserrat Variable", "Montserrat", system-ui, sans-serif;
	font-size: clamp(28px, 4.0799vw, 58.75px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

/* Cards top lands at y245: 126 + 64.625 (heading) + 54.375. */
.ss6-news__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ss6n-row-gap) var(--ss6n-gap);
	/* Keep the Figma card width and align the cards with the heading;
	   the shared inner track centers at wide viewport widths. */
	max-width: 1292.5px;
	margin: clamp(28px, 3.776vw, 54.375px) 0 0;
	padding: 0;
	list-style: none;
}

.ss6-news__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0 0 clamp(16px, 2.7639vw, 39.8px);
}

/* Gray placeholder slot (Figma RECTANGLE #d9d9d9, 416.1458 x 224.1985).
   The ratio reserves height, so a late or failed image causes no shift. */
.ss6-news__media {
	position: relative;
	width: 100%;
	aspect-ratio: 416.1458 / 224.1985;
	overflow: hidden;
	background: var(--ss6n-placeholder);
}

.ss6-news__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
}

.ss6-news__date {
	margin: clamp(10px, 1.0417vw, 15px) 0 0;
	font-family: "Inter Variable", "Inter", system-ui, sans-serif;
	font-size: clamp(11px, 0.8333vw, 12px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--ss6n-muted);
}

/* Figma reserves two title lines (box 52) so summaries align across cards;
   min-height keeps that and still lets a longer title grow. */
.ss6-news__title {
	min-height: calc(2em * var(--ss6n-title-lh));
	margin: clamp(6px, 0.5556vw, 8px) 0 0;
	font-family: "Montserrat Variable", "Montserrat", system-ui, sans-serif;
	font-size: clamp(18px, 1.6319vw, 23.5px);
	font-weight: 600;
	line-height: var(--ss6n-title-lh);
	letter-spacing: 0;
	color: var(--ss6n-ink);
	overflow-wrap: break-word;
}

.ss6-news__summary {
	margin: clamp(8px, 0.9028vw, 13px) 0 0;
	font-family: "Inter Variable", "Inter", system-ui, sans-serif;
	font-size: clamp(13px, 1.02vw, 14.6875px);
	font-weight: 400;
	line-height: 1.1234;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

/* Linked cards only (url approved). The title anchor is the single link and
   accessible name; its ::after stretches over the card so the image area is
   clickable too. Touch navigates on first tap: nothing is hover-gated. */
.ss6-news__link {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.15em;
}

.ss6-news__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ss6-news__link:focus {
	outline: none;
}

.ss6-news__link:focus-visible {
	text-decoration: underline;
}

.ss6-news__link:focus-visible::after {
	outline: 2px solid var(--ss6n-ink);
	outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
	.ss6-news__card--linked:hover .ss6-news__link {
		text-decoration: underline;
	}
}

/* Image zoom idea from mgweb2020/oNLbRYd (CSS transform over .3s ease only;
   no layout, markup or styling copied). Applies only to cards with both an
   approved image and an approved URL (--zoom), clipped inside the slot.
   Pointer hover and keyboard focus are equivalent. Reduced motion and
   Save-Data (--static, set server-side) stay fully static. */
@media (prefers-reduced-motion: no-preference) {
	.ss6-news:not(.ss6-news--static) .ss6-news__card--zoom .ss6-news__img {
		transition: transform 0.3s ease;
	}

	.ss6-news:not(.ss6-news--static) .ss6-news__card--zoom:focus-within .ss6-news__img {
		transform: scale(1.05);
	}
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.ss6-news:not(.ss6-news--static) .ss6-news__card--zoom:hover .ss6-news__img {
		transform: scale(1.05);
	}
}

/* Tablet: 600-1023, approved interpolation. Two equal columns; the third
   card flows to the left of the next row. Image keeps 1.856:1. */
@media (max-width: 1023.98px) {
	.ss6-news {
		--ss6n-inset-start: clamp(24px, 4.6007vw, 47px);
		--ss6n-inset-end: var(--ss6n-inset-start);
		--ss6n-row-gap: 40px;
	}

	.ss6-news__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ss6-news__heading {
		font-size: clamp(34px, 4.3vw, 44px);
	}

	.ss6-news__card {
		padding-bottom: 0;
	}

	.ss6-news__date {
		font-size: 12px;
	}

	.ss6-news__title {
		font-size: clamp(20px, 2.6vw, 23.5px);
	}

	.ss6-news__summary {
		font-size: 14px;
	}
}

/* Phone: <600, Figma 2008:221 (390 wide). One column, 20px insets,
   fixed Figma sizes. The mobile design has no summaries. */
@media (max-width: 599.98px) {
	.ss6-news {
		--ss6n-inset-start: 20px;
		--ss6n-inset-end: 20px;
		--ss6n-gap: 0;
		--ss6n-row-gap: 20px;
		padding: 56px 0 32px;
	}

	.ss6-news__eyebrow {
		font-size: 12px;
	}

	/* Heading top at y92: 56 + 13.2 + 22.8. */
	.ss6-news__heading {
		margin-top: 22.8px;
		font-size: 30.769px;
	}

	/* Cards top at y166: 92 + 33.846 + 40.154. */
	.ss6-news__list {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40.154px;
	}

	/* 310 = 188.5625 + 39 + 2 x 25.53 (two reserved title lines) + 31.4. */
	.ss6-news__card {
		padding-bottom: 31.4px;
	}

	.ss6-news__date {
		margin-top: 15px;
		font-size: 11px;
	}

	/* Title top at image + 39: 15 + 13.75 (date) + 10.25. */
	.ss6-news__title {
		margin-top: 10.25px;
		font-size: 23.077px;
	}

	.ss6-news__summary {
		display: none;
	}
}