/* Venčanja: a wedding told in facing pages. */

/* ============ hero: the pair, each photo fills its half, opening from the seam; the title under them ============ */
.vh{align-items:start;padding-bottom:clamp(80px,8vw,140px)}
.vh-a,.vh-b{grid-row:1;height:clamp(440px,calc(100lvh - 250px),800px);overflow:hidden;background:var(--band)}
.vh-a{grid-column:full-start/m 7}
.vh-b{grid-column:m 7/full-end}
.vh-h{grid-column:m 1/m-end;grid-row:2;--span:12;--fmax:200px;letter-spacing:-.015em;line-height:.96;margin-top:clamp(18px,2vw,32px)}
.vh-q{grid-column:m 7/m-end;grid-row:3;margin-top:clamp(30px,3.4vw,56px)}
.vh-q p{font-weight:600;font-size:clamp(24px,2.3vw,38px);letter-spacing:-.005em;line-height:1.14;text-wrap:balance}
.vh-q figcaption{margin-top:16px;font-size:16px;font-weight:600;color:var(--ink2)}
.qm{color:#BDB8AF}
@media (max-width:899px){
  .vh{padding-bottom:70px}
  .vh-a,.vh-b{height:auto;aspect-ratio:3/5}
  .vh-a{grid-column:full-start/m 7}
  .vh-b{grid-column:m 7/full-end}
  .vh-h{--fmaxm:110px;margin-top:22px}
  .vh-q{grid-column:m 1/m-end;margin-top:24px}
  .vh-q p{font-size:clamp(22px,6.2vw,28px)}
}

/* ============ the statement, split across the seam ============ */
.vs{padding:clamp(70px,7vw,120px) 0 clamp(50px,5vw,90px)}
.vs-g{align-items:start}
.vs-a{grid-column:1/7;font-weight:700;font-size:clamp(30px,3.7vw,62px);letter-spacing:-.008em;line-height:1.04;color:var(--mute);text-wrap:balance}
.vs-b{grid-column:7/13;margin-top:1.3em;font-weight:800;font-size:clamp(30px,3.7vw,62px);letter-spacing:-.01em;line-height:1.02;text-wrap:balance}
.vs-b{transition-delay:.15s}
@media (max-width:899px){
  .vs-a,.vs-b{grid-column:1/-1;font-size:clamp(28px,8.2vw,40px)}
  .vs-b{grid-column:2/-1;margin-top:.8em}
}

/* ============ the process in six photos: three offset columns ============ */
.vg{padding:0 0 clamp(110px,11vw,190px)}
.vg-g{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.vg-col{display:flex;flex-direction:column;gap:var(--gut);min-width:0}
.vg-col:nth-child(2){padding-top:clamp(80px,11vw,190px)}
.vg-col:nth-child(3){padding-top:clamp(30px,4vw,70px)}
.vg-f{aspect-ratio:3/4;overflow:hidden;background:var(--band)}
.vg-col:nth-child(2) .vg-f{transition-delay:.12s}
.vg-col:nth-child(3) .vg-f{transition-delay:.24s}
@media (max-width:899px){
  .vg-g{grid-template-columns:1fr 1fr;gap:12px}
  .vg-col{display:contents}
  .vg-col:nth-child(1) .vg-f:nth-child(1){order:1;grid-column:1/-1;aspect-ratio:4/5}
  .vg-col:nth-child(2) .vg-f:nth-child(1){order:2}
  .vg-col:nth-child(3) .vg-f:nth-child(1){order:3;margin-top:40px}
  .vg-col:nth-child(2) .vg-f:nth-child(2){order:4;grid-column:1/-1;aspect-ratio:4/5}
  .vg-col:nth-child(1) .vg-f:nth-child(2){order:5}
  .vg-col:nth-child(3) .vg-f:nth-child(2){order:6;margin-top:40px}
  .vg-f{transition-delay:0s!important}
}

/* ============ the package: Venčanje or Venčanje plus ============ */
.vp{background:var(--band);padding:clamp(100px,10vw,170px) 0;align-items:center}
.vp-ph{grid-column:full-start/m 6;grid-row:1;aspect-ratio:4/5;overflow:hidden;background:var(--band2)}
.vp-r{grid-column:m 7/m-end;grid-row:1;min-width:0}
.vp-h{font-weight:600;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.005em}
.vp-sw{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:22px;padding:5px;border-radius:999px;background:#fff}
.vp-sw button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;font-size:16px;font-weight:600;color:var(--ink2);transition:background-color .35s,color .35s}
.vp-sw button:hover{color:var(--ink)}
.vp-sw button[aria-pressed="true"]{background:var(--red);color:#fff}
.vp-sw button[aria-pressed="true"] .chip{background:rgba(255,255,255,.2);color:#fff}
.vp-sw button[aria-pressed="true"] .chip i{background:#fff}
.vp-sw .chip{font-size:13px}
.vp-price{margin:.18em 0 .16em;padding-right:.06em;font-weight:800;font-size:clamp(84px,10.4vw,176px);letter-spacing:-.015em;line-height:.9}
.vp-pm{display:inline-grid;overflow:hidden;padding:.06em .06em .1em 0;margin:-.06em -.06em -.1em 0;vertical-align:top}
.vp-pm>span{grid-area:1/1;white-space:nowrap;transition:transform .9s var(--e1)}
.vp-p1{transform:translate3d(0,112%,0)}
.vp.is-plus .vp-p0{transform:translate3d(0,-112%,0)}
.vp.is-plus .vp-p1{transform:none}
.vp-list{font-size:var(--body);font-weight:500;line-height:1.4}
.vp-list li{display:flex;align-items:center;gap:14px;padding:7px 0}
.vp-list li::before{content:"";width:8px;height:8px;flex:none;background:var(--ink)}
.vp-x{color:#A29D94;transition:color .5s}
.vp-x::before{background:#CFCAC2!important;transition:background-color .5s}
.vp.is-plus .vp-x{color:var(--ink)}
.vp.is-plus .vp-x::before{background:var(--red)!important}
.vp-note{margin-top:18px;font-size:16px;line-height:1.5;color:var(--ink2);max-width:30em}
.vp-cta{margin-top:30px}
@media (max-width:899px){
  .vp{padding:0 0 90px}
  .vp-ph{grid-column:full-start/full-end;aspect-ratio:4/5}
  .vp-r{grid-column:m 1/m-end;grid-row:2;padding-top:40px}
  .vp-price{font-size:clamp(72px,22vw,110px)}
  .vp-sw button{padding:0 14px;font-size:15px}
}

/* ============ coming from abroad: the question across, the answer under it ============ */
.va{padding:clamp(110px,11vw,190px) 0 clamp(90px,9vw,150px);align-items:end}
.va-h{grid-column:m 1/m 11;grid-row:1;--span:10;--fmax:180px;line-height:.98}
.va-h .ln:nth-child(2){padding-left:calc((100% - 9 * var(--gut)) / 10 * 2 + 2 * var(--gut))}
.va-ph{grid-column:m 1/m 6;grid-row:2;margin-top:clamp(50px,5vw,90px);aspect-ratio:3/4;overflow:hidden;background:var(--band)}
.va-a{grid-column:m 7/m 12;grid-row:2;font-weight:600;font-size:clamp(26px,2.6vw,44px);letter-spacing:-.006em;line-height:1.1;text-wrap:balance;padding-bottom:.2em}
@media (max-width:899px){
  .va-h{grid-column:m 1/m-end;--span:12;--fmaxm:90px}
  .va-h .ln:nth-child(2){padding-left:0}
  .va-a{grid-column:m 1/m-end;grid-row:2;margin-top:28px;font-size:clamp(24px,6.6vw,30px)}
  .va-ph{grid-column:m 3/m-end;grid-row:3;margin-top:40px}
}

/* ============ closing: the ask, a photo locked to its last line ============ */
.vc{padding:clamp(20px,3vw,50px) 0 clamp(110px,11vw,180px);align-items:end}
.vc-h{grid-column:m 1/m 9;grid-row:1;--span:8;--fmax:190px;line-height:.98}
.vc-ph{grid-column:m 10/m-end;grid-row:1/3;align-self:end;aspect-ratio:3/4;overflow:hidden;background:var(--band)}
.vc-r{grid-column:m 1/m 7;grid-row:2;margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.vc-r p{font-size:var(--body);font-weight:500;max-width:24em}
@media (max-width:899px){
  .vc-h{grid-column:m 1/m-end;--span:12;--fmaxm:110px}
  .vc-r{grid-column:m 1/m-end;grid-row:2}
  .vc-ph{grid-column:m 7/m-end;grid-row:3;margin-top:36px}
}