/* Owner-selected 21st.dev Stacking Cards, adapted to Molti's square monochrome design. */
.production-stack { background:#fff; padding-block:clamp(64px,7vw,112px) 0; }
.production-stack .production-heading { font-family:var(--display); font-size:clamp(38px,5.1vw,82px); font-weight:300; line-height:1.02; letter-spacing:-.018em; max-width:none; text-wrap:balance; margin:0; }
.production-lead { margin-top:24px; font-size:clamp(17px,1.4vw,22px); line-height:1.55; color:#626262; }
.production-stack .production-head { max-width:none; }
.stacking-cards { position:relative; padding-inline:var(--gutter); }
.stacking-slot { height:calc(100svh - var(--header)); position:sticky; top:var(--header); display:flex; align-items:center; justify-content:center; }
.stacking-card { position:relative; display:grid; grid-template-columns:minmax(0, .85fr) minmax(0,1.4fr); gap:clamp(24px,4vw,68px); width:100%; height:clamp(460px,70svh,760px); padding:clamp(24px,3vw,48px); transform-origin:top center; border-radius:0; overflow:hidden; }
.stacking-card--dark { background:#171717; color:rgb(255 255 255 / .78); }
.stacking-card--light { background:#e8e8e8; color:rgb(21 21 21 / .78); }
.stacking-card--grey { background:#383838; color:rgb(255 255 255 / .78); }
.stacking-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }
.stacking-copy h3 { font-family:var(--display); font-size:clamp(36px,4vw,66px); line-height:1.03; font-weight:300; letter-spacing:-.015em; text-wrap:balance; margin:0 0 24px; }
.stacking-copy > p { font-size:clamp(16px,1.25vw,20px); line-height:1.6; margin:0; opacity:1; }
.stacking-action { display:inline-flex; align-items:center; gap:28px; min-height:48px; margin-top:28px; padding-block:8px; font-size:16px; border-bottom:1px solid currentColor; }
.stacking-card a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.stacking-action span:last-child { font-size:25px; transition:transform .25s; }
.stacking-action:hover span:last-child { transform:translate(3px,-3px); }
.stacking-project { min-width:0; min-height:0; display:flex; flex-direction:column; }
.stacking-photo { flex:1; min-height:0; overflow:hidden; background:#bcbcbc; border-radius:0; }
.stacking-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:none; }
.stacking-caption { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; }
.stacking-caption > div > span { display:block; font-size:clamp(18px,1.5vw,24px); line-height:1.2; }
.stacking-caption p { font-size:14px; line-height:1.4; margin-top:6px; opacity:.85; }
.stacking-photo-arrow { font-size:32px; line-height:1; }
.production-more { display:flex; justify-content:flex-end; padding-block:32px 64px; background:#fff; position:relative; z-index:5; }
.production-more a { display:inline-flex; align-items:center; justify-content:space-between; gap:40px; background:#151515; color:#fff; padding:20px 28px; min-height:58px; }
@media(min-width:701px) and (max-height:720px){ .stacking-card { height:calc(100svh - var(--header) - 96px); } .stacking-copy h3 { font-size:clamp(30px,3.5vw,52px); margin-bottom:16px; } .stacking-copy > p { font-size:16px; } }
@media(max-width:700px){
  .production-stack { padding-top:56px; }
  .production-lead { margin-top:18px; }
  .stacking-slot { height:calc(100svh - var(--header)); }
  .stacking-card { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:22px; height:calc(100svh - var(--header) - 74px); max-height:780px; padding:22px; }
  .stacking-copy h3 { font-size:clamp(30px,7vw,42px); margin-bottom:14px; text-wrap:pretty; }
  .stacking-copy > p { font-size:15px; line-height:1.5; }
  .stacking-action { display:none; }
  .stacking-caption { padding-top:12px; }
  .stacking-caption > div > span { font-size:18px; }
  .stacking-caption p { font-size:12px; margin-top:4px; }
  .production-more { padding-block:24px 48px; }
}
@media(max-width:700px) and (max-height:700px){
  .stacking-slot { position:relative; top:0; height:auto; margin-block:24px; }
  .stacking-card { height:auto; top:0!important; transform:none!important; gap:24px; }
  .stacking-photo { aspect-ratio:4/3; flex:none; }
}
@media(prefers-reduced-motion:reduce){
  .stacking-slot { position:relative; top:0; height:auto; margin-block:28px; }
  .stacking-card { top:0!important; transform:none!important; }
  .stacking-photo img { transform:none!important; }
  .stacking-action span { transition:none!important; }
}
