/* ==========================================================================
   Bento style: content in neat tiles of different sizes.
   Settings: Theme & brand, Bento.
   ========================================================================== */

:root { --st-gap: 16px; }

.tt-orb { opacity: calc(var(--tt-orb) * 0.45); }
.tt-card::before { display: none; }
.tt-section { padding: clamp(56px, 8vw, 104px) 0; }
.tt-section--alt { background: none; }

/* Tiles */
:is(.tt-card, .tt-feature, .tt-step, .tt-info-card, .tt-checklist li, .tt-build__steps li, .tt-panel, .tt-cta, .tt-build, .tt-stats--panel, .tt-stat) {
    background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px color-mix(in srgb, var(--tt-text) 6%, transparent);
}
.st-tiles-outlined :is(.tt-card, .tt-feature, .tt-step, .tt-info-card, .tt-checklist li, .tt-build__steps li, .tt-panel, .tt-cta, .tt-build, .tt-stat) {
    background: transparent; border: 1.5px solid color-mix(in srgb, var(--tt-text) 16%, transparent); box-shadow: none;
}
.tt-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--tt-accent-1) 14%, var(--tt-surface)), var(--tt-surface)); }

/* The bento grid: a repeating pattern of big, wide and small tiles */
.tt-grid--cards, .tt-grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--st-gap); grid-auto-flow: dense; }
.tt-grid--2 { gap: var(--st-gap); }
:is(.tt-grid--cards, .tt-grid--3) > * { grid-column: span 2; }
:is(.tt-grid--cards, .tt-grid--3) > :nth-child(6n+3), :is(.tt-grid--cards, .tt-grid--3) > :nth-child(6n+4) { grid-column: span 1; }
.st-big-first :is(.tt-grid--cards, .tt-grid--3) > :nth-child(6n+1) { grid-row: span 2; }
/* Fill the gaps when the count does not complete the pattern */
.st-big-first :is(.tt-grid--cards, .tt-grid--3) > :nth-child(2):last-child { grid-row: span 2; }
:is(.tt-grid--cards, .tt-grid--3) > :nth-child(6n+3):last-child { grid-column: span 2; }
:is(.tt-grid--cards, .tt-grid--3) > :nth-child(6n+5):last-child, :is(.tt-grid--cards, .tt-grid--3) > :only-child { grid-column: span 4; }
.tt-grid--compact > * { grid-row: auto !important; }

/* Big tiles get bigger type */
.st-big-first :is(.tt-grid--cards, .tt-grid--3) > :nth-child(6n+1) { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.st-big-first .tt-grid--cards > :nth-child(6n+1) .tt-card__name { font-size: clamp(34px, 3.6vw, 52px); }
.st-big-first .tt-grid--cards > :nth-child(6n+1) .tt-card__icon { width: 84px; height: 84px; border-radius: 24px; }
.st-big-first .tt-grid--cards > :nth-child(6n+1) .tt-card__top { margin-bottom: auto; }
.st-big-first .tt-grid--3 > :nth-child(6n+1) .tt-h3 { font-size: clamp(26px, 2.6vw, 34px); }
.tt-card { min-height: 220px; }

/* Numbers as tiles */
.tt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--st-gap); width: min(100%, 720px); }
.tt-stat { padding: 22px; }
.tt-stats--panel { background: none; border: 0; padding: 0; box-shadow: none; }

/* Lists and steps as tiles */
.tt-steps, .tt-checklist, .tt-build__steps, .tt-contact__side { gap: var(--st-gap); }
.tt-build { gap: var(--st-gap); }
.tt-build__steps li { background: var(--tt-bg); }

/* Icons */
.tt-feature__icon { border-radius: 14px; background: color-mix(in srgb, var(--tt-accent-1) 14%, transparent); border: 0; }
.tt-step__num { border-radius: 12px; }
.tt-header.is-scrolled { border-bottom-color: transparent; }

@media (max-width: 960px) {
    .tt-grid--cards, .tt-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.tt-grid--cards, .tt-grid--3) > * { grid-column: span 1 !important; grid-row: auto !important; }
    :is(.tt-grid--cards, .tt-grid--3) > :first-child, :is(.tt-grid--cards, .tt-grid--3) > :last-child:nth-child(even) { grid-column: span 2 !important; }
}
@media (max-width: 640px) {
    .tt-grid--cards, .tt-grid--3 { grid-template-columns: minmax(0, 1fr); }
    :is(.tt-grid--cards, .tt-grid--3) > *,
    :is(.tt-grid--cards, .tt-grid--3) > :first-child,
    :is(.tt-grid--cards, .tt-grid--3) > :last-child:nth-child(even) {
        grid-column: 1 / -1 !important;
        min-width: 0;
    }
}