/* =========================================================
   МОЯ СЕМЬЯ — Тема «Семейный фотоальбом»
   Загружается ПОСЛЕ stitch.css и переопределяет токены.
   ========================================================= */

:root {
  /* Палитра */
  --c-bg:        #FFF7EC;   /* молочно-кремовый фон */
  --c-bg-deep:   #F8EBD4;   /* для футера и second surface */
  --c-surface:   #FFFFFF;
  --c-ink:       #2A2018;   /* кофейно-чёрный (не pure black) */
  --c-ink-soft:  #6E5E50;
  --c-line:      #E6DDD0;   /* бежевая разделительная линия */

  --c-brand:        #D14D3F; /* терракот — основной */
  --c-brand-deep:   #8B2F2F; /* винный для текста заголовков и hover */
  --c-brand-soft:   #FBE4DF; /* пастельный фон бейджей */
  --c-mint:         #6FB28E; /* мятный success */
  --c-mint-deep:    #3D7A5B;
  --c-sun:          #F4B860; /* абрикосовый accent */
  --c-ink-glass:    rgba(42, 32, 24, 0.62);
  --c-white-glass:  rgba(255, 255, 255, 0.78);
  --c-shadow:       rgba(60, 30, 10, 0.10);
  --c-shadow-lg:    rgba(60, 30, 10, 0.18);

  /* Типографика */
  --font-display: Georgia, "Times New Roman", "PT Serif", serif;
  --font-body:    Tahoma, Arial, "Helvetica Neue", sans-serif;
  --font-mono:    Consolas, "Courier New", monospace;

  /* Радиусы и тени */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --shadow-soft: 0 6px 20px var(--c-shadow);
  --shadow-pop:  0 14px 38px var(--c-shadow-lg);
}

/* Глобальное */
html, body {
  background: var(--c-bg) !important;
  color: var(--c-ink);
}
body, button, input, select, textarea {
  font-family: var(--font-body);
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--c-brand-deep);
  letter-spacing: -0.01em;
}

/* ───────────── ЛОГО + HEADER ───────────── */
.brand-row {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--c-brand-deep);
}
.brand-row .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--c-brand-deep);
  white-space: nowrap;
}
.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .nav-link {
  font-size: 15px; font-weight: 600; color: var(--c-ink-soft);
  text-decoration: none; transition: color .15s;
}
.site-header .nav-link:hover { color: var(--c-brand-deep); }

/* ───────────── КНОПКИ ───────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 15px;
  border: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  text-decoration: none;
  line-height: 1;
}
.btn:focus-visible { outline: 3px solid var(--c-sun); outline-offset: 2px; }

.btn-primary {
  background: var(--c-brand); color: #FFF;
  box-shadow: 0 6px 0 var(--c-brand-deep), 0 8px 18px rgba(209,77,63,.28);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #E25646;
  box-shadow: 0 7px 0 var(--c-brand-deep), 0 10px 22px rgba(209,77,63,.34);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--c-brand-deep), 0 4px 8px rgba(209,77,63,.2);
}
.btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  background: transparent; color: var(--c-brand-deep);
  border: 2px solid var(--c-brand-deep);
  padding: 11px 24px;
}
.btn-ghost:hover { background: var(--c-brand-deep); color: #FFF; }

.btn-mint {
  background: var(--c-mint); color: #FFF;
  box-shadow: 0 6px 0 var(--c-mint-deep), 0 8px 18px rgba(111,178,142,.28);
}
.btn-mint:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #7AC09C;
}

/* ───────────── КАРТОЧКИ-ПОЛЯРОИДЫ ───────────── */
.album-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--c-line);
  position: relative;
  transition: transform .25s, box-shadow .25s;
}
.album-card:hover {
  transform: translateY(-4px) rotate(0deg) !important;
  box-shadow: var(--shadow-pop);
}
/* Лёгкий «семейный» наклон карточек как полароидов */
.album-card.tilt-l { transform: rotate(-1.2deg); }
.album-card.tilt-r { transform: rotate( 1.2deg); }
.album-card.tilt-c { transform: rotate(-0.4deg); }

.album-card .ic-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ic-circle.ic-brand { background: var(--c-brand-soft); color: var(--c-brand-deep); }
.ic-circle.ic-mint  { background: #DCEFE3;            color: var(--c-mint-deep); }
.ic-circle.ic-sun   { background: #FCEBCC;            color: #8C5A18; }

.album-card h3 {
  margin: 0 0 6px; font-size: 19px; font-weight: 700;
}
.album-card p { margin: 0; color: var(--c-ink-soft); font-size: 15px; line-height: 1.55; }

/* ───────────── HERO ───────────── */
.hero-wrap {
  position: relative;
  padding: 60px 0 80px;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand-deep);
  background: var(--c-brand-soft);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--c-brand-deep);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.hero-title em {
  font-style: italic; color: var(--c-brand);
  font-family: var(--font-display);
}
.hero-sub {
  font-size: 17px; line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 480px; margin: 0 0 28px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Декоративная коллажа справа (поляроиды-видеоокошки) */
.collage {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1; max-width: 460px;
  margin-left: auto;
}
.polaroid {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 9px 9px 26px;
  box-shadow: var(--shadow-pop);
  width: 46%;
}
.polaroid .photo {
  display: block;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}
.polaroid .photo svg { display: block; width: 100%; height: 100%; }
.polaroid .label {
  position: absolute; bottom: 5px; left: 12px;
  font-family: 'Comic Sans MS', 'Marker Felt', 'Segoe Print', cursive;
  font-size: 14px; color: var(--c-ink-soft);
  transform: rotate(-2deg);
}
.polaroid.p1 { top: 0;    left: 4%;  transform: rotate(-7deg); }
.polaroid.p1 .photo { background: #FFF0D4; }
.polaroid.p2 { top: 12%;  right: 0;  transform: rotate(6deg); }
.polaroid.p2 .photo { background: #E6F1EA; }
.polaroid.p3 { bottom: 6%; left: 14%; transform: rotate(-3deg); }
.polaroid.p3 .photo { background: #DCEBF6; }
.polaroid.p4 { bottom: 0;  right: 6%; transform: rotate(8deg); width: 39%; }
.polaroid.p4 .photo { background: #FFF6E0; }
.polaroid:hover { transform: translateY(-5px) rotate(0deg) !important; transition: transform .35s ease; }

/* Текстуру можно дать фоновому слою */
.paper-bg {
  background:
    radial-gradient(circle at 18% 12%, rgba(244,184,96,.18) 0%, transparent 55%),
    radial-gradient(circle at 82% 88%, rgba(111,178,142,.15) 0%, transparent 55%),
    var(--c-bg);
}

/* ───────────── СЕКЦИИ ───────────── */
.section { padding: 56px 0; }
.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--c-brand-deep);
  margin: 0 0 8px;
  text-align: center;
}
.section-lead {
  text-align: center; max-width: 600px; margin: 0 auto 36px;
  color: var(--c-ink-soft); font-size: 16px; line-height: 1.55;
}

/* ───────────── ФУТЕР ───────────── */
.site-footer {
  background: var(--c-bg-deep);
  border-top: 1px solid var(--c-line);
  padding: 28px 0; margin-top: 60px;
}
.site-footer .muted {
  color: var(--c-ink-soft); font-size: 13px; opacity: .8;
}

/* ───────────── МОДАЛКА ───────────── */
.modal-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  max-width: 380px; width: 92%;
  box-shadow: var(--shadow-pop);
}
.modal-card h3 {
  font-family: var(--font-display); color: var(--c-brand-deep);
  font-size: 22px; margin: 0 0 8px;
}
.modal-card p {
  color: var(--c-ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 14px;
}
.text-input {
  width: 100%; border: 2px solid var(--c-line); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 15px; font-family: var(--font-body);
  color: var(--c-ink); outline: none; box-sizing: border-box;
  background: #FDFAF4;
}
.text-input:focus { border-color: var(--c-brand); background: #fff; }

.notice-ok {
  background: #E5F2EB; color: var(--c-mint-deep);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14px; line-height: 1.5;
}
.notice-err {
  background: #FCE2DE; color: #8B1F12;
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 14px; line-height: 1.5;
}

/* ───────────── MOBILE OVERRIDES ───────────── */
@media (max-width: 767px) {
  .hero-wrap { padding: 36px 0 48px; }
  .hero-title { font-size: 38px; }
  .hero-sub { font-size: 16px; }
  .collage { max-width: 320px; margin: 24px auto 0; }
  .section { padding: 40px 0; }
  .section-title { font-size: 24px; }
  .album-card { padding: 22px 20px; }
  /* На мобильных убираем наклон чтобы выглядело аккуратнее */
  .album-card.tilt-l,
  .album-card.tilt-r,
  .album-card.tilt-c { transform: rotate(0); }
  .brand-row .brand-name { font-size: 18px; }
}