/* ==========================================================================
   COMPONENT — .c-shop  +  .c-cover  +  .c-cart
   The Malta Guide Book vol.1. The cover is TYPESET, not photographed —
   built from the same three hues and two typefaces as the rest of the site,
   so it needs no asset and never looks like stock art.

   There is no cart. One product, one button, straight to the existing
   checkout: a basket step for a single digital download is friction, not
   commerce.
   WP Phase 2 target: template-parts/sections/shop-feature.php
   ========================================================================== */

.c-shop {
  padding-block: var(--section-pad);
  background: var(--c-bg-alt);
  color: var(--c-ink);
}

.c-shop__shell { align-items: center; row-gap: var(--sp-8); }

/* --------------------------------------------------------------------------
   The typeset cover — columns 1 to 5, tilted, lifted on hover.
   -------------------------------------------------------------------------- */

.c-cover {
  /* Narrower and vertically centred, so the book stands about as tall as the
     copy beside it instead of towering over the whole section. */
  grid-column: content-start / span 3;
  align-self: center;
  perspective: 1400px;
}

.c-cover__plate {
  position: relative;
  aspect-ratio: 5 / 5.6;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  /* The plate must always be LIGHTER than the section behind it. In dark
     mode the section is already slate, so a slate-on-slate cover vanished;
     these steps are picked relative to --c-bg-alt rather than absolutely. */
  background:
    linear-gradient(155deg,
      color-mix(in oklab, var(--slate-700) 82%, var(--luzzu-gold-700)) 0%,
      var(--slate-900) 58%,
      var(--slate-950) 100%);
  color: var(--stone-50);
  border: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 18%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--stone-50) 26%, transparent) inset,
    -18px 12px 40px -22px rgba(0, 0, 0, 0.75);
  transform: rotateY(-9deg) rotateX(2deg) translateZ(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.c-cover:hover .c-cover__plate { transform: rotateY(-3deg) rotateX(1deg) translateY(-0.5rem); }

/* Spine */
.c-cover__plate::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: clamp(0.75rem, 2vw, 1.5rem);
  background: linear-gradient(to right,
    color-mix(in oklab, var(--slate-950) 92%, transparent) 0%,
    color-mix(in oklab, var(--stone-50) 8%, transparent) 100%);
}

.c-cover__mark {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono-wide);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.c-cover__title {
  align-self: center;
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 1.1rem + 3.9vw, 3.75rem);
  line-height: 0.92;
  letter-spacing: var(--tr-display);
}

.c-cover__title em {
  display: block;
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

.c-cover__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: var(--bw-hair) solid color-mix(in oklab, var(--stone-50) 26%, transparent);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--stone-300);
}

/* --------------------------------------------------------------------------
   Product detail — columns 7 to 12.
   -------------------------------------------------------------------------- */

.c-shop__detail { grid-column: col 5 / content-end; }

.c-shop__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.c-shop__eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3rem);
  block-size: var(--bw-hair);
  background: currentColor;
}

.c-shop__title {
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: var(--fw-light);
  font-size: var(--fs-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.c-shop__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--c-accent-text);
}

.c-shop__copy {
  margin-block: var(--sp-5);
  max-inline-size: none;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* Contents manifest — a mono ledger, two columns. */
.c-shop__contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-6);
  margin-block: var(--sp-6);
  padding-block: var(--sp-5);
  border-block: var(--bw-hair) solid var(--c-line);
}

.c-shop__contents li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  line-height: 1.7;
}

.c-shop__contents b { color: var(--c-accent-text); font-weight: var(--fw-medium); }

/* --- Price row ----------------------------------------------------------- */

.c-shop__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-7);
}

.c-shop__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.c-shop__price b {
  font-family: var(--ff-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: var(--tr-display);
}

.c-shop__price small {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}


@media (max-width: 68rem) {
  .c-cover      { grid-column: content-start / span 5; }
  .c-shop__detail { grid-column: content-start / content-end; }
}

@media (max-width: 48rem) {
  .c-cover { grid-column: content-start / span 8; }
  .c-shop__contents { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   The buy button before there is anything to buy from.
   Held, not hidden: the price and the product still need to read as real, so
   the button keeps its shape and loses only its affordance.
   -------------------------------------------------------------------------- */

.c-shop__buy-btn[disabled] {
  background: color-mix(in oklab, var(--c-accent) 38%, transparent);
  color: var(--c-accent-on);
  cursor: not-allowed;
}

.c-shop__soon {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   MOBILE: the guide book
   Cover and copy both centre, so the section reads as one column rather than
   as a desktop layout that has been squeezed.
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .c-shop__shell { justify-items: center; }
  .c-cover { inline-size: min(100%, 20rem); margin-inline: auto; }
  .c-shop__detail { text-align: center; }
  .c-shop__eyebrow { justify-content: center; }
  .c-shop__buy { justify-content: center; }
}