/**
 * Публічна сторінка меню — картки без цін.
 *
 * ──────────────────────────────────────────────────────────
 * ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ ЧАСТИНА meals.css
 *
 * meals.css вантажиться класним керівником щодня — туди
 * додавати стилі сторінки, яку відкривають батьки чи TV-дошка,
 * означало б возити зайве всім. Тут лише те, що потрібно для
 * карток і вкладок; кольори й радіус беруться з токенів .ssm,
 * які meals.css уже визначає.
 */

.ssm-public{
    max-width:1180px !important;
    margin:0 auto !important;
}

.ssmp-tabs{
    display:flex;
    gap:6px;
    margin:0 0 20px;
    padding:4px;
    background:var(--ssm-soft,#F5F8FB);
    border-radius:12px;
    max-width:320px;
}

.ssmp-tab{
    flex:1;
    padding:9px 4px !important;
    border-radius:9px !important;
    background:transparent !important;
    color:var(--ssm-muted,#6B7A88) !important;
    font:600 13.5px/1.2 inherit !important;
    text-align:center;
    text-decoration:none !important;
}

.ssmp-tab.is-active{
    background:#fff !important;
    color:var(--ssm-ink,#0A2647) !important;
    box-shadow:0 1px 3px rgba(6,32,47,.14);
}

.ssmp-head{margin-bottom:16px}

.ssmp-date{
    font-size:20px;
    font-weight:800;
    color:var(--ssm-ink,#0A2647);
}

.ssmp-empty{
    padding:32px 0;
    text-align:center;
    color:var(--ssm-muted,#6B7A88);
    font-size:14px;
}

.ssmp-empty--sm{padding:14px 0;font-size:13px}

/* ── картки ─────────────────────────────────────────────── */

.ssmp-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:14px;
    margin-bottom:8px;
}

.ssmp-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:12px 8px 14px;
    background:#fff;
    border:1px solid var(--ssm-border,#E1E6EC);
    border-radius:var(--ssm-r,14px);
    box-shadow:var(--ssm-shadow,0 1px 3px rgba(6,32,47,.06));
    text-align:center;
}

.ssmp-card-img{
    width:100%;
    aspect-ratio:1;
    max-width:96px;
    border-radius:12px;
    background:var(--ssm-soft,#F5F8FB) center/cover no-repeat;
}

.ssmp-card-img--none{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ssm-accent,#1B4B8F);
    background:var(--ssm-soft,#F5F8FB);
    font:700 22px/1 inherit;
}

.ssmp-card-name{
    font-size:13px;
    font-weight:600;
    color:var(--ssm-text,#2F3A45);
    line-height:1.3;
}

/* ── вигляд «по тижнях» ─────────────────────────────────── */

.ssmp-weektabs{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin:0 0 22px;
}

.ssmp-weektab{
    padding:8px 16px !important;
    border:1px solid var(--ssm-border,#E1E6EC) !important;
    border-radius:9px !important;
    background:#fff !important;
    color:var(--ssm-muted,#6B7A88) !important;
    font:600 13px/1 inherit !important;
    text-decoration:none !important;
}

.ssmp-weektab.is-active{
    background:var(--ssm-accent,#1B4B8F) !important;
    border-color:var(--ssm-accent,#1B4B8F) !important;
    color:#fff !important;
}

.ssmp-day{margin-bottom:26px}

.ssmp-day-h{
    position:relative;
    margin:0 0 12px;
    padding-bottom:8px;
    font-size:15px;
    font-weight:800;
    color:var(--ssm-ink,#0A2647);
}

.ssmp-day-h::after{
    content:'';
    position:absolute;left:0;bottom:0;
    width:28px;height:3px;
    background:var(--ssm-gold,#F2B705);
    border-radius:2px;
}

/**
 * TV-дошка: великий екран без наведення мишею.
 *
 * Той самий шорткод може опинитись на слайді коридорної
 * дошки, де читають на відстані кількох метрів, — тому на
 * широких екранах картки й текст крупніші, а не просто
 * ширші.
 */
@media (min-width:1400px){
    .ssmp-card-name{font-size:15px}
    .ssmp-date{font-size:26px}
    .ssmp-day-h{font-size:18px}
}

@media (max-width:480px){
    .ssmp-cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}