/* _shared/home-widgets.css — student home dashboard BENTO layout.
   Cells vary in size on EVERY width; widgets inside one cell are the same size
   (grouped in JS). The cell carousel (arrows/dots/anim) lives in widget-carousel.css. */

/* phone + tablet (<1024): крупные ячейки (hero/tall/wide/foot) во всю ширину, обычные —
   две в ряд одной высоты (04.09, владелец: «два нижних виджета на одной строке»).
   Точки-индикаторы на телефоне лежат поверх нижнего поля карточки (widget-carousel.css),
   поэтому расстояние между рядами = gap сетки, без полосы под карточкой. */
.hw-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; align-items: stretch; }
.hw-cell { position: relative; min-width: 0; display: flex; flex-direction: column; grid-column: span 1; }
.hw-cell[data-span="hero"],
.hw-cell[data-span="tall"],
.hw-cell[data-span="wide"],
.hw-cell[data-span="foot"] { grid-column: 1 / -1; }
.hw-cell > .wcar { flex: 1 1 auto; min-width: 0; width: 100%; }
.hw-cell .widget { margin: 0 !important; height: 100%; box-sizing: border-box; }

/* phone: узкая половинка — компактные стрелки и меньшее боковое поле у слайда */
@media (max-width: 599px) {
  .hw-cell--half .wcar__arrow { width: 22px; font-size: 22px; }
  .hw-cell--half .wcar--always[data-count]:not([data-count="1"]) .wcar__slide > * { padding-inline: 20px !important; }
}

/* desktop — 4-col bento, varied widths, equal-height rows, dense packing */
@media (min-width: 1024px) {
  .hw-board { grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
  .hw-cell { grid-column: span 1; }
  .hw-cell[data-span="hero"] { grid-column: span 4; }
  .hw-cell[data-span="foot"] { grid-column: span 4; }
  .hw-cell[data-span="tall"] { grid-column: span 2; }
  .hw-cell[data-span="wide"] { grid-column: span 2; }
}