/* Solutions page only: all solution cards on one dark band (no hero). Continues the main Solutions scene ("솔루션 전체 보기"):
   white cards on --night. Cards: src/partials/solutions.mjs ({"view": "page"}), motion: solutions.js.
   Source of values: docs/design-concept-main.md section 10 */

/* Band. At least one screen tall; the menu aurora (Solutions = stops 2 + 3) glows behind the title and the first row */
.sl{--aur-a:var(--aur-2);--aur-b:var(--aur-3);--aur-a-op:.2;--aur-b-op:.14;
  --aur-a-x:52%;--aur-a-y:-220px;--aur-a-w:1150px;--aur-a-h:560px;--aur-b-x:-12%;--aur-b-y:34%;--aur-b-w:820px;--aur-b-h:520px;
  min-height:100vh;min-height:100svh;padding:216px var(--gutter) 160px;background:var(--night);color:#fff}
.sl :focus-visible{outline-color:#fff}

/* Head: the Solutions title (Sora 52px, design-rules.md 2) rises in line by line, the lead fades in after it (.ready, solutions.js) */
.sl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px}
.sl-title{margin:0;font-family:Sora,sans-serif;font-size:52px;font-weight:400;letter-spacing:-.02em;line-height:1.2}
.sl .ln{display:block;overflow:hidden;padding-bottom:.06em}
.sl .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.sl.ready .ln>span{transform:none}
.sl-lead{margin:0;max-width:600px;font-size:18px;line-height:1.75;font-weight:500;color:rgba(255,255,255,.9);text-wrap:pretty}
.sl .fade{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.sl.ready .fade{opacity:1;transform:none}

/* Grid: 3 x 3 solution cards, the custom development card runs as a band under them (two columns: it is the tenth cell).
   All cards come in together when the page opens (.in from solutions.js), in a diagonal wave (--d, solutions.js) */
.slg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* Card: white face on --night. Inside, rhythm and type: components.css "Solution card" (shared with the main carousel) */
.slc{border-radius:24px;background:#fff;border:1px solid #E1E7EA;color:var(--ink);scroll-margin-top:120px}
/* Entrance (.reveal.in from solutions.js; --d per card from solutions.js, a diagonal wave from the top left):
   the card never shows as an empty white face: the copy starts with the face and the photo opens fast at first.
   1 the card face rises (1.2s, fades in .8s) > 2 from +.04s the label row, title and description rise one after another,
   .06s apart (fade .6s) > 3 from +.08s the photo opens from the bottom up (clip, 1.1s, quick start then a long settle)
   and settles from 1.12x (1.6s) > 4 the link comes in last (+.4s), as the photo finishes opening.
   Solutions page only (main cards keep their own carousel motion).
   The photo settles with `scale` and the copy rises with `translate`, so the hover zoom (transform) is untouched. */
.slc.reveal{transform:translateY(56px);transition:opacity .8s var(--ease) var(--d,0s),transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s),box-shadow .6s var(--ease),translate .6s var(--ease)}
.slc.reveal.in{transform:none}
.slc.reveal>*{--td:calc(var(--d,0s) + .04s + var(--k,0) * .06s)}
.slc.reveal .slc-top,.slc.reveal .slc-dot{--k:0}
.slc.reveal h2{--k:1}
.slc.reveal p{--k:2}
.slc.reveal .slc-go,.slc.reveal .btn{--k:6}
@media (prefers-reduced-motion:no-preference){
  .slc.reveal .slc-img{clip-path:inset(0 0 0 0 round 16px);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .08s)}
  .slc.reveal .slc-img img{transition:transform 1.2s var(--ease),scale 1.6s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .08s)}
  .slc.reveal :is(.slc-top,.slc-dot,h2,p){transition:opacity .6s var(--ease) var(--td),translate 1.2s cubic-bezier(.16,1,.3,1) var(--td)}
  .slc.reveal .slc-go{transition:color .6s var(--ease),opacity .6s var(--ease) var(--td),translate 1.2s cubic-bezier(.16,1,.3,1) var(--td)}
  .slc.reveal .btn{transition:background .6s var(--ease),color .6s var(--ease),opacity .6s var(--ease) var(--td),translate 1.2s cubic-bezier(.16,1,.3,1) var(--td)}
  .slc.reveal:not(.in) .slc-img{clip-path:inset(100% 0 0 0 round 16px)}
  .slc.reveal:not(.in) .slc-img img{scale:1.12}
  .slc.reveal:not(.in)>:not(.slc-img){opacity:0;translate:0 16px}
}
.slc-no{color:var(--teal)}
.slc p{color:var(--ink-2)}
.slc-img{background:#DCE4E8}
.slc-go{color:var(--teal)}
/* Hover: the card lifts a little (translate, so the entrance transform is untouched) and its shadow deepens */
.slc:hover{box-shadow:0 18px 40px rgba(3,18,26,.08);translate:0 -6px}
.slc:hover .slc-go{color:var(--deep)}
/* Card opened from a link (solutions.html#forklift ...): point teal ring */
.slc:target{box-shadow:0 0 0 3px #35B7D9}

/* Last cell: custom development. Dark glass card (the main Solutions inactive card), lime signal dot.
   Three columns: a band across the grid, dot | title over description | button. Two columns and less: a card with the copy at the bottom */
.slc-ask{background:rgba(6,24,32,.62);border-color:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-height:420px}
.slc-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(143,195,31,.16)}
.slc-ask h2{margin-top:auto}
@media (min-width:1181px){
  .slc-ask{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:40px 48px}
  .slc-ask .slc-dot{grid-row:1/3;margin-left:6px}
  .slc-ask h2{margin:0}
  .slc-ask .btn{grid-column:3;grid-row:1/3;margin:0}
}
.slc-ask p{flex-grow:0;color:rgba(255,255,255,.78)}
.slc-ask .btn{align-self:flex-start;margin-top:var(--s-go)}
.slc-ask:hover{box-shadow:none;translate:none}

@media (prefers-reduced-motion:reduce){
  .sl .ln>span,.sl .fade,.slc.reveal{transform:none;opacity:1;transition:none}
  .slc:hover{translate:none}
}
@media (max-width:1440px){
  .slg{gap:20px}
}
@media (max-width:1180px){
  .sl{padding-top:180px}
  .sl-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:48px}
  .slg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slc-ask{min-height:0}
  /* two wide columns: back to the full padding and steps, 26px title */
  .slc{--pad:32px;--s-title:28px;--s-img:28px;--s-go:24px;--fs-title:26px}
}
@media (max-width:720px){
  .sl{padding:136px var(--gutter) 100px}
  .sl-title{font-size:40px}
  .sl-lead{font-size:16px}
  .sl-head{margin-bottom:36px}
  .slg{grid-template-columns:1fr;gap:16px}
  /* one column: the shared mobile steps (components.css) */
  .slc{--pad:24px 20px;--s-title:20px;--s-desc:8px;--s-img:20px;--s-go:18px;--fs-title:22px}
  .slc-ask h2{margin-top:24px}
}