/* mm-tools-bento
   Bento grid of modular tiles for the free-seo-tools hub. Forked from
   mm-bento-included so the hub can diverge from the services pages
   without risking regressions on those pages.
   Shapes square. Top border is uniform-weight across the full tile width
   and cycles through the 8-hue kaleidoscope.
   Desktop (>=992): 12-col grid.
   Tablet  (768-991): 12-col grid with wide tiles stretching rows.
   Small tablet (575-767): alternating full / half rows.
   Mobile  (<575): single column. */

.mm-tbento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-flow: dense;
	gap: 20px;
	grid-auto-rows: minmax(180px, auto);
}

.mm-tbento-tile {
	position: relative;
	background: linear-gradient(160deg, #101319 0%, #06070a 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-top-width: 3px;
	animation: mmTBentoBorder 12s ease-in-out infinite;
	padding: 32px 28px 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow:
		0 20px 40px -20px rgba(0, 0, 0, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
	transition: transform 240ms ease, box-shadow 240ms ease;
	text-decoration: none;
	color: inherit;
}

/* Subtle per-tile gradient variations. */
.mm-tbento-tile:nth-of-type(10n+1) { background: linear-gradient(145deg, #1a1f2a 0%, #05060a 100%); }
.mm-tbento-tile:nth-of-type(10n+2) { background: linear-gradient(170deg, #171b25 0%, #06070b 100%); }
.mm-tbento-tile:nth-of-type(10n+3) { background: linear-gradient(135deg, #1c2130 0%, #04050a 100%); }
.mm-tbento-tile:nth-of-type(10n+4) { background: linear-gradient(180deg, #161a23 0%, #05060a 100%); }
.mm-tbento-tile:nth-of-type(10n+5) { background: linear-gradient(155deg, #1b202c 0%, #06070b 100%); }

.mm-tbento-tile:hover {
	transform: translateY(-2px);
	box-shadow:
		0 28px 52px -24px rgba(0, 0, 0, 0.9),
		0 20px 40px -20px rgba(0, 0, 0, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	text-decoration: none;
	color: inherit;
}

/* Default: a tile spans 3 cols out of 12. */
.mm-tbento-tile { grid-column: span 3; }

/* Slot assignments. Mirrors mm-bento-included so the same breakpoint rules
   port over cleanly.
   Row 1: hero (7) + r1top (5)
           hero (7) + r1bot (5)   [hero spans 2 rows]
   Row 2: wide (6) + wide (6)     [or r2a (3) + r2b (3) + r2c (6)]
   Row 3: r3a (4) + r3b (4) + r3c (4)
*/
.mm-tbento-tile--hero  { grid-column: span 7; grid-row: span 2; }
.mm-tbento-tile--r1top { grid-column: span 5; }
.mm-tbento-tile--r1bot { grid-column: span 5; }
.mm-tbento-tile--wide  { grid-column: span 6; }
.mm-tbento-tile--r2a   { grid-column: span 3; }
.mm-tbento-tile--r2b   { grid-column: span 3; }
.mm-tbento-tile--r2c   { grid-column: span 6; }
.mm-tbento-tile--r3a   { grid-column: span 4; }
.mm-tbento-tile--r3b   { grid-column: span 4; }
.mm-tbento-tile--r3c   { grid-column: span 4; }

/* Per-tile animation delay so the kaleidoscope cycles out of sync. */
.mm-tbento-tile:nth-of-type(1) { animation-delay: 0s; }
.mm-tbento-tile:nth-of-type(2) { animation-delay: -1.5s; }
.mm-tbento-tile:nth-of-type(3) { animation-delay: -3s; }
.mm-tbento-tile:nth-of-type(4) { animation-delay: -4.5s; }
.mm-tbento-tile:nth-of-type(5) { animation-delay: -6s; }
.mm-tbento-tile:nth-of-type(6) { animation-delay: -7.5s; }
.mm-tbento-tile:nth-of-type(7) { animation-delay: -9s; }
.mm-tbento-tile:nth-of-type(8) { animation-delay: -10.5s; }

.mm-tbento-num {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 22px;
	animation: mmTBentoNumColor 12s ease-in-out infinite;
	animation-delay: inherit;
}
.mm-tbento-tile:nth-of-type(1) .mm-tbento-num { animation-delay: 0s; }
.mm-tbento-tile:nth-of-type(2) .mm-tbento-num { animation-delay: -1.5s; }
.mm-tbento-tile:nth-of-type(3) .mm-tbento-num { animation-delay: -3s; }
.mm-tbento-tile:nth-of-type(4) .mm-tbento-num { animation-delay: -4.5s; }
.mm-tbento-tile:nth-of-type(5) .mm-tbento-num { animation-delay: -6s; }
.mm-tbento-tile:nth-of-type(6) .mm-tbento-num { animation-delay: -7.5s; }
.mm-tbento-tile:nth-of-type(7) .mm-tbento-num { animation-delay: -9s; }
.mm-tbento-tile:nth-of-type(8) .mm-tbento-num { animation-delay: -10.5s; }

.mm-tbento-title {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.mm-tbento-tile--hero .mm-tbento-title {
	font-size: 34px;
	line-height: 1.08;
	margin-bottom: 18px;
}

.mm-tbento-body {
	color: rgba(255, 255, 255, 0.78);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
.mm-tbento-tile--hero .mm-tbento-body {
	font-size: 21px;
	font-weight: 300;
	line-height: 1.55;
}

.mm-tbento-foot {
	margin-top: 18px;
	align-self: flex-end;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mm-accent, #00B4FF);
	font-weight: 700;
}

/* Coming-soon tiles: muted. No pointer events on the <a> itself but tile
   stays visually readable so users understand it is in the pipeline. */
.mm-tbento-tile.is-soon {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}
.mm-tbento-tile.is-soon:hover {
	transform: none;
	box-shadow:
		0 20px 40px -20px rgba(0, 0, 0, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mm-tbento-tile.is-soon .mm-tbento-foot {
	color: rgba(255, 255, 255, 0.45);
}

/* 8-hue kaleidoscope. */
@keyframes mmTBentoBorder {
	0%   { border-top-color: rgb(0, 180, 255); }
	14%  { border-top-color: rgb(139, 92, 246); }
	28%  { border-top-color: rgb(236, 72, 153); }
	42%  { border-top-color: rgb(239, 68, 68); }
	57%  { border-top-color: rgb(249, 115, 22); }
	71%  { border-top-color: rgb(234, 179, 8); }
	85%  { border-top-color: rgb(34, 197, 94); }
	100% { border-top-color: rgb(0, 180, 255); }
}

@keyframes mmTBentoNumColor {
	0%   { color: rgb(0, 180, 255); }
	14%  { color: rgb(139, 92, 246); }
	28%  { color: rgb(236, 72, 153); }
	42%  { color: rgb(239, 68, 68); }
	57%  { color: rgb(249, 115, 22); }
	71%  { color: rgb(234, 179, 8); }
	85%  { color: rgb(34, 197, 94); }
	100% { color: rgb(0, 180, 255); }
}

@media (prefers-reduced-motion: reduce) {
	.mm-tbento-tile,
	.mm-tbento-num {
		animation: none;
	}
	.mm-tbento-tile { border-top-color: rgba(0, 180, 255, 0.85); }
	.mm-tbento-num { color: rgb(0, 180, 255); }
}


/* TABLET 768-991 */
@media (min-width: 768px) and (max-width: 991.98px) {
	.mm-tbento {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(160px, auto);
		gap: 16px;
	}
	.mm-tbento-tile { grid-column: span 6; }
	.mm-tbento-tile--hero  { grid-column: span 7; grid-row: span 1; }
	.mm-tbento-tile--r1top { grid-column: span 5; }
	.mm-tbento-tile--r1bot,
	.mm-tbento-tile--r2a,
	.mm-tbento-tile--r2b   { grid-column: span 4; }
	.mm-tbento-tile--r2c,
	.mm-tbento-tile--r3a   { grid-column: span 6; }
	.mm-tbento-tile--r3b   { grid-column: span 5; }
	.mm-tbento-tile--r3c   { grid-column: span 7; }
	.mm-tbento-tile--wide  { grid-column: span 12; }
	.mm-tbento-tile--hero .mm-tbento-title { font-size: 28px; }
}


/* SMALL TABLET 575-767: alternating full / half rows */
@media (min-width: 575px) and (max-width: 767.98px) {
	.mm-tbento {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(140px, auto);
		gap: 16px;
	}
	.mm-tbento-tile--hero,
	.mm-tbento-tile--r2a,
	.mm-tbento-tile--r3a,
	.mm-tbento-tile--wide   { grid-column: span 12; }
	.mm-tbento-tile--r1top,
	.mm-tbento-tile--r1bot,
	.mm-tbento-tile--r2b,
	.mm-tbento-tile--r2c,
	.mm-tbento-tile--r3b,
	.mm-tbento-tile--r3c    { grid-column: span 6; }
	.mm-tbento-tile--hero { grid-row: span 1; }
	.mm-tbento-tile--hero .mm-tbento-title { font-size: 26px; }
}


/* MOBILE <575 */
@media (max-width: 574.98px) {
	.mm-tbento {
		grid-template-columns: 1fr;
		gap: 16px;
		grid-auto-rows: auto;
	}
	.mm-tbento-tile,
	.mm-tbento-tile--hero,
	.mm-tbento-tile--r1top,
	.mm-tbento-tile--r1bot,
	.mm-tbento-tile--r2a,
	.mm-tbento-tile--r2b,
	.mm-tbento-tile--r2c,
	.mm-tbento-tile--r3a,
	.mm-tbento-tile--r3b,
	.mm-tbento-tile--r3c,
	.mm-tbento-tile--wide {
		grid-column: span 1;
		grid-row: span 1;
	}
	.mm-tbento-tile { padding: 26px 22px 22px; }
	.mm-tbento-tile--hero .mm-tbento-title { font-size: 24px; }
	.mm-tbento-tile--hero .mm-tbento-body { font-size: 16px; }
}