/* Bento: the default theme. Its tokens are site.css's defaults; this file adds the layout that
   makes it Bento: the leading section ("Picked for you") becomes a grid of mixed sizes, with the
   top pick in a big gold box and others in ink, white and band colors. */

/* Buttons: squarer corners than the shared default. */
:root[data-theme="bento"] { --button-radius: 8px; }

:root[data-theme="bento"] .app-grid-feature {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}

/* The pattern repeats every six cards: big gold, ink, tall white, wide red, purple, wide white. */
:root[data-theme="bento"] .app-grid-feature > .app-card { overflow: hidden; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; background: var(--hue-0); --card-text: var(--text); }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 2) { background: var(--ink); --card-text: var(--on-ink); }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 3) { grid-row: span 2; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 4) { grid-column: span 2; background: var(--hue-2); --card-text: var(--on-hue); }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 5) { background: var(--hue-4); --card-text: var(--on-hue); }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n) { grid-column: span 2; }

/* Text on colored boxes follows the box. */
:root[data-theme="bento"] .app-grid-feature > :is(:nth-child(6n + 2), :nth-child(6n + 4), :nth-child(6n + 5)) :is(.app-card-tagline, .app-card-meta) { color: color-mix(in srgb, var(--card-text) 75%, transparent); }
:root[data-theme="bento"] .app-grid-feature > :is(:nth-child(6n + 2), :nth-child(6n + 4), :nth-child(6n + 5)) .avatar { background: var(--on-ink); color: var(--ink); }
:root[data-theme="bento"] .app-grid-feature > :is(:nth-child(6n + 2), :nth-child(6n + 4), :nth-child(6n + 5)) .tile { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-tagline { color: color-mix(in srgb, var(--text) 75%, transparent); }

/* The big box: a large tile and a headline-sized name at the bottom. */
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-link { padding: 30px 30px 12px; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .tile { width: 120px; height: 120px; font-size: 62px; border-radius: 34px; background: rgba(255, 255, 255, 0.35); box-shadow: none; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-text { margin-top: auto; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-name { font-size: 50px; line-height: 1; white-space: normal; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-tagline { font-size: 18px; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-meta { padding: 0 30px 24px; }
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .avatar { background: var(--ink); color: var(--on-ink); }

/* The tall box: the tile becomes a big picture. */
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 3) .tile { width: 100%; height: 170px; font-size: 76px; border-radius: 20px; }

/* Small boxes keep only the name; their tagline would be cut off. */
:root[data-theme="bento"] .app-grid-feature > :is(:nth-child(6n + 2), :nth-child(6n + 5)) .app-card-tagline { display: none; }

/* The wide white box: tile beside the name. */
:root[data-theme="bento"] .app-grid-feature > :nth-child(6n) .app-card-link { flex-direction: row; align-items: center; }

@media (max-width: 900px) {
  :root[data-theme="bento"] .app-grid-feature { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  :root[data-theme="bento"] .app-grid-feature { grid-template-columns: 1fr; grid-auto-rows: auto; }
  :root[data-theme="bento"] .app-grid-feature > .app-card { grid-column: auto; grid-row: auto; }
  :root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 1) .app-card-name { font-size: 36px; }
  :root[data-theme="bento"] .app-grid-feature > :nth-child(6n + 3) .tile { height: 120px; }
}