/* ==========================================================================
   Acquire page — page-specific styles.
   Normal flowing content page (no scroll-snap), same architecture as
   marks.css/paradigm.css. Shared button/nav/footer/cookie styles live in
   components.css; global .pg-col/.pg-title/.pg-headline/.pg-body type-scale
   primitives in base.css.
   ========================================================================== */

.acq-sec {
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(56px, 8dvh) 20px;
}

.acq-sec--accent {
  background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat;
}

.acq-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.08em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.acq-back:hover { color: var(--colour-accent); }

.acq-eyebrow {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  letter-spacing: 0.12em;
  color: var(--colour-accent);
  text-transform: uppercase;
  margin-top: min(30px, 3.6dvh);
}

.acq-note {
  margin: min(6px, 0.8dvh) 0 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: min(0.85rem, 3.8cqw, 2.2dvh);
  color: var(--colour-ink-50);
}

/* Bento grid — mobile 3-col. Tile shape (square/horizontal/vertical) is
   admin-controlled per listing via acquire_items.bento_size (see
   acquire/index.php), packed with grid-auto-flow: dense — same pattern as
   the Marks page gallery (.mk-grid in marks.css). */
.acq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((100cqw - 20px) / 3);
  grid-auto-flow: dense;
  gap: 10px;
  width: 100%;
  margin-top: min(16px, 1.8dvh);
}

.acq-tile {
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colour-card);
  box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05);
}

/* The logo, the name (now up top where "For Sale" used to sit) and the
   price (now in the footer, left-aligned) used to be stacked flex-column
   siblings inside a padded tile — a long name+price footer competed for
   the tile's fixed grid-cell height and squeezed the logo image smaller to
   fit. Now the logo is centred in the tile at a fixed 65% base size
   (matching the Marks page gallery's .mk-tile img convention — logo_scale
   is a multiplier on top of that same 65% base, see migration 016/024's
   comment) and the name/price sit on top of it (position:absolute, higher
   z-index) instead of pushing it around, so the logo's size no longer
   depends on how long the name/price text is. */
.acq-tile-name--top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
}

.acq-tile-ph {
  width: 65%;
  height: 65%;
  margin: auto;
  object-position: center;
  border-radius: 10px;
  border: 1px dashed var(--colour-ink-12);
}

.acq-tile-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 10px;
  /* Scrim behind the price so it stays legible sitting in front of the
     logo image, rather than the image dictating the text's space. */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 100%);
}

.acq-tile-name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(min(0.72rem, 3.2cqw, 1.8dvh) - 1pt);
  color: var(--colour-ink);
}

.acq-tile-price {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.68rem, 3cqw, 1.7dvh);
  color: var(--colour-accent);
}

.acq-cta-body {
  margin: min(16px, 1.8dvh) 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.4cqw, 2.6dvh);
  line-height: 1.4;
  color: var(--colour-bg);
}

.acq-btn-bg { background: var(--colour-bg); margin-top: min(28px, 3.4dvh); }

/* ---------- Detail lightbox overlay ---------- */
.acq-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(246, 243, 238, 0.47);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 20px;
  box-sizing: border-box;
}

.acq-overlay.is-open { display: flex; }

.acq-lightbox {
  width: 100%;
  max-width: 900px;
  max-height: 90dvh;
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.acq-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.acq-lightbox-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.8rem, 3.6cqw, 2.1dvh);
  letter-spacing: 0.1em;
  color: var(--colour-ink);
  text-transform: uppercase;
}

.acq-actions { display: flex; align-items: center; gap: 14px; }
.acq-actions button { display: flex; align-items: center; justify-content: center; }

.acq-lightbox-body { overflow-y: auto; padding: 0 20px 20px; }

.acq-detail { display: flex; flex-direction: column; gap: 18px; }

.acq-media {
  /* Full screen (content column) width on mobile — height auto-derives
     from that width using the exact same portrait ratio the desktop
     version uses (340x578), so the image keeps the same proportions on
     both breakpoints instead of the old small, narrow, centred block. */
  width: 100%;
  height: auto;
  aspect-ratio: 340 / 578;
  align-self: center;
  border-radius: 14px;
  background: var(--colour-accent-35);
}

.acq-info-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.7rem, 3.2cqw, 1.9dvh);
  letter-spacing: 0.1em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.acq-info-name {
  margin: 6px 0 0 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(1.6rem, 6.8cqw, 3.4dvh);
  color: var(--colour-ink);
  text-transform: uppercase;
}

.acq-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.acq-keyword {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.68rem, 3cqw, 1.7dvh);
  letter-spacing: 0.04em;
  color: var(--colour-ink);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--colour-ink-12);
}

.acq-info-desc {
  margin: 12px 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.2cqw, 2.5dvh);
  line-height: 1.4;
  color: var(--colour-ink);
}

.acq-info-price {
  margin: 14px 0 0 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(1.3rem, 5.6cqw, 2.8dvh);
  color: var(--colour-accent);
}

@media (max-width: 759px) {
  /* Price reads slightly small among the mobile detail copy — bump it up
     half a point and bold it so it stands out as the key figure. */
  .acq-info-price { font-weight: 700; font-size: calc(min(1.3rem, 5.6cqw, 2.8dvh) + 0.5pt); }
}

.acq-kit-label {
  display: block;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: min(0.7rem, 3.2cqw, 1.9dvh);
  letter-spacing: 0.1em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.acq-kit-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.acq-kit-list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.88rem, 4cqw, 2.3dvh);
  line-height: 1.35;
  color: var(--colour-ink);
}

.acq-kit-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--colour-accent);
}

.acq-form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acq-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--colour-card);
  border: 1px solid var(--colour-ink-12);
}

.acq-purchase-btn { margin-top: 14px; }

.acq-form-note {
  margin: 10px 0 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: min(0.78rem, 3.4cqw, 1.9dvh);
  color: var(--colour-ink-50);
}

/* ---------- Success state (submitted enquiry) ----------
   .acq-success fills the whole lightbox in place of .acq-detail once the
   enquiry form has been submitted; prev/next navigation is hidden so the
   only way out is the existing header close button. Reset back to the
   normal listing view whenever a different (or the same) listing is
   (re-)opened — see acquire.js renderListing(). */
.acq-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: min(16px, 1.8dvh);
  padding: min(24px, 3dvh) 0 min(12px, 1.5dvh);
}

.acq-overlay.acq-submitted .acq-detail { display: none; }
.acq-overlay.acq-submitted .acq-success { display: flex; }
.acq-overlay.acq-submitted .acq-prev-btn,
.acq-overlay.acq-submitted .acq-next-btn { display: none; }

.acq-success-received {
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-text-stroke: 0.048em currentColor;
  font-size: min(2.4rem, 8.8cqw, 4dvh);
  line-height: 1.15;
  letter-spacing: calc(0.029em + 0.2pt);
  color: var(--colour-ink);
  text-transform: uppercase;
}

.acq-success-copy {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: min(0.95rem, 4.4cqw, 2.5dvh);
  line-height: 1.35;
  color: #5C646B;
}

.acq-success-cta {
  margin-top: min(10px, 1.2dvh);
  padding-top: min(20px, 2.2dvh);
  border-top: 1px solid rgba(58, 63, 67, 0.12);
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(10px, 1.1dvh);
}

.acq-success-cta-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: min(0.7rem, 3cqw, 1.8dvh);
  letter-spacing: 0.14em;
  color: var(--colour-accent);
  text-transform: uppercase;
}

.acq-success-cta-copy {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: min(0.88rem, 4cqw, 2.3dvh);
  line-height: 1.35;
  color: #5C646B;
}

.acq-success-cta-btn {
  width: auto;
  padding-left: 26px;
  padding-right: 26px;
  margin-top: min(4px, 0.5dvh);
}

@media (min-width: 760px) {
  .acq-sec { background-size: 100% 100%; padding-top: min(40px, 5dvh); padding-bottom: min(40px, 5dvh); }
  .acq-sec .pg-col { max-width: min(1200px, calc(100vw - 48px)); }
  .acq-sec .pg-title { font-size: min(16pt, 3dvh); }
  .acq-sec .pg-headline { font-size: min(40px, 5dvh); max-width: 820px; }
  .acq-sec .pg-cta-head { font-size: min(40px, 5dvh); max-width: 820px; }
  .acq-sec .pg-body { font-size: min(12pt, 2.4dvh); line-height: 1.3; max-width: 820px; }
  .acq-cta-body { font-size: min(12pt, 2.4dvh); line-height: 1.3; max-width: 820px; }
  .acq-btn-bg { font-size: min(12pt, 2.4dvh); width: 400px; align-self: flex-start; }

  /* Tile shape (square/horizontal/vertical) is admin-controlled per listing
     via acquire_items.bento_size (see acquire/index.php), packed with
     grid-auto-flow: dense — same pattern as the Marks page gallery
     (.mk-grid in marks.css), rather than a fixed nth-child mosaic. */
  .acq-grid {
    --acq-w: 100cqw;
    --acq-gap: 14px;
    --acq-cell: calc((var(--acq-w) - 5 * var(--acq-gap)) / 6);
    grid-template-columns: repeat(6, var(--acq-cell));
    grid-auto-rows: var(--acq-cell);
    grid-auto-flow: dense;
    gap: var(--acq-gap);
    width: 100%;
    justify-content: center;
  }

  .acq-tile-name { font-size: min(10pt, 2dvh); }
  .acq-tile-price { font-size: min(10pt, 1.9dvh); }

  .acq-detail { flex-direction: row; align-items: stretch; gap: 32px; }
  .acq-media { width: 340px; flex: 0 0 340px; aspect-ratio: auto; height: auto; }
  .acq-info { flex: 1; min-width: 0; }
  .acq-lightbox { max-width: 920px; }
}