/* Homepage brand bento («پرو پرایمس، فروشگاه محصولات مجازی»), rebuilt from the
 * supplied reference.
 *
 * Every card dimension is expressed in cqw (1cqw = 1% of that card's own width),
 * so a card keeps the reference proportions at any column width. Reference card:
 * 305 x 243 with a 80px brand mark. The grid flows left-to-right (direction:ltr)
 * with the card copy in RTL, which is how the reference orders the tiles.
 *
 * The ChatGPT card is NOT a separate design any more: it carries the same
 * .pp-bento-card class (so its colour, border, radius, hover and glow are
 * literally the same declarations) and only widens into the 1.74fr column. Its
 * internals are re-expressed in cqh — one cqh is 1% of its own height, and its
 * height is held equal to a sibling card's — so a 1.74x wider card still draws
 * its mark, arrow and type at exactly the size a sibling card draws them.
 * (cqw cannot do that job here: 26.2cqw of a 1.74x wider card would be a 1.74x
 * bigger logo.)
 *
 * Base = light theme; html[data-theme="dark"] carries the dark reference look.
 */

.pp-bento {
	width: min(1120px, calc(100% - 70px));
	margin: 14px auto 0;
}
.pp-bento-title {
	margin: 0 0 12px;
	text-align: center;
	color: #1b1f2b;
	font-size: 18px;
	font-weight: 700;
}

.pp-bento-panel {
	width: 100%;
	padding: 20px;
	border: 1px solid #e4e8f1;
	border-radius: 26px;
	background: #f1f3f9;
	box-shadow: 0 18px 40px rgba(22, 34, 66, .08);
}

.pp-bento-grid {
	display: grid;
	direction: ltr;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.74fr);
	gap: 18px;
}

/* ------------------------------------------------------------------ brand card */
.pp-bento-card {
	container-type: inline-size;
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 305 / 243;
	overflow: hidden;
	/* Painted in the card's own mark's colour. Both stops are sampled from the
	   artwork in PHP (see pro_primes_logo_brand_rgb), so replacing a logo
	   repaints the card with no CSS edit. No hairline: on a saturated fill a
	   border only muddies the edge, which is what the previous 1.5px one did. */
	border: 0;
	border-radius: 6.5% / 8.2%;
	background: linear-gradient(158deg, rgb(var(--bento-glow, 130, 150, 255)) 0%, rgb(var(--bento-deep, 44, 52, 96)) 100%);
	color: #fff;
	direction: rtl;
	text-align: left;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pp-bento-card:hover {
	transform: translateY(-2px);
	filter: brightness(1.07);
	box-shadow: 0 14px 30px rgba(var(--bento-deep, 22, 34, 66), .38);
}
.pp-bento-card::before {
	content: "";
	position: absolute;
	top: -34%;
	right: -14%;
	width: 76%;
	height: 96%;
	/* On a coloured fill the corner reads best as a lift, not a tint. */
	background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent 72%);
	pointer-events: none;
}
.pp-bento-arrow {
	position: absolute;
	top: 9cqw;
	left: 9cqw;
	display: grid;
	width: 6.6cqw;
	height: 6.6cqw;
	color: rgba(255, 255, 255, .92);
}
.pp-bento-arrow svg { display: block; width: 100%; height: 100%; }
.pp-bento-mark {
	position: absolute;
	top: 7.9cqw;
	right: 7.9cqw;
	display: grid;
	width: 26.2cqw;
	height: 26.2cqw;
	place-items: center;
}
.pp-bento-mark img { display: block; width: 100%; height: 100%; border-radius: 26%; object-fit: contain; }
.pp-bento-copy {
	position: absolute;
	right: 7.9cqw;
	bottom: 9cqw;
	left: 7.9cqw;
	display: grid;
	gap: .6cqw;
}
.pp-bento-label { color: rgba(255, 255, 255, .74); font-size: 4.6cqw; line-height: 1.5; }
.pp-bento-name { color: #fff; font-size: 9.5cqw; font-weight: 800; line-height: 1.2; }
.pp-bento-sub { color: rgba(255, 255, 255, .84); font-size: 4.9cqw; line-height: 1.5; }

/* GitHub Copilot has no artwork in the theme, so its mark is drawn in CSS. */
.pp-bento-copilot {
	position: relative;
	display: block;
	width: 94%;
	height: 88%;
	border-radius: 40% 40% 32% 32% / 44% 44% 38% 38%;
	background: linear-gradient(168deg, #a5e2f7 0%, #7fb6f2 40%, #b48ce8 74%, #e07bd5 100%);
}
.pp-bento-copilot i {
	position: absolute;
	top: 31%;
	width: 20%;
	height: 26%;
	border-radius: 32%;
	background: #0d1020;
}
.pp-bento-copilot i:first-child { left: 24%; }
.pp-bento-copilot i:last-child { right: 24%; }
.pp-bento-copilot b {
	position: absolute;
	left: 50%;
	bottom: 18%;
	width: 30%;
	height: 10%;
	transform: translateX(-50%);
	border-radius: 999px;
	background: #0d1020;
}

/* ------------------------------------------------- the wide ChatGPT card
 * Same skin as a brand card, same height as a brand card, only wider.
 * Height: the 1.74fr column is 1.74x a brand card's width, so aspect-ratio
 * 1.74*305/243 makes this card exactly as tall as the three beside it — and
 * gives the size container a definite height for the cqh values to resolve
 * against, instead of relying on the grid stretch.
 * Radius: 6.5%/8.2% would draw a 1.74x wider corner on a 1.74x wider card;
 * 3.75%/8.2% keeps the corner a circle of the same radius as a sibling's.
 */
.pp-bento-card--lead {
	container-type: size;
	grid-column: 4;
	grid-row: 1;
	aspect-ratio: 530.7 / 243;
	border-radius: 3.75% / 8.2%;
}
.pp-bento-card--lead::before {
	top: -34cqh;
	right: -17.6cqh;
	width: 95.4cqh;
	height: 96cqh;
}
.pp-bento-card--lead .pp-bento-arrow {
	top: 11.3cqh;
	left: 11.3cqh;
	width: 8.3cqh;
	height: 8.3cqh;
}
.pp-bento-card--lead .pp-bento-mark {
	top: 50%;
	right: 9.9cqh;
	width: 32.9cqh;
	height: 32.9cqh;
	transform: translateY(-50%);
}
.pp-bento-card--lead .pp-bento-copy {
	top: 50%;
	right: calc(9.9cqh + 32.9cqh + 4cqh);
	bottom: auto;
	left: 9.9cqh;
	gap: .75cqh;
	transform: translateY(-50%);
}
.pp-bento-card--lead .pp-bento-label { font-size: 5.8cqh; }
.pp-bento-card--lead .pp-bento-name { font-size: 11.9cqh; }
.pp-bento-card--lead .pp-bento-sub { font-size: 6.2cqh; }

/* ----------------------------------------------------------------- dark theme */
html[data-theme="dark"] .pp-bento-title { color: #f4f4f4; }
html[data-theme="dark"] .pp-bento-panel {
	border-color: #1d2027;
	background: #0a0b0e;
	box-shadow: 0 20px 46px rgba(0, 0, 0, .35);
}
/* The card is its mark's colour in both themes — the brand fill and its white
   type are self-contained, so only the hover shadow needs softening here. */
html[data-theme="dark"] .pp-bento-card:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .pp-bento-card::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent 72%); }

/* ---------------------------------------------------------------- small screens
 * Below 1000px the grid drops to two columns and the ChatGPT card leads the
 * section on its own full-width row, so it no longer shares a row height with
 * anything. 2.56 is the aspect that a full-width card needs to come out the
 * same height as the 2-up cards underneath it: a brand card is (100% - gap)/2
 * wide, and gap/width is small enough that the ratio barely moves between
 * 650px and 1000px.
 */
@media (max-width: 1000px) {
	.pp-bento { width: calc(100% - 36px); margin-top: 12px; }
	.pp-bento-panel { padding: 14px; border-radius: 20px; }
	.pp-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.pp-bento-card--lead {
		order: -1;
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 2.56 / 1;
	}
}

@media (max-width: 650px) {
	.pp-bento { width: calc(100% - 24px); margin-top: 10px; }
	.pp-bento-panel { padding: 10px; border-radius: 16px; }
	.pp-bento-grid { gap: 9px; }
}