/*
 * Widget sy-card-grid. Las tarjetas en sí están en components.css (.sy-card…);
 * acá van las grillas y lo que cambia según dónde se usan (design/home.md).
 */

.sy-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 768px) {
	.sy-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1024px) {
	.sy-card-grid--l3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sy-card-grid--l4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sy-card-grid--l5x2 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	/* 3 + 2: seis columnas, tres tarjetas de 2 y dos de 3 (Outcomes). */
	.sy-card-grid--l3-2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.sy-card-grid--l3-2 > :nth-child(-n + 3) { grid-column: span 2; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) { grid-column: span 3; }

	/* 4 + 2 + ancha (Capabilities de Platform): la 7 ocupa las columnas 3 y 4
	   de la segunda fila, al lado de la 5 y la 6. */
	.sy-card-grid--l4-2-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sy-card-grid--l4-2-wide > :nth-child(7) { grid-column: 3 / span 2; }
}

/* Con dos columnas (tablet) la ancha ocupa la fila entera. */
@media (min-width: 768px) and (max-width: 1023px) {
	.sy-card-grid--l4-2-wide > :nth-child(7) { grid-column: 1 / -1; }
}

.sy-card__link {
	color: inherit;
	text-decoration: none;
}

.sy-card__link:hover {
	text-decoration: underline;
}

/* --- Feature (Problem 01–04, Outcomes) ---------------------------------------- */

.sy-card--feature .sy-card__text {
	margin: 0;
}

/* Outcomes (3+2): radio 26, títulos de 22 y separaciones medidas. */
.sy-card-grid--l3-2 > .sy-card--feature {
	gap: 0;
	padding: 26px;
	border-radius: var(--sy-r-card-sm);
}

.sy-card-grid--l3-2 .sy-card__title {
	margin-top: 20px;
	font-size: 22px;
	line-height: normal;
}

.sy-card-grid--l3-2 .sy-card__subtitle { margin-top: 12px; }
.sy-card-grid--l3-2 .sy-card__text { margin-top: 10px; }

.sy-card-grid--l3-2 .sy-card--featured .sy-card__title {
	font-size: 24px;
	font-weight: 700;
}

@media (min-width: 768px) {
	.sy-card-grid--l3-2 > .sy-card--feature {
		padding: 33px;
		border-radius: var(--sy-r-card-lg);
	}

	.sy-card-grid--l3-2 .sy-card__title { margin-top: 22px; }
	.sy-card-grid--l3-2 .sy-card__subtitle { margin-top: 14px; }
	.sy-card-grid--l3-2 .sy-card__text { margin-top: 11px; }
}

/* Las dos anchas: tile a la izquierda; número, título y textos a la derecha. */
@media (min-width: 1024px) {
	.sy-card-grid--l3-2 > .sy-card--feature:nth-child(n + 4) {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 28px;
		align-content: start;
	}

	.sy-card-grid--l3-2 > :nth-child(n + 4) .sy-card__top { display: contents; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) .sy-tile { grid-column: 1; grid-row: 1 / span 4; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) .sy-num { grid-column: 2; grid-row: 1; justify-self: start; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) > :not(.sy-card__top) { grid-column: 2; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) .sy-card__title { margin-top: 12px; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) .sy-card__subtitle { margin-top: 12px; }
	.sy-card-grid--l3-2 > :nth-child(n + 4) .sy-card__text { margin-top: 10px; }
}

/* --- Media (Platform preview) -------------------------------------------------- */

/* 1 de borde + 14: la imagen empieza a 15 del canto, como en el Figma. */
.sy-card--media {
	padding: 14px;
}

.sy-card--media img {
	display: block;
}

.sy-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 10px 14px;
}

/* En el Figma la imagen mide 258×275 sobre un ancho útil de 255 (desborda 3px):
   se conserva el alto de 275. En mobile la proporción 258/275 ya da 320×341. */
@media (min-width: 1024px) {
	.sy-card-grid--media .sy-card--media img { aspect-ratio: 255 / 275; }
}

.sy-card__index {
	color: var(--sy-green-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
}

.sy-card--media .sy-card__title {
	font-size: 18px;
	line-height: 24.3px;
}

.sy-card--media .sy-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 24px;
}

/* --- Glass (Who it's for) ------------------------------------------------------- */

.sy-card--glass .sy-card__text { margin: 0; }

@media (min-width: 1024px) {
	.sy-card-grid--glass .sy-card--glass .sy-chips {
		margin-top: auto;
		padding-top: 8px;
	}
}

@media (max-width: 767px) {
	.sy-card--glass {
		padding: 24px;
		border-radius: var(--sy-r-card-sm);
	}

	.sy-card--glass .sy-chips { margin-top: 0; padding-top: 8px; }
}

/* --- Capabilities de Platform (4 + 2 + ancha), design/platform.md §4 ------- */

.sy-card-grid--l4-2-wide { gap: 14px; }

.sy-card-grid--l4-2-wide > .sy-card--feature {
	gap: 16.7px;
	padding: 24px 22px 26px;
	border-radius: var(--sy-r-card-sm);
}

.sy-card-grid--l4-2-wide .sy-num {
	margin-top: -1px;
	font-size: 44px;
	line-height: 39.6px;
	letter-spacing: -0.88px;
}

.sy-card-grid--l4-2-wide .sy-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 24.7px;
}

/* La ancha: texto y, al lado (abajo en mobile), las barras decorativas. */
.sy-card-grid--l4-2-wide > .sy-card--featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	gap: 14.8px;
	padding: 24px 22px;
	overflow: hidden;
}

.sy-card-grid--l4-2-wide > .sy-card--featured .sy-card__top {
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
}

.sy-card-grid--l4-2-wide > .sy-card--featured .sy-num {
	margin-top: 0;
	letter-spacing: 0;
}

.sy-card-grid--l4-2-wide > .sy-card--featured .sy-card__title {
	font-size: 22px;
	line-height: 28.6px;
}

.sy-card__chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 120px;
	margin-top: 7.2px; /* 22 entre el texto y el gráfico */
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	background: var(--sy-gradient-glass);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

.sy-card__chart span {
	flex: 1;
	border-radius: 5px 5px 2px 2px;
	background: rgba(255, 255, 255, 0.25);
}

.sy-card__chart span:nth-child(1) { height: 35%; }
.sy-card__chart span:nth-child(2) { height: 55%; }
.sy-card__chart span:nth-child(3) { height: 45%; }
.sy-card__chart span:nth-child(4) { height: 72%; }
.sy-card__chart span:nth-child(5) {
	height: 92%;
	background: linear-gradient(180deg, var(--sy-lime), var(--sy-green));
}

/* Mobile (5:1484): el título de 19 y el cuerpo de 15 llevan más interlínea
   que en desktop (2 líneas = 50.5 y 50.6 en el Figma). */
@media (max-width: 767px) {
	.sy-card-grid--l4-2-wide > .sy-card--feature:not(.sy-card--featured) .sy-card__title { line-height: 25.27px; }
	.sy-card-grid--l4-2-wide > .sy-card--feature:not(.sy-card--featured) .sy-card__text { line-height: 25.31px; }
}

@media (min-width: 768px) {
	.sy-card-grid--l4-2-wide { gap: 20px; }
}

@media (min-width: 1024px) {
	.sy-card-grid--l4-2-wide > .sy-card--feature {
		padding: 30px 28px 34px;
		border-radius: var(--sy-r-card);
	}

	.sy-card-grid--l4-2-wide > .sy-card--featured {
		grid-template-columns: minmax(0, 1fr) 200px;
		column-gap: 28px;
		padding: 30px 32px;
	}

	.sy-card-grid--l4-2-wide > .sy-card--featured > :not(.sy-card__chart) { grid-column: 1; }

	.sy-card__chart {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		height: 170px;
		margin-top: 0;
	}
}

/* --- Tile: vidrio sobre oscuro, icono + nombre (Integrations de Platform) --- */

.sy-card-grid--tile {
	gap: 10px;
}

@media (max-width: 767px) {
	.sy-card-grid--tile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sy-card--tile {
	gap: 18px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	background: var(--sy-gradient-glass);
	box-shadow: var(--sy-shadow-glass);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	--sy-card-title: var(--sy-white);
}

.sy-card--tile .sy-tile {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(146, 239, 44, 0.4);
	border-radius: 15px;
	background: rgba(146, 239, 44, 0.1);
	box-shadow: var(--sy-shadow-tile-glass);
	font-size: 22px;
}

/* "Encounters" ya desborda el interior en el Figma: se deja sin cortar. */
.sy-card--tile .sy-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.2px;
	overflow-wrap: normal;
	hyphens: manual;
}

@media (min-width: 1024px) {
	.sy-card-grid--tile { gap: 14px; }

	.sy-card--tile {
		justify-content: space-between;
		gap: 28px;
		min-height: 150px;
		padding: 20px;
		border-radius: 20px;
	}

	.sy-card--tile .sy-card__title {
		font-size: 16px;
		line-height: 20.8px;
	}
}