/* =====================================================================
   FrolliAMOci — «Novità della pasticceria» (v1.35)
   Lomazzi Federico (c) 2026
   ===================================================================== */
.nws { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; margin: 0 auto; }
.nws-head { display: grid; gap: var(--space-1); }
.nws-head .back-link { margin-bottom: var(--space-2); }
.nws-head__kicker { font-size: var(--fs-xs); font-weight: var(--fw-heavy); letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-strong); }
.nws-head__title { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem); font-weight: var(--fw-heavy); line-height: .95; letter-spacing: -.02em; }
.nws-head__sub { color: var(--color-text-muted); font-weight: var(--fw-bold); max-width: 44ch; }

.nws-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.nws-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-card);
    animation: nws-in .45s var(--ease-out) both; }
.nws-card:nth-child(2) { animation-delay: 60ms; } .nws-card:nth-child(3) { animation-delay: 120ms; }
.nws-card.is-new { box-shadow: var(--shadow-raised), inset 0 0 0 2px var(--color-caramel); }
.nws-card__media { display: block; aspect-ratio: 16 / 9; background: var(--tint-caramel); }
.nws-card__img { width: 100%; height: 100%; object-fit: cover; }
.nws-card__body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.nws-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.nws-card__new { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-accent); color: #fff; font-weight: var(--fw-heavy); letter-spacing: .04em; text-transform: uppercase; }
.nws-card__title { font-size: var(--fs-xl); font-weight: var(--fw-heavy); line-height: 1.15; }
.nws-card__text { color: var(--color-text); font-size: var(--fs-md); }
.nws-card__cta { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-cta); margin-top: var(--space-1);
    padding: 0 var(--space-5); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-contrast);
    font-weight: var(--fw-heavy); text-decoration: none; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.nws-card__cta small { font-weight: var(--fw-bold); opacity: .8; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nws-card__cta:hover { background: var(--color-primary-hover); }
.nws-card__cta:active { transform: scale(.97); }
.nws-card__cta:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.nws-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; border-radius: var(--radius-xl);
    background: var(--color-surface); box-shadow: var(--shadow-card); }
.nws-empty__icon, .nws-join__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--tint-rose); color: var(--color-accent-strong); font-size: 1.5rem; }
.nws-empty h2 { font-size: var(--fs-xl); font-weight: var(--fw-heavy); }
.nws-empty p { color: var(--color-text-muted); }
.nws-join { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface-alt); }
.nws-join p { color: var(--color-text); }
@media (min-width: 640px) { .nws-join { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.nws-mine a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-heavy); color: var(--color-text); }

@keyframes nws-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nws-card { animation: none; } .nws-card__cta { transition: none; } }