/* MOFT Novedades. Page layer on top of home.css (the shared site base). Layout only: every colour, size, space and
   radius is a --moft-* token or a home.css variable. Solid colours only: states swap solid fills and text. */


/* Page head and the chip bar (sections 1 and 2) are shared: see home.css "Inner pages" */

/* ---------- 3 · Featured: reuses the Home .feature card ---------- */
/* ---------- 4 · Board ---------- */
.board-sec{padding-top:var(--moft-space-4)}
/* Phones: one mixed list. The groups and their lists step aside (display:contents) so every card is a direct
   item of the board and --o sets the order. The group headings stay for screen readers only. */
.board{display:flex;flex-direction:column;gap:var(--moft-space-5)}
/* Filtering: the groups step aside and the matches flow in order, one clean grid */
.board.is-filtered .group__head{position:absolute}
.group,.group__list{display:contents}
.board__item{order:var(--o,0);display:flex}
.group__head{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.board [hidden]{display:none !important}
.board__empty{order:99;display:grid;justify-items:start;gap:var(--moft-space-2)}

/* Card: same build as the Home news card (photo, label row, title, button), plus the short text */
.nv{display:flex;flex-direction:column;gap:var(--moft-space-4);width:100%;padding:var(--moft-space-4) var(--moft-space-4) var(--moft-space-5)}
.nv__ph{aspect-ratio:4/3}
.nv__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-3);flex:1}
.nv__body .t-h3{text-wrap:balance}
.nv__txt{max-width:62ch;font-size:var(--moft-size-body);line-height:1.55}
/* Buttons line up at the bottom of cards that share a row */
.nv__cta{margin-top:auto}
.nv__txt{margin-bottom:var(--moft-space-2)}

/* Arriving from Home ("Ver más") lands on the card: a solid Caramelo ring marks it */
.nv:target,.feature:target{outline:3px solid var(--moft-caramelo);outline-offset:4px}

/* Noticia and Agotada tags live in home.css (shared with Catálogo) */

/* Agotada card: still visible, no button. Muted with solid colours only: no fill, a dashed Chocolate-light edge,
   a black-and-white photo, the title in Chocolate instead of Tiramisu. */
.nv--agotada{background:transparent;border:2px dashed var(--moft-chocolate-light)}
.nv--agotada .nv__ph{filter:grayscale(1)}
.nv--agotada .t-h3{color:var(--moft-text-brand-on-light)}
.nv__note{margin-top:auto}

/* ---------- 5 · Anteriores (folded archive) ---------- */
.archive{padding:0}
.archive__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--moft-space-4);padding:var(--moft-space-4) var(--moft-space-5);min-height:64px;cursor:pointer;list-style:none;border-radius:var(--moft-radius-card)}
.archive__sum::-webkit-details-marker{display:none}
.archive__sum:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:3px}
.archive__head{display:grid;gap:2px}
.archive__t{font-family:var(--font-display);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 0}
.archive__toggle{padding:0}
.archive__toggle::before{content:"Mostrar"}
.archive[open] .archive__toggle::before{content:"Ocultar"}
.archive__sum:hover .archive__toggle{color:var(--moft-accent-text-on-light)}
.archive__list{display:grid;gap:var(--moft-space-3);padding:0 var(--moft-space-5) var(--moft-space-5);border-top:2px dotted var(--moft-chocolate-light);padding-top:var(--moft-space-4)}
.archive__row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--moft-space-4);align-items:center}
.archive__ph{width:64px;height:64px;padding:0;filter:grayscale(1)}
.archive__row .t-label{color:var(--moft-text-brand-on-light)}
.archive__name{font-weight:var(--moft-weight-bold);line-height:1.35}

/* ---------- Noticia window ----------
   Light panel with the menu's frame (3px border, hard brand shadow) over the same darkened, blurred screen.
   The photo stays at the top, the text scrolls inside, Cerrar sits at the bottom. */
.note{width:min(92vw,560px);max-height:88dvh;margin:auto;padding:0;border:3px solid var(--moft-cacao);border-radius:var(--moft-radius-card);background:var(--moft-whipped-cream);color:var(--moft-text-on-light);box-shadow:var(--sh-panel) var(--moft-chocolate-deep);font-family:var(--moft-font);overflow:hidden}
.note[open]{display:flex}
.note::backdrop{background:color-mix(in srgb,var(--moft-tiramisu) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.note__inner{display:flex;flex-direction:column;width:100%;max-height:calc(88dvh - 6px);min-height:0}
.note__top{position:relative;flex:none}
.note__ph{aspect-ratio:16/9;max-height:34dvh;width:100%;border-radius:0}
/* Cerrar on the photo: the header-pill build on the light ground */
.note__x{position:absolute;z-index:3;top:var(--moft-space-3);right:var(--moft-space-3);min-height:44px;padding:0 var(--moft-space-4);border:2px solid var(--moft-cacao);border-radius:var(--moft-radius-pill);background:var(--moft-whipped-cream);color:var(--moft-text-on-light);box-shadow:var(--sh-pill) var(--moft-chocolate-deep);font:inherit;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.05em;cursor:pointer}
.note__x:hover{background:var(--moft-salty-caramel)}
.note__x:active{transform:translate(3px,4px);box-shadow:none}
.note__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--moft-space-5);display:grid;align-content:start;gap:var(--moft-space-3)}
.note__scroll:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:-3px}
.note__t{font-family:var(--font-display);font-weight:900;font-variation-settings:"SOFT" 100,"WONK" 0;font-synthesis:none;font-size:var(--moft-size-h2);line-height:1.15;letter-spacing:.02em;text-wrap:balance}
.note__text{display:grid;gap:var(--moft-space-4);font-size:var(--moft-size-body);line-height:1.6;max-width:62ch}
.note__foot{flex:none;padding:var(--moft-space-4) var(--moft-space-5) var(--moft-space-5);border-top:2px dotted var(--moft-chocolate-light)}
.note__foot .moft-btn{width:100%;justify-content:center}

/* ---------- Tablet: the mixed list in two columns; Noticias run across both ---------- */
@media (min-width:768px){
  .board-sec{padding-top:var(--moft-space-5)}
  .board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--moft-space-5)}
  .nv{padding:var(--moft-space-5) var(--moft-space-5) var(--moft-space-6)}
  .board__empty{grid-column:1/-1}
  /* Noticia: horizontal block, photo on the left, the rest and the button on the right */
  .board__item[data-type=noticia]{grid-column:1/-1}
  .nv--noticia{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--moft-space-6);align-items:stretch}
  .nv--noticia .nv__ph{aspect-ratio:auto;min-height:220px}
  .nv--noticia .nv__body{justify-content:center}
  .nv--noticia .nv__cta{margin-top:var(--moft-space-2)}
  .note__foot .moft-btn{width:auto}
}

/* ---------- Desktop: the groups as in the wireframe ---------- */
@media (min-width:1024px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"nuevas nuevas" "ofertas exclusivas" "noticias noticias" "empty empty";column-gap:var(--moft-space-6);row-gap:var(--moft-space-8)}
  .group{display:block;min-width:0}
  .group--nuevas{grid-area:nuevas}.group--ofertas{grid-area:ofertas}.group--exclusivas{grid-area:exclusivas}.group--noticias{grid-area:noticias}
  .board__empty{grid-area:empty}
  /* Visible headings again: the Home section head (title + a short line) */
  .group__head{position:static;width:auto;height:auto;margin:0 0 var(--moft-space-5);padding-inline:var(--moft-space-5);overflow:visible;clip:auto;white-space:normal;align-items:center;justify-content:flex-start}
  .group__list{display:grid;gap:var(--moft-space-4)}
  .group--nuevas .group__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Ofertas and Exclusivas sit side by side, cards stacked; a wider, shorter photo keeps them compact */
  .group--ofertas .nv__ph,.group--exclusivas .nv__ph{aspect-ratio:2/1}
  .board__item{order:0}
  .nv--noticia .nv__ph{min-height:260px}
  .note{width:min(80vw,640px)}
}

/* Filtered (desktop): the matches flow in order in a plain three-column grid, no group headings */
@media (min-width:1024px){
  .board.is-filtered{grid-template-areas:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-5)}
  .board.is-filtered .group,.board.is-filtered .group__list{display:contents}
  .board.is-filtered .group__head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .board.is-filtered .board__item{order:var(--o,0)}
  .board.is-filtered .nv__ph{aspect-ratio:4/3}
  .board.is-filtered .board__empty{grid-area:auto;grid-column:1/-1}
}