/* ============================================================
   ОПТИМУС — страница «Бассейны»
   hero, детальные типы, сравнение, формы, отделка, оборудование
   ============================================================ */

/* ---------- Hero ---------- */
.pl-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--ink-d); }
.pl-hero #water-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.pl-hero .veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(3,11,15,.5) 0%, transparent 32%, transparent 46%, rgba(2,9,12,.88) 100%); }
.pl-hero .wrap { position: relative; z-index: 2; padding-top: clamp(140px,18vh,200px); padding-bottom: clamp(50px,7vw,84px); }
.pl-hero .eyebrow-row { color: var(--aqua-pale); margin-bottom: 22px; }
.pl-hero h1 { color: #fff; font-size: clamp(46px,8vw,124px); line-height: .98; }
.pl-hero h1 em { font-style: italic; color: var(--accent); }
.pl-hero .lead { color: rgba(255,255,255,.84); margin-top: 24px; max-width: 56ch; }

/* ---------- Детальные типы (чередование) ---------- */
.pl-types { background: var(--paper); }
.pl-type { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 84px; }
.pl-type:first-of-type { margin-top: 60px; }
.pl-type:nth-child(even) .pl-type-media { order: 2; }
.pl-type-media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--shadow-card); }
.pl-type-media .ph { position: absolute; inset: 0; }
.pl-type-media .tag { position: absolute; top: 22px; left: 22px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); }
.pl-type-media .tag.best { background: var(--cta); color: #fff; }
.pl-type-copy .eyebrow-row { color: var(--aqua-deep); }
.pl-type-copy h2 { font-size: clamp(34px,4.4vw,62px); margin-top: 16px; }
.pl-type-copy .lead { margin-top: 18px; }
.pl-type-specs { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.pl-type-specs .sp { display: flex; flex-direction: column; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.pl-type-specs .sp .k { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.pl-type-specs .sp .v { font-family: var(--font-body); font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--ink); margin-top: 5px; }
.pl-type-foot { margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pl-type-foot .price .pl { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.pl-type-foot .price .pv { font-family: var(--font-display); font-size: 38px; color: var(--ink); line-height: 1; margin-top: 3px; }
.pl-type-foot .price .pv small { font-size: .42em; color: var(--ink-soft); font-family: var(--font-body); }

/* ---------- Сравнение типов (таблица) ---------- */
.pl-compare { background: var(--mist); }
.pl-table { margin-top: 56px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.pl-trow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; }
.pl-trow + .pl-trow { border-top: 1px solid var(--hair); }
.pl-trow > div { padding: 18px 24px; font-size: 15px; }
.pl-trow .pl-th { font-weight: 700; color: var(--ink); }
.pl-trow .pl-val { color: var(--ink-soft); text-align: center; border-left: 1px solid var(--hair); }
.pl-trow.head { background: linear-gradient(155deg, var(--deep-2), var(--ink-d)); }
.pl-trow.head > div { color: #fff; font-family: var(--font-display); font-size: 21px; padding-block: 22px; }
.pl-trow.head .pl-val { border-left-color: rgba(140,230,242,.14); text-align: center; }
.pl-trow.head .pl-val.best { color: var(--aqua-2); }
.pl-trow:nth-child(even):not(.head) { background: var(--mist-2); }

/* ---------- Формы чаши ---------- */
.pl-shapes { background: var(--paper); }
.shapes-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.shape-card { background: var(--mist); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 32px 30px; transition: transform .5s var(--ease), box-shadow .5s, background .4s; }
.shape-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); background: #fff; }
.shape-card svg { width: 100%; height: 80px; color: var(--aqua-deep); }
.shape-card svg .fill { fill: rgba(22,188,212,.12); stroke: var(--aqua-deep); stroke-width: 2; }
.shape-card h4 { font-family: var(--font-body); font-weight: 800; font-size: 18px; margin-top: 20px; }
.shape-card p { font-size: 14px; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; }

/* ---------- Отделка ---------- */
.pl-finish { background: var(--mist); }
.finish-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.finish-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.finish-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.finish-swatch { height: 150px; position: relative; }
.finish-swatch::after { content: attr(data-sw); position: absolute; left: 16px; bottom: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); font-weight: 700; }
.sw-film { background: repeating-linear-gradient(120deg, rgba(255,255,255,.12) 0 18px, transparent 18px 38px), linear-gradient(150deg, #1bb5cf, #0c7e96); }
.sw-mosaic { background: repeating-linear-gradient(0deg, rgba(6,40,49,.35) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgba(6,40,49,.35) 0 1px, transparent 1px 14px), linear-gradient(135deg, #2bc4dc, #0e93ab); }
.sw-tile { background: repeating-linear-gradient(0deg, rgba(6,40,49,.3) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(6,40,49,.3) 0 1px, transparent 1px 30px), linear-gradient(135deg, #0e93ab, #0a5e72); }
.finish-card .body { padding: 22px 24px 26px; }
.finish-card h4 { font-family: var(--font-body); font-weight: 800; font-size: 18px; }
.finish-card p { font-size: 14px; color: var(--ink-soft); margin-top: 9px; line-height: 1.5; }

/* ---------- Оборудование ---------- */
.pl-options { background: var(--paper); }
.opt-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.opt-card { display: flex; gap: 18px; align-items: flex-start; background: var(--mist); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 26px 26px; transition: transform .5s var(--ease), box-shadow .5s, background .4s; }
.opt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); background: #fff; }
.opt-card .ic { width: 50px; height: 50px; border-radius: 13px; background: linear-gradient(150deg, rgba(22,188,212,.16), rgba(22,188,212,.06)); display: flex; align-items: center; justify-content: center; color: var(--aqua-deep); flex: none; }
.opt-card .ic svg { width: 26px; height: 26px; }
.opt-card h4 { font-family: var(--font-body); font-weight: 800; font-size: 16.5px; }
.opt-card p { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.5; }

@media (max-width: 1080px) {
  .pl-type { grid-template-columns: 1fr; gap: 32px; margin-top: 64px; }
  .pl-type:nth-child(even) .pl-type-media { order: -1; }
  .pl-type-media { aspect-ratio: 16/10; }
  .shapes-grid { grid-template-columns: 1fr 1fr; }
  .finish-grid { grid-template-columns: 1fr 1fr; }
  .opt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pl-trow { grid-template-columns: 1fr; }
  .pl-trow .pl-val { border-left: none; border-top: 1px solid var(--hair); text-align: left; }
  .pl-trow.head { display: none; }
  .pl-trow .pl-val::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink); }
  .pl-type-specs { grid-template-columns: 1fr; }
  .shapes-grid { grid-template-columns: 1fr; }
  .finish-grid { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
}