/* Occasion landing pages (/weddings, /birthdays, ..., /venues) and the home page "Made for" row.
   Builds on home.css (hp-* classes). Everything new here is prefixed lp-. Pure CSS art, no images. */

/* ------------------------------------------------------------ hero extras */
.lp-framehint {
  position: relative; z-index: 2; display: grid; gap: 2px; width: fit-content; max-width: 100%;
  margin: 14px 0 0 auto; padding: 8px 12px 9px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg);
}
.lp-framehint span { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b6153; }
.lp-framehint b { font-family: var(--mono); font-weight: 400; font-size: 1.15rem; line-height: 1.1; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ venues: how you run it */
.lp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.lp-flow li { position: relative; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 18px 18px 20px 72px; box-shadow: 5px 5px 0 var(--ink); min-width: 0; }
.lp-flow h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.15; margin: 0 0 6px; }
.lp-flow p { margin: 0; color: #3b3427; }
.lp-flow-n {
  position: absolute; left: 16px; top: 16px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--display); font-size: 1.1rem;
}
@media (min-width: 760px) {
  .lp-flow { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .lp-flow li { padding: 74px 18px 20px; }
  .lp-flow-n { left: 18px; top: 18px; }
}

/* ------------------------------------------------------------ feature grid: 8 cards, so 2 or 4 across */
.lp-feats { gap: 16px; }
@media (min-width: 600px) { .lp-feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .lp-feats { grid-template-columns: repeat(4, 1fr); gap: 16px; } .lp-feats .hp-feat { padding: 16px; } }

/* ------------------------------------------------------------ icons (CSS-drawn) */
.lp-ico-frame i { position: relative; display: block; width: 32px; height: 38px; background: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.lp-ico-frame i::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 24px; background: linear-gradient(135deg, #ffcf6b, #f0643a); }
.lp-ico-frame i::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; background: var(--ink); border-radius: 2px; }
.lp-ico-book i { position: relative; display: block; width: 38px; height: 32px; background: var(--paper); border-radius: 3px 5px 5px 3px; border-left: 5px solid var(--yellow); }
.lp-ico-book i::after { content: ""; position: absolute; left: 6px; right: 5px; top: 7px; height: 16px; background: repeating-linear-gradient(var(--ink) 0 2px, transparent 2px 6px); opacity: .55; }
.lp-ico-target i { display: block; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, var(--red) 0 16%, #fff 17% 34%, var(--red) 35% 52%, #fff 53% 70%, var(--red) 71%); }
.lp-ico-clip i { position: relative; display: block; width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #3f4a63, #1c2233); box-shadow: 0 0 0 2px #8a7f6b; }
.lp-ico-clip i::after { content: ""; position: absolute; left: 16px; top: 8px; width: 14px; height: 14px; background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lp-ico-glyph { font-size: 2rem; line-height: 1; font-weight: 700; color: var(--yellow); }
.lp-ico-inf { font-size: 2.4rem; }
.lp-ico-logo { border: 2px dashed #8a7f6b; font-family: var(--display); font-size: .9rem; letter-spacing: .06em; color: var(--cream); }
.lp-ico-lang { font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--cream); letter-spacing: .02em; }
.lp-ico-reel i { position: relative; display: block; width: 46px; height: 30px; background: #2b2b33; border-radius: 3px; }
.lp-ico-reel i::before, .lp-ico-reel i::after { content: ""; position: absolute; left: 3px; right: 3px; height: 4px; background: repeating-linear-gradient(90deg, var(--yellow-hi) 0 4px, transparent 4px 8px); }
.lp-ico-reel i::before { top: 3px; }
.lp-ico-reel i::after { bottom: 3px; }
.lp-ico-web i { position: relative; display: block; width: 44px; height: 32px; border-radius: 5px; border: 3px solid #8a7f6b; background: linear-gradient(#8a7f6b 0 7px, var(--paper) 7px); }
.lp-ico-web i::after { content: ""; position: absolute; left: 5px; top: 12px; width: 18px; height: 8px; background: var(--yellow); border-radius: 2px; box-shadow: 0 11px 0 -2px #cfc5ae; }
.lp-ico-link { font-family: var(--mono); font-size: 1.3rem; line-height: 1; color: var(--led); text-shadow: 0 0 5px rgba(255,100,0,.8); }
.lp-ico-coin i { display: block; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle, transparent 0 56%, rgba(0,0,0,.25) 58% 62%, transparent 64%), radial-gradient(circle at 35% 30%, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); box-shadow: 0 0 0 2px #8a7f6b; }

/* ------------------------------------------------------------ sample challenges (a tick-off list) */
.lp-chal { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.lp-chal li {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; min-width: 0;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink);
  font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
}
.lp-box { position: relative; flex: none; width: 24px; height: 24px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; }
.lp-chal li.is-done { background: var(--cream); }
.lp-chal li.is-done .lp-box { background: var(--yellow); }
.lp-chal li.is-done .lp-box::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; line-height: 1; color: var(--ink); }
@media (min-width: 640px) { .lp-chal { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------ "also made for" row + home "Made for" row */
.lp-also { margin-top: 44px; text-align: center; }
.lp-also p { margin: 0 0 10px; font-weight: 700; }
.lp-also ul, .hp-madefor ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lp-also a, .hp-madefor a {
  display: inline-block; padding: 8px 14px; min-height: 40px; line-height: 24px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none;
}
.lp-also a:hover, .hp-madefor a:hover { background: var(--yellow); }
.lp-also a:focus-visible, .hp-madefor a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.hp-madefor { margin-top: 44px; text-align: center; }
.hp-madefor h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 1.2rem; }

/* footer row (every page) */
.site-footer .lp-footer-links { margin-top: 6px; }
.site-footer .lp-footer-links > span { font-weight: 700; }

/* ------------------------------------------------------------ extra photo scenes for the collages
   (hp-p-cake / dance / cheers / table / gold / bomb live in home.css) */
.lp-p-rings { background: radial-gradient(circle at 80% 16%, rgba(255,255,255,.9) 0 3%, transparent 4%), radial-gradient(circle at 14% 80%, rgba(255,255,255,.8) 0 2.5%, transparent 3.5%), linear-gradient(135deg, #f6d9d4, #e3a9b6); }
.lp-p-rings::before, .lp-p-rings::after { top: 32%; width: 36%; aspect-ratio: 1; border-radius: 50%; border: 6px solid #e0b64a; box-shadow: 0 3px 5px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.5); }
.lp-p-rings::before { left: 17%; }
.lp-p-rings::after { left: 42%; border-color: #f0d98a; }
.lp-p-arch { background: linear-gradient(transparent 82%, #7fb86c 82%), linear-gradient(#cfe8f3, #f7efe0); }
.lp-p-arch::before, .lp-p-arch::after { left: 20%; right: 20%; top: 14%; bottom: 18%; border-radius: 999px 999px 0 0; }
.lp-p-arch::before { border: 8px solid #6aa95a; border-bottom: 0; }
.lp-p-arch::after { background:
  radial-gradient(circle at 0% 70%, #fff 0 7%, transparent 8%), radial-gradient(circle at 4% 38%, #f7a6c0 0 8%, transparent 9%), radial-gradient(circle at 20% 12%, #fff 0 8%, transparent 9%),
  radial-gradient(circle at 50% 0%, #f7a6c0 0 8%, transparent 9%), radial-gradient(circle at 80% 12%, #fff 0 8%, transparent 9%), radial-gradient(circle at 96% 38%, #f7a6c0 0 8%, transparent 9%), radial-gradient(circle at 100% 70%, #fff 0 7%, transparent 8%); }
.lp-p-balloons { background:
  linear-gradient(#444, #444) 28% 52% / 1px 40% no-repeat, linear-gradient(#444, #444) 52% 48% / 1px 44% no-repeat, linear-gradient(#444, #444) 74% 54% / 1px 38% no-repeat,
  radial-gradient(ellipse 14% 17% at 28% 36%, #e2321b 0 96%, transparent 100%), radial-gradient(ellipse 15% 18% at 52% 30%, #ffd23f 0 96%, transparent 100%), radial-gradient(ellipse 14% 17% at 74% 38%, #3fb6a8 0 96%, transparent 100%),
  linear-gradient(160deg, #ffe9a8, #ffb3c7); }
.lp-p-balloons::before { inset: 0; background: radial-gradient(circle at 24% 30%, rgba(255,255,255,.7) 0 2.5%, transparent 3.5%), radial-gradient(circle at 48% 24%, rgba(255,255,255,.7) 0 2.5%, transparent 3.5%), radial-gradient(circle at 70% 32%, rgba(255,255,255,.7) 0 2.5%, transparent 3.5%), radial-gradient(circle at 12% 80%, #fff 0 2%, transparent 3%), radial-gradient(circle at 88% 78%, #e2321b 0 2%, transparent 3%), radial-gradient(circle at 60% 86%, #ffd23f 0 2%, transparent 3%); }
.lp-p-gift { background: linear-gradient(transparent 76%, rgba(0,0,0,.18) 76%), linear-gradient(160deg, #3fb6a8, #2a7f9e); }
.lp-p-gift::before { left: 24%; top: 42%; width: 52%; height: 40%; border-radius: 3px; background:
  linear-gradient(#ffd23f, #ffd23f) 50% 0 / 14% 100% no-repeat, linear-gradient(#ffd23f, #ffd23f) 0 34% / 100% 13% no-repeat, #d9433a; box-shadow: 0 6px 9px rgba(0,0,0,.35); }
.lp-p-gift::after { left: 36%; top: 27%; width: 28%; height: 18%; background: radial-gradient(ellipse 32% 72% at 24% 56%, transparent 0 40%, #ffd23f 44% 94%, transparent 98%), radial-gradient(ellipse 32% 72% at 76% 56%, transparent 0 40%, #ffd23f 44% 94%, transparent 98%); }
.lp-p-moon { background: radial-gradient(circle at 20% 22%, #fff 0 1.8%, transparent 2.6%), radial-gradient(circle at 80% 16%, #fff 0 2.2%, transparent 3%), radial-gradient(circle at 70% 70%, #fff 0 1.8%, transparent 2.6%), radial-gradient(circle at 16% 72%, #fff 0 2.2%, transparent 3%), linear-gradient(#b9d3f2, #f1def4); }
.lp-p-moon::before { left: 30%; top: 24%; width: 40%; aspect-ratio: 1; border-radius: 50%; box-shadow: 12px 7px 0 0 #fff0b0; }
.lp-p-moon::after { left: 56%; top: 62%; width: 7%; aspect-ratio: 1; background: #fff0b0; clip-path: polygon(50% 0, 62% 38%, 100% 38%, 70% 60%, 82% 100%, 50% 74%, 18% 100%, 30% 60%, 0 38%, 38% 38%); }
.lp-p-cap { background: radial-gradient(circle at 12% 20%, #ffd23f 0 2.5%, transparent 3.2%), radial-gradient(circle at 86% 24%, #fff 0 2%, transparent 2.8%), radial-gradient(circle at 20% 78%, #fff 0 2%, transparent 2.8%), radial-gradient(circle at 84% 74%, #ffd23f 0 2.5%, transparent 3.2%),
  linear-gradient(#15120d, #15120d) 50% 62% / 34% 18% no-repeat, linear-gradient(160deg, #2a46a0, #5f84dc); }
.lp-p-cap::before { left: 12%; top: 30%; width: 76%; height: 32%; background: #15120d; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 0 2px #3a3f55; }
.lp-p-cap::after { left: 74%; top: 46%; width: 3.5%; height: 24%; background: #ffd23f; border-radius: 2px; box-shadow: 0 20px 0 1px #ffd23f; }
.lp-p-tree { background: radial-gradient(circle at 50% 9%, #ffe27a 0 3.6%, rgba(255,226,122,.35) 5% 9%, transparent 10%), radial-gradient(circle at 12% 18%, #fff 0 1.5%, transparent 2.3%), radial-gradient(circle at 88% 30%, #fff 0 1.5%, transparent 2.3%), linear-gradient(#0d1b2a, #1d3b4d); }
.lp-p-tree::before { left: 22%; top: 12%; width: 56%; height: 70%; clip-path: polygon(50% 0, 100% 56%, 78% 56%, 100% 100%, 0 100%, 22% 56%, 0 56%); background:
  radial-gradient(circle at 50% 22%, #ffd23f 0 4%, transparent 5%), radial-gradient(circle at 36% 48%, #ff5da2 0 4%, transparent 5%), radial-gradient(circle at 62% 56%, #ffd23f 0 4%, transparent 5%),
  radial-gradient(circle at 24% 80%, #5cc7ff 0 4%, transparent 5%), radial-gradient(circle at 50% 76%, #ff5da2 0 4%, transparent 5%), radial-gradient(circle at 76% 84%, #ffd23f 0 4%, transparent 5%),
  linear-gradient(#2f8f46, #1d6b33); }
.lp-p-tree::after { left: 45%; top: 82%; width: 10%; height: 12%; background: #6b4423; }
.lp-p-badge { background: linear-gradient(135deg, #dfe7ee, #bfcddb); }
.lp-p-badge::before { content: "HELLO"; left: 14%; top: 20%; width: 72%; height: 58%; display: flex; justify-content: center; padding-top: 5%; box-sizing: border-box; border-radius: 6px; color: #fff; font-weight: 700; font-size: .75rem; letter-spacing: .2em; background: linear-gradient(#e2321b 0 34%, #fff 34%); box-shadow: 0 6px 10px rgba(0,0,0,.3); }
.lp-p-badge::after { content: "Alex"; left: 14%; top: 50%; width: 72%; height: 22%; display: grid; place-items: center; color: #15120d; font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive; font-weight: 700; font-size: 1.35rem; }

/* ------------------------------------------------------------ small screens + motion */
@media (max-width: 420px) {
  .lp-framehint { margin-right: 4px; }
  .lp-flow li { padding-left: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .hp-madefor * { animation: none !important; transition: none !important; }
}