/* layout.css — каркас страницы */
@layer layout {
  .container { width: var(--container); margin-inline: auto; }

  .section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
  .section--deep { background: var(--paper-deep); }
  .section--dark { background: var(--bark); color: var(--on-dark); }
  .section--dark .lead, .section--dark .eyebrow { color: var(--on-dark-soft); }

  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: var(--gutter);
    align-items: end;
    margin-bottom: clamp(32px, 4.5vw, 56px);
  }
  .section-head .lead { padding-bottom: .35em; }
  .section-head h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); margin-top: .18em; }
  .section-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }

  /* ------------------------------------------------------------ шапка */
  .header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
  }
  .header.is-stuck { border-bottom-color: var(--line-soft); }
  .header__inner {
    display: flex; align-items: center; gap: var(--gutter);
    min-height: 74px;
  }
  .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.32rem; letter-spacing: .01em; }
  .logo__mark { width: 30px; height: 30px; color: var(--stem); }
  .logo__sub { display: block; font-family: var(--font-sans); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); }

  .nav { margin-inline: auto; }
  .nav__list { display: flex; gap: clamp(14px, 2vw, 30px); }
  .nav__link {
    position: relative; font-size: .93rem; color: var(--ink-soft);
    padding: 6px 0; transition: color var(--t-fast) var(--ease);
  }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
    background: var(--stem); transition: right var(--t-base) var(--ease);
  }
  .nav__link:hover, .nav__link:focus-visible { color: var(--ink); }
  .nav__link:hover::after, .nav__link:focus-visible::after { right: 0; }

  .header__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }

  .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: transform var(--t-base) var(--ease), opacity var(--t-fast); }
  .burger span::before, .burger span::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
    transition: transform var(--t-base) var(--ease);
  }
  .burger span::before { top: -6px; }
  .burger span::after { top: 6px; }
  .burger[aria-expanded="true"] span { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
  .burger[aria-expanded="true"] span::after { opacity: 0; }

  /* -------------------------------------------------------- мобильное меню */
  .mobilenav {
    position: fixed; inset: 74px 0 auto 0; z-index: 55;
    background: var(--paper); border-bottom: 1px solid var(--line-soft);
    padding: 8px 0 24px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  }
  .mobilenav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .mobilenav a { display: block; padding: 14px 4vw; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); }

  /* ------------------------------------------------------------ hero */
  .hero { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 110px); overflow: hidden; }
  .hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(28px, 5vw, 72px); align-items: center;
  }
  .hero h1 { font-size: clamp(2.9rem, 8.2vw, 5.9rem); margin: .3em 0 .32em; }
  .hero h1 em { font-style: italic; color: var(--petal-deep); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .hero__stats {
    display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 46px);
    margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  }
  .hero__stat b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1; }
  .hero__stat span { font-size: .8rem; color: var(--ink-soft); }

  .hero__art { position: relative; display: grid; place-items: center; }
  .hero__art .art { width: min(100%, 460px); filter: drop-shadow(0 30px 40px rgba(31,38,33,.12)); }
  .hero__badge {
    position: absolute; right: 2%; top: 6%;
    background: var(--bark); color: var(--on-dark);
    padding: 12px 18px; border-radius: var(--r-pill);
    font-size: .78rem; letter-spacing: .06em; box-shadow: var(--shadow-m);
    display: flex; align-items: center; gap: 8px;
  }
  .hero__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--petal-deep); }

  /* ------------------------------------------------------------ сетки */
  .grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
  .grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 296px), 1fr)); }
  .grid--flowers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .grid--packages { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
  .grid--occ { grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

  /* ------------------------------------------------------------ фильтры */
  .toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    margin-bottom: 26px;
  }
  .search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 220px;
    background: var(--paper-card); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 10px 16px; min-height: 44px;
  }
  .search input { border: 0; background: none; outline: none; width: 100%; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }

  /* ------------------------------------------------------------ история */
  .story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(22px, 3.4vw, 48px); }
  .story__block h3 { font-size: 1.7rem; margin-bottom: .5em; }
  .story__block p { color: var(--ink-soft); margin-bottom: 1em; }

  /* ------------------------------------------------------------ футер */
  .footer { background: var(--bark); color: var(--on-dark); padding-block: clamp(48px, 6vw, 84px) 28px; }
  .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
  .footer h4 { font-family: var(--font-sans); font-size: .74rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 16px; }
  .footer li + li { margin-top: 8px; }
  .footer a { font-size: .92rem; color: var(--on-dark-soft); transition: color var(--t-fast); }
  .footer a:hover { color: var(--on-dark); }
  .footer__bottom {
    margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-size: .8rem; color: var(--on-dark-soft);
  }

  /* ------------------------------------------------------------ адаптив */
  @media (max-width: 1080px) {
    .nav { display: none; }
    .burger { display: flex; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__art { order: -1; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .section-head { grid-template-columns: 1fr; }
    .header__inner { min-height: 64px; }
    .mobilenav { inset-block-start: 64px; }
    .logo__sub { display: none; }
    .hero__stats { gap: 18px 28px; }
    .hero__stat b { font-size: 1.6rem; }
  }
  @media (max-width: 420px) {
    .footer__grid { grid-template-columns: 1fr; }
  }
}