/* London Baby 2026 — Memory Moment system
   Adds the mandated plum Memory Moment action button and cinematic modal. */

.lb-memory-action {
  --mm-bg-a:#32182d;
  --mm-bg-b:#1b1020;
  --mm-bg-c:#4b203d;
  --mm-gold:#e8c16b;
  --mm-rose:#c583a4;
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  min-height:78px;
  min-width:min(100%, 430px);
  max-width:100%;
  padding:10px 22px 10px 10px;
  gap:18px;
  border-radius:999px;
  border:1px solid rgba(232,193,107,.44);
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, var(--mm-bg-c) 0%, var(--mm-bg-a) 43%, var(--mm-bg-b) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.32),
    inset 0 -3px 7px rgba(0,0,0,.42),
    0 16px 32px rgba(42,16,43,.28),
    0 4px 10px rgba(0,0,0,.18);
  -webkit-tap-highlight-color: transparent;
  cursor:pointer;
}

.lb-memory-action::before {
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

.lb-memory-action::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.16), transparent 30%, transparent 70%, rgba(255,255,255,.08));
  opacity:.58;
  pointer-events:none;
}

.lb-memory-icon {
  width:60px;
  height:60px;
  flex:0 0 60px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(232,193,107,.48);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(145deg, rgba(118,62,99,.82), rgba(34,17,39,.92));
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.28),
    inset 0 -3px 7px rgba(0,0,0,.36),
    0 4px 12px rgba(0,0,0,.26);
  z-index:1;
}

.lb-memory-icon svg {
  width:34px;
  height:34px;
  fill:none;
  stroke:var(--mm-gold);
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

.lb-memory-text {
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1;
  z-index:1;
  min-width:0;
}

.lb-memory-title {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size:clamp(20px, 4.8vw, 26px);
  font-weight:750;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.32);
  white-space:nowrap;
}

.lb-memory-subtitle {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size:clamp(11px, 2.6vw, 13px);
  font-weight:760;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--mm-gold);
  white-space:nowrap;
}

.lb-memory-chevron {
  margin-left:auto;
  width:48px;
  height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  z-index:1;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}

.lb-memory-chevron svg {
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lb-memory-backdrop[hidden] { display:none !important; }
.lb-memory-backdrop {
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(6,10,18,.66);
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.12);
}

.lb-memory-sheet {
  width:min(920px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:34px;
  background:
    radial-gradient(circle at 10% 0%, rgba(245,233,205,.9), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,247,255,.96));
  border:1px solid rgba(211,171,75,.48);
  box-shadow:0 30px 80px rgba(0,0,0,.38);
  color:#06152d;
  position:relative;
}

.lb-memory-close {
  position:sticky;
  top:14px;
  margin-left:auto;
  margin-right:14px;
  margin-top:14px;
  z-index:3;
  width:66px;
  height:66px;
  border-radius:999px;
  border:2px solid rgba(211,171,75,.62);
  background:rgba(255,255,255,.94);
  color:#06152d;
  font-size:36px;
  line-height:1;
  font-weight:900;
  display:grid;
  place-items:center;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
  cursor:pointer;
}

.lb-memory-hero {
  margin:-46px 0 0;
  min-height:190px;
  padding:78px 28px 24px;
  color:white;
  background:
    linear-gradient(180deg, rgba(11,18,30,.22), rgba(11,18,30,.86)),
    var(--mm-image, linear-gradient(135deg, #1d1021, #091a34));
  background-size:cover;
  background-position:center;
}

.lb-memory-kicker {
  color:#e8c16b;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}

.lb-memory-heading {
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(34px, 8vw, 62px);
  line-height:.92;
  letter-spacing:-.04em;
  margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.lb-memory-body {
  padding:20px 24px 28px;
}

.lb-memory-preview {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:24px;
  border:1px solid rgba(211,171,75,.42);
  box-shadow:0 18px 42px rgba(10,22,44,.14);
  background:#eaf1f8;
}

.lb-memory-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.lb-memory-panel {
  border:1px solid rgba(174,194,220,.78);
  background:rgba(255,255,255,.76);
  border-radius:22px;
  padding:16px 18px;
}

.lb-memory-panel b {
  display:block;
  color:#003b8f;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  margin-bottom:8px;
}

.lb-memory-panel span,
.lb-memory-panel p {
  display:block;
  margin:0;
  font-size:17px;
  line-height:1.28;
  font-weight:650;
  color:#10192b;
}

.lb-memory-note {
  margin-top:16px;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(211,171,75,.45);
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(250,244,231,.88));
  font-size:16px;
  line-height:1.42;
  color:#233047;
}

@media (max-width: 620px) {
  .lb-memory-backdrop { padding:0; align-items:end; }
  .lb-memory-sheet {
    width:100%;
    max-height:92vh;
    border-radius:32px 32px 0 0;
  }
  .lb-memory-grid { grid-template-columns:1fr; }
  .lb-memory-action { min-height:74px; width:100%; }
  .lb-memory-icon { width:56px; height:56px; flex-basis:56px; }
  .lb-memory-chevron { width:42px; height:42px; }
}