/* APHOTO — WordPress parts on top of the prototype styles (style.css stays as approved). */

/* booking: honeypot field, never visible */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* portfolio cards are real links now (old URLs /portfolio-item/…/) */
a.scard { text-decoration: none; }
a.scard:hover { color: inherit; }

/* pages that start with a block: keep the first block clear of the fixed header */
.ap-page-top { height: 1px; }

/* one session as its own page */
.sv--page { position: relative; inset: auto; z-index: auto; min-height: 100vh; padding-top: 84px; }
.sv--page .sv__in { height: auto; overflow: visible; }
.sv--page .sv__bar { position: static; background: none; }
.sv--page .sv__head .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.sv--page .sv__nav a { display: block; text-decoration: none; color: inherit; font: 500 clamp(20px, 2vw, 28px)/1.15 var(--f-disp); }
.sv--page .sv__nav a:last-child { text-align: right; }
.sv__nav small { display: block; }
.ph--static { flex: 1 1 260px; max-width: 420px; margin: 0; }
.ph--static img { display: block; width: 100%; height: auto; }
.sv__rows .ph { cursor: zoom-in; }
.sv__story h2, .sv__story h3 { font: 500 clamp(22px, 2vw, 30px)/1.2 var(--f-disp); margin: 18px 0 10px; color: var(--ink); break-after: avoid; }
.sv__story a { color: var(--copper); }

/* session dialog + photo viewer: the way out is filled in the site copper, seen at once (Dima 11-10) */
.sv__back, .sv__x { background: var(--copper); border-color: var(--copper); color: var(--cream); transition: background .2s, border-color .2s; }
.sv__back:hover, .sv__x:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.sv__back:focus-visible, .sv__x:focus-visible { outline: 2px solid var(--copper-l); outline-offset: 3px; }
.lb__x { background: var(--copper); border-color: var(--copper); }
.lb__x:hover { background: var(--copper-l); border-color: var(--copper-l); color: var(--ink); }
.lb__fig, .lb__img { cursor: pointer; }

/* album steps: a chain of icons; the current one is filled and draws itself, the line fills up to it (Dima 11-10) */
.al-steps { position: relative; --al-p: 0; }
.al-steps::before, .al-steps::after { content: ""; position: absolute; left: 20px; top: 33px; bottom: 33px; width: 1px; background: var(--line); }
.al-steps::after { background: var(--copper); transform-origin: 50% 0; transform: scaleY(var(--al-p)); transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.al-steps li { align-items: center; position: relative; }
.al-ic { position: relative; z-index: 1; flex: none; width: 41px; height: 41px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-2); transition: color .35s, border-color .35s, background .35s, transform .35s, box-shadow .35s; }
.al-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.al-steps li.is-done .al-ic { border-color: var(--copper); color: var(--copper); }
.al-steps li.is-on .al-ic { background: var(--copper); border-color: var(--copper); color: var(--cream); transform: scale(1.1); box-shadow: 0 8px 18px -8px rgba(151, 84, 47, .7); }
.al-steps li.is-on .al-ic::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--copper); animation: al-pulse 1.8s ease-out infinite; }
.motion .al-steps li.is-on .al-ic svg * { stroke-dasharray: 1; animation: al-draw .9s ease-out both; }
.al-steps li.is-on span { color: var(--ink); }
@keyframes al-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes al-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.no-motion .al-steps li.is-on .al-ic::after { animation: none; opacity: 0; }

/* Christmas banner: text a little to the right, the fan of prints a little to the left — one compact group (Dima 11-10) */
/* placed from the centre, not from the edges, so it holds on wide screens too: the text starts on the site grid
   (1400 px container), the fan sits just right of the centre, higher and larger */
@media (min-width: 981px) {
  .xmas__copy { margin-left: max(4vw, calc((100vw - 1600px) / 2 + 2vw)); max-width: min(560px, 38vw); }
  /* the fan stands level with the text (vertically centred in the section), not low in the corner */
  .xmas__fan { right: auto; left: calc(50% + clamp(60px, 6vw, 160px)); bottom: auto; top: 50%; translate: 0 -44%; width: clamp(240px, 18vw, 360px); }
}
.btn--light:hover { --bg: var(--copper-l); color: var(--ink); }

/* ordinary text pages (privacy policy etc.) */
.prose { max-width: 820px; margin: 0 auto; padding-top: clamp(130px, 14vw, 190px); }
.prose__head { margin-bottom: 30px; }
.prose__body { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.prose__body h2, .prose__body h3 { font-family: var(--f-disp); font-weight: 500; color: var(--ink); line-height: 1.15; margin: 1.6em 0 .5em; }
.prose__body h2 { font-size: clamp(28px, 3vw, 40px); }
.prose__body h3 { font-size: clamp(22px, 2.2vw, 30px); }
.prose__body a { color: var(--copper); }
.prose__body img { max-width: 100%; height: auto; }
.prose__body .wp-block-gallery { gap: 8px; }

/* WordPress admin bar on top of the fixed header */
.admin-bar .bar { top: 32px; }
.admin-bar .sv:not(.sv--page) { top: 32px; }
@media (max-width: 782px) { .admin-bar .bar, .admin-bar .sv:not(.sv--page) { top: 46px; } }

/* «Про мене»: the way to the contacts page */
.about { align-items: start; }                        /* both columns from the top: the photo goes up, no empty band */
.about__more { margin-top: clamp(34px, 4vw, 56px); padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); }
.about__more .about__p:first-child { margin-top: 0; }
/* phones/tablets: the clients' logo ribbon (no wrap) stretched the single grid column wider than the screen and the
   text of «Про мене» was cut on the right (Dima 11-10) — the column may not grow past the screen */
@media (max-width: 980px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about > * { min-width: 0; }
}
@media (max-width: 700px) {
  .about__me2 { width: 48%; right: 3%; }          /* the tilted second photo stays inside the screen and off the signature */
}
/* left column under the photo: help with preparation / organisation, marked by a copper rule */
.about__note { margin-top: clamp(30px, 3.4vw, 48px); padding: 4px 0 4px clamp(18px, 1.6vw, 24px); border-left: 2px solid var(--copper); max-width: 48ch; }
.about__note .about__p { margin: 0; }
.about__cta { margin: 20px 0 0; }

/* Contacts page: photo, name, channels — nothing else */
.reach__soc { margin: 18px 0 22px; }
.reach__soc a { color: var(--ink); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .reach__soc a:hover { color: var(--copper); border-color: var(--copper); background: none; } }
.reach__cta { margin: 0 0 18px; }
.reach .sec__title { margin-bottom: 6px; }

/* footer: developer credit (same on all our client sites) */
.footer-dev-credit { display: flex; align-items: center; gap: 7px; flex: none; color: inherit; text-decoration: none; transition: opacity .15s ease; }
.footer-dev-credit:hover { opacity: .8; text-decoration: underline; }
.footer-dev-credit b { font-weight: 600; color: var(--cream, #f8f4ee); }
.footer-dev-credit img { height: 15px; width: auto; display: block; }

/* booking step 2: quick periods (small, one row) + the hours 10:00–18:00 the visitor picks (Dima 11-10) */
.bstep .slots, .bstep[data-step="2"] .slots { display: block !important; margin-top: 10px; }
.periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.period-b { border: 1px solid var(--line); background: transparent; padding: 7px 6px; font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-radius: 2px; transition: background .2s, color .2s, border-color .2s; }
.period-b:hover:not(:disabled) { border-color: var(--copper); color: var(--copper); }
.bstep .period-b[aria-pressed="true"] { background: var(--copper); border-color: var(--copper); color: var(--cream) !important; -webkit-text-fill-color: var(--cream); }
.period-b:disabled { opacity: .35; cursor: default; }
.tslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.tslot { border: 1px solid var(--line); background: #fff; padding: 10px 4px; font: 600 14px var(--f-body); color: var(--ink); border-radius: 2px; transition: background .2s, border-color .2s, box-shadow .2s; }
.tslot:hover { border-color: var(--ink); }
.tslot.is-period { background: rgba(151, 84, 47, .07); border-color: rgba(151, 84, 47, .45); }
.tslot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tslots__none { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }

/* booking consent line + footer link to the privacy policy */
.send__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.send__note a, .foot__privacy { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot__privacy:hover, .send__note a:hover { color: var(--copper-l); }

/* booking: the send buttons stay still (the magnetic pull of other buttons made them «jump» under the cursor) */
.send .btn { translate: none !important; }

/* booking: the request is being sent */
.send .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* hero frames chosen by the owner: the out-of-focus layer is the same photo blurred by CSS (theme frames have a ready blur file) */
.hero__shot img.is-blur.is-gen { filter: blur(18px) saturate(1.05); transform: scale(1.06); }

/* ---------- phones: booking + logos + lens (Dima 2026-11-11) ---------- */
@media (max-width: 700px) {
  /* step 1: duration and people side by side */
  .bstep[data-step="1"] .row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .bstep[data-step="1"] .row .field { min-width: 0; }
  .bstep[data-step="1"] .stepper { width: 100%; display: grid; grid-template-columns: 38px 1fr 38px; }
  .bstep[data-step="1"] .stepper button { width: 38px; }
  .bstep[data-step="1"] .stepper output { min-width: 0; text-align: center; }
  /* step 2: the sun block centred, the arc higher (less empty space) */
  .sun { text-align: center; }
  .sun__arc { display: block; margin: -14px auto 0; max-width: 300px; }
  .sun__txt { text-align: center; margin-top: 2px; }
  .periods, .tslots { text-align: left; }
  /* step 3: one centred send button, Telegram / Viber below in one row; no «Як зручніше:» */
  .send { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .send .send__l { display: none !important; }
  .send [data-via="send"] { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .send .btn { width: 100%; justify-content: center; }
  .send__note { text-align: center; }
  /* client logos run faster */
  .clients__track { animation-duration: 20s; }
  /* no 3D lens on phones */
  .lens { display: none !important; }
}
/* phones: sticky request button; hidden while the booking is on screen, the menu or a dialog is open */
.m-cta { display: none; }
@media (max-width: 700px) {
  .sun { margin-top: 0 !important; padding-top: 0 !important; }
  .m-cta { display: block; position: fixed; left: 16px; right: 84px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 120;
    padding: 15px 12px; background: var(--ink); color: var(--cream); text-align: center; text-decoration: none;
    font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; border-radius: 2px;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55); transition: opacity .25s, translate .25s; }
  .m-cta.is-off, .sv-open .m-cta, .on-menu .m-cta { opacity: 0; translate: 0 20px; pointer-events: none; }
}
/* phones: a smaller sticky button, «to top» on the same line to its right (centres aligned) */
@media (max-width: 700px) {
  .m-cta { right: 74px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: .12em; }
  .totop { right: 14px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: 48px !important; height: 48px !important; }
}
/* desktop: duration and people next to each other on the left, not split across the full width (Dima 2026-11-11) */
@media (min-width: 701px) {
  .bstep[data-step="1"] .row { display: flex !important; justify-content: flex-start; gap: 40px; flex-wrap: wrap; }
  .bstep[data-step="1"] .row .field { flex: 0 0 auto; width: auto; }
}
/* «Як зручніше:» removed everywhere, the buttons speak for themselves (Dima 2026-11-11) */
.send .send__l { display: none !important; }
/* footer (Dima 2026-11-11): logo top left + phone and mail under it; «Де» + socials on the right; no giant wordmark */
.foot__grid { grid-template-columns: 1fr auto; align-items: start; }
.foot__logo { display: inline-block; color: var(--cream); margin: 0 0 28px; text-decoration: none; }
.foot__logo svg { display: block; width: clamp(180px, 17vw, 250px); height: auto; }
.foot__big { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 10px; }
.foot__col { text-align: right; max-width: 400px; }
.foot__col .eyebrow { justify-content: flex-end; }
.foot__col .soc { justify-content: flex-end; }
.foot__base { margin-top: clamp(50px, 6vw, 90px); }
@media (max-width: 980px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__col { text-align: left; }
  .foot__col .eyebrow, .foot__col .soc { justify-content: flex-start; }
}
/* the round «to top» and the sticky phone button never cover the bottom line of the footer */
.foot__base { padding-right: 76px; }
@media (max-width: 700px) { .foot__base { padding-right: 0; } .foot { padding-bottom: 96px; } }
/* footer: the logo centred on its own row above the two columns (Dima 2026-11-11) */
.foot__grid > div:first-child { display: contents; }
.foot__grid { grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 0; }
.foot__logo { grid-column: 1 / -1; justify-self: center; margin: 0 0 clamp(36px, 4vw, 56px); }
.foot__grid .foot__big, .foot__grid .foot__links { grid-column: 1; }
.foot__grid .foot__col { grid-column: 2; grid-row: 2 / span 2; }
@media (max-width: 980px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__grid .foot__col { grid-column: 1; grid-row: auto; margin-top: 24px; }
}
/* footer logo centred above the columns, the columns stay plain blocks (phone and mail stay together) */
.foot__grid > div:first-child { display: block; }
.foot__grid { position: relative; padding-top: clamp(84px, 8vw, 116px); }
.foot__logo { position: absolute; top: 0; left: 50%; translate: -50% 0; margin: 0; }
.foot__grid .foot__col { grid-column: auto; grid-row: auto; }
@media (max-width: 980px) { .foot__grid .foot__col { margin-top: 24px; } }
/* footer v3 (Dima 2026-11-11): one horizontal line — «Контакт» + phone + mail | big centred logo | «Де» + text + socials; less empty space */
.foot { padding-top: clamp(56px, 6vw, 88px); }
.foot__grid { position: static; padding-top: 0; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(30px, 4vw, 70px); }
.foot__grid > div:first-child { display: block; }
.foot__logo { position: static; translate: none; justify-self: center; margin: 0; }
.foot__logo svg { width: clamp(220px, 22vw, 340px); }
.foot__big { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 8px; }
.foot__grid .foot__col { justify-self: end; margin-top: 0; }
.foot__base { margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 980px) {
  .foot__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .foot__logo { order: -1; }
  .foot__grid .foot__col { justify-self: start; }
}
.foot__logo { grid-column: auto !important; }   /* v3: the logo is the middle column, not a full row */