/* «Тематические подборки» (02.11.2026). Loaded only by the home block (_collections.ascx) and /collection/.
   Tiles, cards, colours and fonts come from design.css (.cats--tiles, .block2 > .content_block). */

/* home block: title on the left, «Все подборки →» on the right, as #new_content */
#collections_content { flex-flow: row wrap; align-items: baseline; column-gap: 12px; }
#collections_content > .title { flex: 1 1 auto; }
#collections_content > .cats--tiles { flex: 1 1 100%; align-self: stretch; }

/* home mosaic: with 5 (or 3) tiles the first is big on the left, the rest 2×2 (or one under the other) */
.cats--mosaic { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); }
.cats--mosaic:has(> a.cat:first-child:nth-last-child(3)) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.cats--mosaic > a.cat:first-child:nth-last-child(5),
.cats--mosaic > a.cat:first-child:nth-last-child(3) { grid-row: span 2; aspect-ratio: auto; }
.cats--mosaic > a.cat { min-height: 0; aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
  .cats--mosaic,
  .cats--mosaic:has(> a.cat:first-child:nth-last-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats--mosaic > a.cat:first-child:nth-last-child(5),
  .cats--mosaic > a.cat:first-child:nth-last-child(3) { grid-row: auto; grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* visible keyboard focus on the cards and the home tiles (the shadow alone is too faint) */
#collection_recipes a:focus-visible,
.cats--tiles > a.cat:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* collection page on phones: recipe cards in 2 columns instead of 1 */
@media (max-width: 560px) {
  @supports (display: grid) and (display: contents) {
    #collection_recipes > .content_block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; --card-photo-h: 130px; }
    #collection_recipes > .content_block a > article { gap: 4px; padding: 10px 10px 12px; }
    #collection_recipes > .content_block a > article .cat_name { font-size: 0.8rem; }
    #collection_recipes > .content_block a > article .zagpodf { padding: 0; font-size: 0.95rem; }
    #collection_recipes .stats-badge { right: auto; left: 6px; bottom: 6px; flex-wrap: nowrap; gap: 6px; padding: 3px 6px; font-size: 10px; }
    #collection_recipes .stats-badge .likes { white-space: nowrap; }
    #collection_recipes .stats-badge .rating-card__count { display: none; }
    #collection_recipes .author-photo { width: 28px; height: 28px; }
    #collection_recipes .avtor { font-size: 0.8rem; }
  }
}