/* ===================== syi.kz — платные дизайны приглашений =====================
   Цвета и шрифты приходят переменными из apps/events/styles.py (style="--bg:…").
   Пять макетов: .fam-classic .fam-photo .fam-card .fam-light .fam-arch */

:root {
  --orn-koshkar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 20h66M130 20h66'/%3E%3Cpath d='M92 20c-7 0-13-4-13-10s6-8 10-5 2 8-2 8M108 20c7 0 13-4 13-10s-6-8-10-5-2 8 2 8M92 20c-7 0-13 4-13 10s6 8 10 5 2-8-2-8M108 20c7 0 13 4 13 10s-6 8-10 5-2-8 2-8'/%3E%3C/g%3E%3Cpath d='M100 11l6 9-6 9-6-9z'/%3E%3Ccircle cx='74' cy='20' r='2'/%3E%3Ccircle cx='126' cy='20' r='2'/%3E%3C/svg%3E");
  --orn-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M100 3l4.6 9.5 10.4-1.4-6.3 8.4 6.3 8.4-10.4-1.4L100 37l-4.6-9.5-10.4 1.4 6.3-8.4-6.3-8.4 10.4 1.4z'/%3E%3Cg stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M8 20h66M126 20h66'/%3E%3C/g%3E%3Ccircle cx='80' cy='20' r='2.4'/%3E%3Ccircle cx='120' cy='20' r='2.4'/%3E%3Ccircle cx='8' cy='20' r='1.6'/%3E%3Ccircle cx='192' cy='20' r='1.6'/%3E%3C/svg%3E");
  --orn-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M6 20c16-14 32 14 48 0s32 14 48 0 32 14 48 0 32 14 44 2'/%3E%3C/svg%3E");
  --orn-tulip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 26h70M124 26h70M100 38V22M100 32c-6-6-14-6-18-2 6 4 12 4 18 2zM100 32c6-6 14-6 18-2-6 4-12 4-18 2z'/%3E%3C/g%3E%3Cpath d='M100 22c-8 0-11-7-11-15 4 3 7 5 11 1 4 4 7 2 11-1 0 8-3 15-11 15z'/%3E%3C/svg%3E");
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 14l3 7 7-1-4 6 4 6-7-1-3 7-3-7-7 1 4-6-4-6 7 1z'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='60' cy='0' r='2'/%3E%3Ccircle cx='0' cy='60' r='2'/%3E%3Ccircle cx='60' cy='60' r='2'/%3E%3C/svg%3E");
}

body:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0;
}
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
}
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) .accent { color: var(--accent); }
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) .muted { color: var(--muted); }
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) .lead { font-size: 1.08rem; line-height: 1.7; }
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) .big-btn,
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) .choice label:has(input:checked) {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--body);
  font-weight: 700;
  box-shadow: 0 12px 26px -14px var(--accent);
}
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) :is(input, textarea, select) {
  background: color-mix(in srgb, var(--surface) 92%, var(--ink));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--body);
}
:is(.fam-classic, .fam-photo, .fam-card, .fam-light, .fam-arch) .count {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--accent);
}

/* орнаменты: маска, цвет = --accent */
.ornament[class*="d-orn-"] {
  background: var(--accent);
  -webkit-mask: var(--orn, var(--orn-koshkar)) center / contain no-repeat;
  mask: var(--orn, var(--orn-koshkar)) center / contain no-repeat;
  height: 34px;
  max-width: 260px;
  opacity: 0.95;
}
.d-orn-koshkar { --orn: var(--orn-koshkar); }
.d-orn-star { --orn: var(--orn-star); }
.d-orn-wave { --orn: var(--orn-wave); }
.d-orn-tulip { --orn: var(--orn-tulip); }
.ornament.d-orn-small { height: 22px; max-width: 170px; margin: 0.4rem auto 1.4rem; opacity: 0.7; }

/* ---------- обложка (photo / arch) ---------- */
.d-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-hero-plain {
  display: block; width: 100%; height: 100%;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 35%, var(--bg)), var(--bg));
}
.d-hero-plain::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--accent); opacity: 0.18;
  -webkit-mask: var(--pattern) 0 0 / 60px 60px repeat;
  mask: var(--pattern) 0 0 / 60px 60px repeat;
}

/* ===================== 1. Классика ===================== */
.fam-classic {
  background:
    radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg);
}
.fam-classic h1 { font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1.12; }
.fam-classic .invite-inner { text-align: center; padding-top: 2.6rem; }
.fam-classic section {
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.fam-classic .map-row, .fam-classic .cal-row { justify-content: center; }
.fam-classic form { text-align: left; }

/* ===================== 2. Фото-обложка ===================== */
.fam-photo .invite-inner { padding-top: 0; }
.fam-photo .d-hero {
  position: relative;
  margin: 0 -1.25rem 1.8rem;
  height: min(78vh, 620px);
  overflow: hidden;
  border-radius: 0 0 32px 32px;
  background: var(--bg);
}
.fam-photo .d-hero-img { position: absolute; inset: 0; }
.fam-photo .d-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.72));
}
.fam-photo .d-hero-text {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2rem 1.6rem 2.2rem; text-align: center; color: #fff;
}
.fam-photo .d-hero-text .accent { color: #fff; opacity: 0.9; }
.fam-photo .d-hero h1 { color: #fff; font-size: clamp(2.4rem, 10vw, 3.8rem); margin: 0; text-shadow: 0 4px 24px rgba(0,0,0,0.35); }
.fam-photo .lead, .fam-photo .dear { text-align: center; }
.fam-photo section {
  background: var(--surface);
  border-radius: 22px;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,0.35);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  margin-top: 1.1rem;
}
.fam-photo .count { margin: 0.6rem 0 0; }

/* ===================== 3. Оюлы карта ===================== */
.fam-card { position: relative; }
.fam-card::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 80%, #fff);
  opacity: 0.22;
  -webkit-mask: var(--pattern) 0 0 / 64px 64px repeat;
  mask: var(--pattern) 0 0 / 64px 64px repeat;
}
.fam-card .invite-inner {
  position: relative; z-index: 1;
  margin: 2.2rem auto;
  max-width: 600px;
  padding: 3rem 1.8rem 2.6rem;
  background: var(--surface);
  color: var(--ink);
  border-radius: 30px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.6);
  outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: -12px;
  text-align: center;
}
.fam-card h1 { font-size: clamp(2.2rem, 8vw, 3.3rem); line-height: 1.15; }
.fam-card section { padding-top: 1.6rem; border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.fam-card .map-row, .fam-card .cal-row { justify-content: center; }
.fam-card form { text-align: left; }
.fam-card .foot { color: var(--muted); }

/* ===================== 4. Жеңіл ===================== */
.fam-light .invite-inner { text-align: center; padding-top: 3rem; position: relative; }
.fam-light h1 { font-size: clamp(2.8rem, 12vw, 4.4rem); font-weight: 500; line-height: 1.05; color: var(--ink); }
.fam-light .type { letter-spacing: 0.3em; }
.fam-light section { padding-top: 1.8rem; }
.fam-light section::before {
  content: ""; display: block; width: 60px; height: 1px; margin: 0 auto 1.6rem;
  background: var(--accent);
}
.fam-light .map-row a, .fam-light .cal-row a { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink); }
.fam-light .map-row, .fam-light .cal-row { justify-content: center; }
.fam-light form { text-align: left; }
.fam-light .big-btn { border-radius: 14px; }

/* ===================== 5. Күмбез ===================== */
.fam-arch .invite-inner { text-align: center; padding-top: 2.4rem; }
.fam-arch .d-hero-img {
  width: min(78%, 360px); aspect-ratio: 3 / 4; margin: 0 auto;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  border: 3px solid var(--accent);
  outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 7px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7);
}
.fam-arch .d-hero-text { margin-top: 1.8rem; }
.fam-arch h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.12; }
.fam-arch section {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 20px;
  padding: 1.3rem 1.2rem;
  background: var(--surface);
  margin-top: 1.1rem;
}
.fam-arch .map-row, .fam-arch .cal-row { justify-content: center; }
.fam-arch form { text-align: left; }

@media (max-width: 640px) {
  .fam-card .invite-inner { margin: 1rem; padding: 2.4rem 1.2rem 2rem; outline-offset: -8px; }
  .fam-photo .d-hero { height: 72vh; }
}