/* =========================================================
   Foodlab N.V. — Aladey
   PASTA RANGE SECTION  —  layout B: lead plate + pair

   Kept OUT of styles.css on purpose: index.html is live and approved, and
   this is still in review. Nothing here overrides an existing rule, so it
   can be pasted onto the end of styles.css unchanged once signed off.

   Layout A (three equal alternating rows) is archived in
   _alt/pasta-v1-alternating-rows.* if you want it back.

   WHY THIS SHAPE
   Three equal rows read as a list, and the page already shows a list of
   products in the slider just below. Here one plate leads at full width
   with its copy set INTO the photo, and the other two sit beneath as a
   pair. That gives the range a front page rather than an inventory, and
   stops the section repeating the slider's job.

   Every colour, font and radius comes from the tokens in styles.css.
   ========================================================= */

.pastarange { background: var(--paper); }

.pastarange__head { max-width: 62ch; }
.pastarange__intro {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 54ch;
  margin-top: 4px;
}
.pastarange__intro strong { color: var(--brand-700); font-weight: 700; }


/* ---------- the lead plate ---------- */
.pfeat {
  position: relative;
  margin-top: clamp(34px, 4.5vw, 56px);
  /* room for the panel that hangs below the photo edge */
  margin-bottom: clamp(30px, 3vw, 44px);
}
.pfeat__art {
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}
.pfeat__art picture { display: contents; }
.pfeat__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* A 3:2 source in a 16:9 box crops TOP AND BOTTOM, never the sides, so a
     horizontal value here would do nothing. 54% keeps the pack in frame at
     the bottom while trimming the empty wood above. */
  object-position: 50% 54%;
}

/* The panel is set INTO the photo rather than beside it -- that overlap is
   what makes this read as a feature and not another row.
   ANCHORED LEFT, and that is not arbitrary: in all three shots the Aladey
   pack sits on the RIGHT, and sampling the photo showed the bottom-right
   region at mean luminance 83 against 119-142 elsewhere -- i.e. the panel
   was covering the pack. Bottom-left measured the flattest area of the
   frame, so the copy sits on towel and wood instead of on the product. */
.pfeat__panel {
  position: absolute;
  left: clamp(18px, 3vw, 44px);
  bottom: clamp(-30px, -2.4vw, -20px);
  width: min(360px, 44%);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 2.2vw, 28px);
}


/* ---------- the pair underneath ---------- */
.ppair {
  list-style: none;
  padding: 0;
  margin: clamp(56px, 6vw, 88px) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 38px);
}
.ppair__art {
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.ppair__art picture { display: contents; }
.ppair__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.ppair li:hover .ppair__art img { transform: scale(1.04); }
.ppair__body { padding-top: 18px; }


/* ---------- shared type ---------- */
.prow__size {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.prow__name {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-700);
  margin-top: 5px;
}
.pfeat__panel .prow__name { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.prow__desc {
  color: var(--ink-soft);
  font-size: .99rem;
  line-height: 1.55;
  max-width: 34ch;
  margin-top: 10px;
}



@media (max-width: 860px) {
  /* The overlap stops working once the photo is narrow -- the panel would
     cover most of the plate. Below this width it simply sits underneath. */
  .pfeat { margin-bottom: 0; }
  .pfeat__art { aspect-ratio: 4 / 3; }
  .pfeat__art img { object-position: 50% 50%; }
  .pfeat__panel {
    position: static;
    width: auto;
    margin-top: 16px;
  }
  .ppair { grid-template-columns: 1fr; gap: 34px; }
  .prow__desc { max-width: 46ch; }
}