/* screens.css — секції головної. Останній у черзі, перекриває base. */

/* ── Титул ───────────────────────────────────────────────────── */
/* overflow:hidden звідси прибрано разом із кремовою підкладкою — вона вилазила
   праворуч і її треба було обрізати. Тепер обрізати нічого, а тінь під фото
   мусить лягати вільно: на телефоні від неї до краю секції всього 16 px. */
.hero{padding-block:var(--s6) var(--s7)}
.hero-in{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){
  .hero{padding-block:var(--s7) var(--s8)}
  .hero-in{grid-template-columns:1.05fr .95fr;gap:var(--s6)}
}
.hero h1{margin-block:var(--s3) var(--s4)}
.hero h1 em{color:var(--brand);font-weight:400}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

/* Фото титулу. Кремова підкладка звідси прибрана (2026-08-01): другий кольоровий
   прямокутник поруч із фото читався як банер, а не як добра світлина. Глибину дає
   тінь, а не заливка — фото лишається єдиним, на що дивишся. */
.hero-fig{position:relative}
.hero-fig img{display:block;aspect-ratio:4/5;width:100%;object-fit:cover;
  border-radius:var(--r-photo);box-shadow:var(--shadow-photo)}

/* Смужка фактів під титулом */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:var(--s3);border-block:1px solid var(--line);padding-block:var(--s3)}
.facts b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:500;line-height:1}
.facts span{font-size:var(--t-small);color:var(--ink-soft)}

/* ── Букети ──────────────────────────────────────────────────── */
/* Не ґратка з однакових плиток, а розворот журналу: перший знімок широкий,
   другий поруч високий, унизу три рівні, з яких середній опущений. Різні
   пропорції змушують око йти сторінкою, а не ковзати по таблиці. */
.grid-b{display:grid;gap:var(--s4);grid-template-columns:1fr}
.card{display:block;position:relative;color:inherit}
/* Відео в каталозі бере ту саму рамку й той самий кроп, що знімок. А от наїзду при
   наведенні не бере: масштаб на відео, що грає, змушує браузер перерисовувати кожен
   декодований кадр у новому розмірі, і картинка помітно дрижить. Наїзд і був потрібен
   для того, щоб нерухомий знімок здавався живим, — відео живе й так, а на наведення
   воно відповідає ярликом «Запитати», як і решта карток. */
.card img,.card video{width:100%;aspect-ratio:3/4;object-fit:cover}
.card img{transition:transform .8s var(--ease)}
.card:hover img,.card:focus-visible img{transform:scale(1.045)}
.card-fig{position:relative;overflow:hidden;background:var(--paper-2);
  border-radius:var(--r-photo);box-shadow:var(--shadow-photo)}

/* Місце картки в мозаїці задає клас p1…p5, який ставить JS видимим карткам, а не
   nth-child. Каталог тепер сезонний: половина карток прихована, і nth-child рахував
   би їх теж — широкий знімок опинявся б посеред порожнечі. Без JS класів немає,
   і всі картки йдуть рівними третинами: не мозаїка, але й не діри. */
@media (min-width:760px){
  .grid-b{grid-template-columns:repeat(12,1fr);gap:var(--s5) var(--s3);align-items:start}
  /* Стеля висоти, а не інша пропорція. Портретний кадр 3:4 на широкому екрані виростав
     до 675 px — одна картка займала дві третини вікна, і каталог гортався по знімку за
     раз. Ширина не міняється, надлишок з'їдає object-fit. Стеля стоїть саме тут, у
     десктопному блоці: на телефоні картка вузька, 3:4 від неї і так небагато, а стеля
     обернула б портрет на панораму. */
  .card img,.card video{max-height:30rem}
  .card{grid-column:span 4}
  .card.p1{grid-column:span 7}
  .card.p1 img,.card.p1 video{aspect-ratio:5/4}
  .card.p2{grid-column:span 5}
  .card.p4{margin-top:var(--s5)}
}

.card[hidden]{display:none}

/* Підпису під знімком немає: назв у букетів немає навмисне (склад залежить від того,
   що сьогодні свіже), а ціни прибрані 2026-08-01 як неактуальні. Лишилося саме фото —
   ціну клієнт питає в розмові, і це чесніше за число, яке вже не діє. */

/* Ярлик проявляється на знімку — картка читається як дія, а не як картинка. */
.card-tag{
  position:absolute;left:var(--s2);bottom:var(--s2);z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--cream);color:var(--on-cream);padding:.55rem .9rem;
  font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(.6rem);
  transition:opacity .35s var(--ease),transform .35s var(--ease)
}
/* Стрілка тут не має класу .ic, тому обведення задається на місці —
   інакше SVG залився б чорним замість контуру. */
.card-tag svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.card:hover .card-tag,.card:focus-visible .card-tag{opacity:1;transform:none}

/* ── Квятомат ────────────────────────────────────────────────── */
/* Єдина оливкова смуга на всій сторінці. Вона тут не для краси: цілодобовий
   автомат — те, чого немає в конкурентів, і його видно з іншого кінця сторінки. */
.mat{background:var(--brand-dark);color:var(--on-brand)}
.mat h2{color:var(--on-brand)}
.mat .eyebrow{color:var(--cream)}
.mat .eyebrow::before{background:var(--cream)}
.mat .lead{color:rgba(250,248,238,.82)}
.mat-in{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.mat-in{grid-template-columns:1.05fr .95fr;gap:var(--s6)}}
.mat-list{margin-top:var(--s4)}
.mat-list li{display:flex;gap:var(--s2);align-items:flex-start;padding-block:.7rem;
  border-bottom:1px solid rgba(250,243,163,.2);font-size:var(--t-small)}
.mat-list .ic{width:1.1rem;height:1.1rem;color:var(--cream);margin-top:.15rem}
.mat-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.mat .btn-fill{background:var(--cream);color:var(--on-cream)}
.mat .btn-fill:hover{background:var(--on-brand)}
.mat .btn-line{border-color:rgba(250,243,163,.55);color:var(--cream)}
.mat .btn-line:hover{background:var(--cream);color:var(--on-cream)}
.mat-note{font-size:var(--t-small);color:rgba(250,248,238,.6);margin-top:var(--s3)}
/* Скільки букетів в автоматі просто зараз. Вершкове й крапка перед рядком — щоб
   читалось як табло, а не як ще одне речення: це єдине число на сторінці, яке
   міняється протягом дня. */
.mat-live{display:flex;align-items:center;gap:.6rem;margin-top:var(--s3);
  font-size:var(--t-small);letter-spacing:.01em;color:var(--cream)}
.mat-live::before{content:'';width:.5rem;height:.5rem;border-radius:50%;
  background:var(--cream);flex:none}
/* Фото автомата. 4/5 замість 3/4 і стеля по ширині: при 3/4 на всю колонку знімок
   виходив 551×735 — половина екрана під одну фотографію, поруч із якою текст
   виглядав підписом до неї, а не навпаки. */
.mat-fig{position:relative;max-width:24rem;margin-inline:auto}
.mat-fig img{aspect-ratio:4/5;width:100%;object-fit:cover;background:rgba(250,243,163,.08);
  border-radius:var(--r-photo);box-shadow:var(--shadow-photo)}
/* Другий знімок зблизька — накладкою в куті головного, повністю всередині батька.
   Кант тонкий і в колір смуги, тінь м'яка: рамка 3 px із чорною тінню на 40 %
   виглядала як вирізка, наліплена поверх фотографії. */
.mat-fig .mat-inset{
  position:absolute;left:var(--s2);bottom:var(--s2);width:38%;aspect-ratio:1/1;
  z-index:2;border:1px solid var(--brand-dark);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.35);
  border-radius:var(--r-photo)
}

/* ── Вітрина квятомату ───────────────────────────────────────── */
/* Не сітка плиток, а сам автомат: два ряди дверцят по три комірки й панель
   терміналу збоку — рівно те, що клієнт побачить, коли підійде. У комірці лише
   знімок букета й ціна: фото каже про букет більше, ніж рядок складу, а більше
   клієнтові й не треба.
   З'являється лише тоді, коли дані є: порожній автомат на сторінці нічого не
   продає, тому без даних лишається блок із телефоном. */
/* Автомат стоїть ліворуч, за краєм тексту, а не посеред смуги: по центру він читався
   як плакат на всю секцію, і оливкове поле навколо доводилось гортати. */
.slots{max-width:21rem}

/* Тіні тут немає навмисне: --shadow-photo розрахована на теплий папір, а на оливковій
   смузі вона лягає брудним ореолом навколо корпусу — «шаром», якого ніхто не малював. */
.machine{background:var(--metal);border-radius:calc(var(--r-photo) * 2);overflow:hidden}
/* У темній темі смуга під автоматом сама майже чорна, і корпус на ній розчиняється:
   різниця в яскравості падає до сімнадцяти пунктів. Волосина по краю повертає силует,
   не додаючи ваги. */
:root[data-theme="dark"] .machine{box-shadow:0 0 0 1px var(--metal-line)}
/* Вивіска. Без неї схема читається як таблиця; з нею — як той самий чорний
   автомат із золотим написом, повз який клієнт ходить щодня. */
.machine-top{background:var(--metal-2);border-bottom:1px solid var(--metal-line);
  padding:.7rem var(--s2);text-align:center;color:var(--cream);
  font-size:var(--t-eyebrow);letter-spacing:.28em;text-transform:uppercase}
.machine-body{display:grid;grid-template-columns:minmax(0,1fr) 3.6rem;
  gap:.5rem;padding:.5rem}
/* Двоє дверцят, а не шість плиток: у машині комірки стоять за двома скляними
   стулками, і саме це робить схему впізнаваною з першого погляду.
   Стулку окреслює проміжок, а не рамка: обвідка кольором --metal-line була світліша
   за корпус, і кожна стулка виглядала обведеною зайвим контуром. Полиці всередині —
   тонкі щілини того ж кольору, що й корпус, тобто продовження заліза. */
.machine-doors{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.door{display:grid;gap:2px;background:var(--metal);border-radius:2px;overflow:hidden}

/* Панель терміналу: екран, купюроприймач, лоток видачі. Суто силует — він тримає
   пропорції справжньої панелі, тому схема впізнається, а не «схожа на щось». */
/* Панель без власного тла: темніший прямокутник збоку читався як окремий шар,
   наліплений на корпус. Видно її по тому, що на ній стоїть, — а це і є панель. */
.machine-side{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:.6rem .3rem}
.machine-side i{display:block;background:var(--glass);border-radius:1px}
.machine-side .m-scr{width:2.2rem;height:2.8rem;background:var(--brand-dark);border-radius:2px}
.machine-side .m-pay{width:1.4rem;height:.4rem}
.machine-side .m-slot{width:2.2rem;height:.3rem}
.machine-side .m-tray{width:2.6rem;height:.9rem;margin-top:auto;background:var(--metal-2)}

/* 4/5, а не 3/4: у справжньому автоматі комірка нижча за фотографію букета, і при
   3/4 схема виростала на дев'ятсот пікселів — сторінку доводилось гортати повз неї. */
.slot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--glass);
  display:block;border:0}
.slot img{width:100%;height:100%;object-fit:cover}
/* Відблиск на склі — одна коса смуга. Вона й робить комірку склом, а не діркою;
   на фото її не видно, бо там фото і є вміст вітрини. */
.slot.is-free::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,var(--glass-hi) 38%,var(--glass-hi) 52%,transparent 52%)}
.slot-n{position:absolute;left:.3rem;top:.3rem;z-index:2;width:1.2rem;height:1.2rem;
  border-radius:50%;display:grid;place-items:center;
  background:var(--brand-dark);color:var(--cream);font-size:.6rem;font-weight:500}
.slot-price{position:absolute;left:.3rem;bottom:.3rem;z-index:2;padding:.2rem .45rem;
  border-radius:1px;background:var(--cream);color:var(--on-cream);
  font-size:.7rem;letter-spacing:.02em}
/* Порожня комірка не ховається: «чотири з шести» — теж відповідь на питання
   «чи є що взяти». Але й не кричить — темне скло й тихий підпис. */
.slot.is-free{display:grid;place-items:center}
.slot-free{position:relative;z-index:2;color:var(--ink-soft);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.slots-note{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-soft)}
/* На оливковій смузі «Odświeżono» темним не читається — воно тут таке саме
   другорядне, як mat-note, тому й колір той самий. */
.mat .slots-note{color:rgba(250,248,238,.6)}
/* Секція «що стоїть зараз» коротша за решту: у ній один об'єкт, і повний ритм
   у 9rem згори й знизу перетворював оливкову смугу на екран порожнечі. */
#teraz{padding-block:var(--s5)}
@media (min-width:900px){
  #teraz{padding-block:var(--s6)}
  /* На широкому екрані автомат стоїть ПОРУЧ із текстом, а не під ним: під текстом
     секція виростала на дев'ятсот пікселів, з яких половина — оливкове поле обабіч
     машини. Поруч — та сама висота, що в тексту, і нічого гортати. */
  #teraz .wrap{display:grid;grid-template-columns:minmax(0,1fr) 21rem;
    gap:var(--s6);align-items:start}
  #teraz .sec-head{display:block;margin-bottom:0}
  #teraz .sec-head .lead{margin-top:var(--s3)}
}

/* ── Сезонні квіти ───────────────────────────────────────────── */
/* Усі дванадцять місяців лежать у розмітці, а JS лишає видимими поточний і
   наступний. Без JS видно весь календар — гірше, ніж один місяць, але не
   зламано: та сама логіка, що у фільтрі каталогу вище.
   Календар не застаріває: сезонність квітів однакова з року в рік, тому
   сторінку не треба оновлювати щосезону — вона переставляється сама. */
.season{display:grid}
.season li{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:var(--s2);
  align-items:baseline;padding-block:var(--s3);border-top:1px solid var(--line)}
.season li:last-child{border-bottom:1px solid var(--line)}
.season li b{font-family:var(--serif);font-size:var(--t-h3);font-weight:500}
/* Мітка сидить усередині назви місяця, а не окремою коміркою: інакше поява
   підпису ламала б сітку з двох колонок саме тоді, коли JS увімкнений. */
.season li em{font-family:var(--sans);font-style:normal;font-size:var(--t-eyebrow);
  letter-spacing:.14em;text-transform:uppercase;margin-left:.5rem}
/* Те, що цього місяця тільки приїхало на гуртівню, і стоїть у списку першим.
   Колір плюс півтону жирніше: самою фарбою відмінність не тримається на телефоні. */
.season li i{font-style:normal;font-weight:600}
/* Обидві позначки — дрібний текст фірмовою фарбою, і фарба тут потрібна різна.
   Світла олива --brand дає на вершковому тлі секції лише 4:1, тобто менше за норму;
   у темній темі навпаки — --brand-dark там майже чорний. Тому світлій темі темніший
   відтінок, темній — світліший, а не один токен на обидві. */
.season li em,.season li i{color:var(--brand-dark)}
:root[data-theme="dark"] .season li em,:root[data-theme="dark"] .season li i{color:var(--brand)}
@media (max-width:640px){
  .season li{grid-template-columns:1fr;gap:var(--s1)}
}
.js .season li{display:none}
.js .season li.is-now,.js .season li.is-soon{display:grid}
.js .season li.is-soon{color:var(--ink-soft)}
.js .season li.is-soon em{color:var(--ink-soft)}
/* Смуга знімків під календарем: чотири квітки того місяця, в якому людина
   зараз читає. Решта лежить у розмітці й чекає свого місяця — так само, як рядки
   календаря. Квадрат навмисне: знімки різного походження й різних пропорцій,
   спільна форма робить із них смугу, а не купу випадкових прямокутників. */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s4)}
@media (min-width:760px){.shots{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-photo)}
.shots b{display:block;margin-top:var(--s1);font-family:var(--serif);
  font-size:var(--t-h3);font-weight:500}
.js .shots li{display:none}
.js .shots li.is-now{display:block}


/* ── Як це працює ────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.step{counter-increment:s;padding-top:var(--s3);border-top:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:2.4rem;
  color:var(--brand);display:block;line-height:1;margin-bottom:var(--s2)}
.step h3{margin-bottom:var(--s1)}
.step p{color:var(--ink-soft);font-size:var(--t-small)}

/* ── Нагоди ──────────────────────────────────────────────────── */
.occ{display:grid;gap:var(--s2)}
.occ-row{
  position:relative;isolation:isolate;
  display:grid;gap:var(--s2) var(--s4);align-items:center;padding-block:var(--s4);
  border-top:1px solid var(--line)
}
.occ-row:last-child{border-bottom:1px solid var(--line)}

/* Заливка виїжджає зліва, а не з'являється: рядок оживає, і при цьому текст
   лишається на місці — вона розширена за краї, тому нічого не зсувається. */
.occ-row::before{
  content:'';position:absolute;inset:0 calc(-1 * var(--s2));z-index:-1;
  background:var(--cream);opacity:.55;
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)
}
/* Оливкова лінія наростає поверх волосини зверху — рядок «вмикається». */
.occ-row::after{
  content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)
}
.occ-row:hover::before,.occ-row:focus-within::before,
.occ-row:hover::after,.occ-row:focus-within::after{transform:scaleX(1)}

@media (min-width:760px){.occ-row{grid-template-columns:auto 1fr auto}}
.occ-row h3{min-width:11rem;transition:transform .5s var(--ease),color .5s var(--ease)}
.occ-row:hover h3,.occ-row:focus-within h3{transform:translateX(.4rem);color:var(--brand-deep)}
.occ-row p{color:var(--ink-soft);font-size:var(--t-small);max-width:34rem}
.occ-row .btn{justify-self:start}
.occ-row:hover .arw{transform:translateX(.3rem)}

/* ── Про нас ─────────────────────────────────────────────────── */
.about{display:grid;gap:var(--s5);align-items:center}
@media (min-width:900px){.about{grid-template-columns:.9fr 1.1fr;gap:var(--s6)}}
.about-txt p+p{margin-top:var(--s2)}
/* Вершкова підкладка прибрана разом із титульною (2026-08-01): обрамлення й далі
   одне на всю сторінку, просто тепер це тінь, а не жовтий прямокутник. */
.about-fig{position:relative}
.about-fig img{display:block;aspect-ratio:1/1;width:100%;object-fit:cover;
  border-radius:var(--r-photo);box-shadow:var(--shadow-photo)}
.quote{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.3;
  font-style:italic;border-left:2px solid var(--brand);padding-left:var(--s3);margin-top:var(--s4)}

/* ── Контакт ─────────────────────────────────────────────────── */
.contact{display:grid;gap:var(--s5)}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.cinfo li{display:flex;gap:var(--s2);align-items:flex-start;padding-block:var(--s2);
  border-bottom:1px solid var(--line)}
.cinfo .ic{color:var(--brand);margin-top:.2rem}
.cinfo b{display:block;font-weight:500}
.cinfo span{font-size:var(--t-small);color:var(--ink-soft)}
.contact-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.map{aspect-ratio:4/3;width:100%;border:0;filter:grayscale(1) contrast(.9);background:var(--paper-2)}