/* ============================================================
   Musef - the product line-up on the home page.

   Printed after the Languages section by inc/msf-products.php. Reads the
   palette the Elementor kit declares on :root, with the header tokens as
   a fallback, so it matches the sections either side of it.
   ============================================================ */

.msf-lineup{
  background:var(--paper, #FFFFFF);
  border-top:1px solid var(--line, var(--msf-line, #ECE3D1));
  padding:clamp(48px, 6vw, 80px) 20px;
}

.msf-lineup__inner{ width:100%; max-width:var(--wrap, 1180px); margin:0 auto; }

.msf-lineup__eyebrow{
  margin:0 0 10px;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-deep, var(--msf-accent, #D8511C));
}

.msf-lineup__title{
  margin:0 0 12px;
  font-family:var(--font-serif, var(--msf-font, sans-serif));
  font-size:clamp(1.6rem, 3.4vw, 2.5rem); font-weight:700; line-height:1.25;
  color:var(--ink, var(--msf-ink, #211A14));
}

.msf-lineup__lede{
  margin:0 0 34px; max-width:46em;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:1rem; line-height:1.7;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
}

/* Five cards sit in a row on a wide screen and fold down in step. */
.msf-lineup__grid{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:700px){ .msf-lineup__grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1060px){ .msf-lineup__grid{ grid-template-columns:repeat(5, 1fr); } }

.msf-lineup__card{
  /* the link's ::after is positioned against this, which is what makes the
     whole card clickable from one link rather than three nested ones */
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper, #FFFFFF);
  border:1px solid var(--line, var(--msf-line, #ECE3D1));
  border-radius:var(--radius, 16px);
  padding:16px 16px 18px;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.msf-lineup__card:hover{
  border-color:var(--orange, var(--msf-accent, #F2662B));
  box-shadow:0 10px 26px rgba(33, 26, 20, .08);
  transform:translateY(-2px);
}

/* A fixed stage, so the names line up across cards whatever shape the
   photo is. */
.msf-lineup__shot{
  display:flex; align-items:center; justify-content:center;
  height:150px; margin:0 0 14px;
  border-radius:10px; overflow:hidden;
  background:var(--cream, #FBF6EC);
}
.msf-lineup__img{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:100%; object-fit:contain;
}

.msf-lineup__name{
  margin:0 0 8px;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.95rem; font-weight:800; line-height:1.35;
  color:var(--ink, var(--msf-ink, #211A14));
}

.msf-lineup__link{ color:inherit; text-decoration:none; }
.msf-lineup__link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.msf-lineup__card:hover .msf-lineup__link{ color:var(--orange-deep, var(--msf-accent, #D8511C)); }

/* The focus ring belongs on the card, not on the text, because the card is
   what the link covers. */
.msf-lineup__link:focus-visible{ outline:none; }
.msf-lineup__card:has(.msf-lineup__link:focus-visible){
  outline:2px solid var(--orange-deep, var(--msf-accent, #D8511C));
  outline-offset:3px;
}

.msf-lineup__price{
  margin:auto 0 0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:1rem; font-weight:700;
  color:var(--ink, var(--msf-ink, #211A14));
}
/* WooCommerce prints the old price in <del> and the current one in <ins>. */
.msf-lineup__price del{
  display:block;
  font-size:.8rem; font-weight:400; text-decoration:line-through;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
}
.msf-lineup__price ins{
  background:none; text-decoration:none;
  color:var(--ink, var(--msf-ink, #211A14));
}

.msf-lineup__all{
  margin:0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.92rem; font-weight:600;
}
.msf-lineup__all a{
  color:var(--orange-deep, var(--msf-accent, #D8511C));
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px;
}
.msf-lineup__all a:hover{ color:var(--ink, var(--msf-ink, #211A14)); }

@media (max-width:600px){
  .msf-lineup__shot{ height:120px; }
  .msf-lineup__name{ font-size:.88rem; }
}

@media (prefers-reduced-motion:reduce){
  .msf-lineup__card{ transition:none; }
  .msf-lineup__card:hover{ transform:none; }
}