/* ==========================================================================
   Technique (Figma 06 Technique) — js/screens/technique.js
   ========================================================================== */

/* ---------- Page ---------- */
.tq-scroller { padding-bottom: 46px; }

/* Hero 393×356, square image pulled up 30px */
.tq-hero { position: relative; height: 356px; overflow: hidden; background: var(--neutral-light); }
.tq-hero img { position: absolute; left: 0; top: -30px; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: bottom; }

.tq-content { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 16px 0; }

.tq-intro { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.tq-sticker {
  display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 8px;
  background: var(--tomato); color: #fff; backdrop-filter: blur(8px);
  font: 700 12px/1 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.tq-title { font: 700 36px/40px var(--font-serif); color: #232323; text-align: center; width: 100%; }
.tq-meta { display: flex; align-items: center; gap: 8px; }
.tq-meta .tag-v2 { line-height: 15px; }
.tq-meta > .read-time { font: 400 14px/normal var(--font-sans); color: var(--neutral-dark); white-space: nowrap; }

.tq-rule { width: 120px; height: 0; margin: 0; border: 0; border-top: 1px solid var(--tomato); margin-bottom: -1px; }

/* Cards */
.tq-card { position: relative; width: 100%; background: #fff; border: 1px solid var(--neutral-light-shade); border-radius: 8px; overflow: hidden; }

/* Overview video card 361×260 */
.tq-video { height: 260px; }
.tq-video-media { position: relative; margin: -1px -1px 0; height: 203px; overflow: hidden; background: var(--neutral-light); }
.tq-video-media > img { position: absolute; left: -13px; top: -10px; width: calc(100% + 26px); height: 224px; object-fit: cover; }
.tq-play {
  position: absolute; left: 50%; top: calc(50% + .5px); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 24px; height: 42px;
  background: rgba(255,255,255,.95); border-radius: 48px;
  font: 700 18px/25.2px var(--font-sans); color: var(--caviar); white-space: nowrap;
  transition: transform .15s ease;
}
.tq-play:active { transform: translate(-50%, -50%) scale(.96); }
.tq-video-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px 0; }
.tq-video-label { font: 700 16px/22.4px var(--font-sans); color: var(--caviar); }
.tq-video-dur { display: flex; align-items: center; gap: 8px; font: 500 12px/normal var(--font-sans); letter-spacing: 1.2px; color: var(--neutral-dark); white-space: nowrap; }

/* Slideshow entry card 361×357 */
.tq-slides { padding: 15px 15px 15px; }
.tq-slides-grid { display: grid; grid-template-columns: 1fr 91px; gap: 8px; cursor: pointer; }
.tq-slides-main { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--neutral-light); }
.tq-slides-main img { position: absolute; top: 0; left: calc(50% - 5.05%); height: 100%; width: 166.42%; transform: translateX(-50%); object-fit: cover; }
.tq-slides-thumbs { display: flex; flex-direction: column; justify-content: space-between; }
.tq-slides-thumbs img { width: 91px; height: 71px; border-radius: 8px; object-fit: cover; }
.tq-slides-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin-top: 16px;
  border: 1px solid var(--caviar); border-radius: 24px; padding: 0 24px;
  font: 700 16px/22.4px var(--font-sans); color: var(--caviar); white-space: nowrap;
}
.tq-slides-cta:active { background: var(--neutral-light); }
.tq-slides-cap { margin-top: 16px; font: 400 14px/22.75px var(--font-sans); color: var(--neutral-dark); text-align: center; }

/* Next section 361×385 */
.tq-next {
  margin: 37px 16px 0; padding: 16px; border-radius: 8px; background: var(--neutral-light);
  display: flex; flex-direction: column; gap: 16px;
}
.tq-next-label { font: 700 16px/26px var(--font-sans); color: var(--caviar); }
.tq-next-card { position: relative; display: block; height: 247px; background: #fff; border-radius: 8px; overflow: hidden; }
.tq-next-img { position: absolute; left: 0; right: 0; top: 0; height: 103px; overflow: hidden; }
.tq-next-img img { position: absolute; left: -6.73%; top: -9.7px; width: 113.5%; height: 210px; object-fit: cover; }
.tq-next-num {
  position: absolute; left: calc(50% + .5px); top: 86px; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--caviar);
  display: flex; align-items: center; justify-content: center;
  font: 700 20px/20px var(--font-sans); color: #fff;
}
.tq-next-title {
  position: absolute; left: 0; right: 0; top: 134px; text-align: center;
  font: 700 32px/36.16px var(--font-serif); color: var(--caviar); white-space: nowrap;
}
.tq-next-meta {
  position: absolute; left: 0; right: 0; top: 179px; display: flex; align-items: center; justify-content: center; gap: 4px;
  font: 400 14px/16px var(--font-sans); color: var(--neutral-dark);
}
.tq-next-bars { position: absolute; left: 16px; right: 16px; top: 219px; display: flex; gap: 6px; }
.tq-next-bars i { flex: 1 1 0; height: 4px; background: var(--neutral-light-shade); }
.tq-next-bars i:first-child { border-radius: 100px 0 0 100px; }
.tq-next-bars i:last-child { border-radius: 0 100px 100px 0; }
.tq-next-bars i.done { background: var(--success); }
.tq-next-btn {
  display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 40px;
  border: 1px solid var(--caviar); border-radius: 30px; background: var(--neutral-light);
  font: 700 18px/25.2px var(--font-sans); color: var(--caviar);
}
.tq-next-btn:active { background: #e9e8e6; }

/* ---------- Step-by-step slideshow (MVP 3…11) ---------- */
.screen.tq-ss { display: flex; flex-direction: column; overflow: hidden; }
.tq-ss-close { position: absolute; left: 16px; top: calc(var(--safe-top) + 8px); z-index: 5; width: 40px; height: 40px; border-radius: 50%; }
.tq-ss-close img { width: 40px; height: 40px; }
.tq-ss-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.tq-ss-viewport.dragging { cursor: grabbing; }
.tq-ss-track { display: flex; height: 100%; will-change: transform; }
.tq-ss-slide {
  flex: 0 0 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding-bottom: 24px;
}
.tq-ss-slide::-webkit-scrollbar { display: none; }
.tq-ss-img { position: relative; width: 100%; height: calc(var(--safe-top) - 54px + 395px); overflow: hidden; background: var(--neutral-light); }
.tq-ss-img img { position: absolute; right: 0; top: 0; width: calc(100% + 2px); height: 100%; object-fit: cover; pointer-events: none; }
.tq-ss-text { margin: 32px 16px 0; font: 400 24px/1.4 var(--font-sans); color: var(--caviar); }

.tq-ss-stepper {
  position: relative; flex-shrink: 0; background: var(--bg);
  height: 72px; box-sizing: content-box; padding-bottom: max(calc(var(--safe-bottom) - 34px), 0px);
  display: flex; align-items: center; gap: 0; padding-left: 16px; padding-right: 16px;
}
.tq-ss-bars { position: absolute; left: 0; right: 0; top: 0; display: flex; }
.tq-ss-bars i { flex: 1 1 0; height: 3px; background: var(--neutral-light-shade); transition: background .25s; }
.tq-ss-bars i.on { background: var(--success); }
.tq-ss-prev {
  width: 40px; height: 40px; border-radius: 100px; background: var(--caviar); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.tq-ss-prev img { transform: rotate(180deg); }
.tq-ss-prev:disabled { background: var(--neutral-light-shade); cursor: default; }
.tq-ss-count { flex: 1 1 auto; text-align: center; font: 400 18px/29.25px var(--font-sans); color: var(--caviar); white-space: nowrap; }
.tq-ss-next {
  position: relative; width: 140px; height: 40px; border-radius: 24px; background: var(--caviar); flex-shrink: 0;
  font: 700 16px/22.4px var(--font-sans); color: #fff;
}
.tq-ss-next span { position: absolute; left: 50%; top: calc(50% + .5px); transform: translate(-50%, -50%); }
.tq-ss-next img { position: absolute; right: 16px; top: 8px; }
.tq-ss-next.done img { display: none; }
.tq-ss-prev:not(:disabled):active, .tq-ss-next:active { transform: scale(.96); }

/* Classes without Figma crops (e.g. Basic Knife Skills) */
.tq-hero.cover img { top: 0; height: 100%; aspect-ratio: auto; object-position: center; }
.tq-slides-grid.single { grid-template-columns: 1fr; }
.tq-slides-grid.single .tq-slides-main { aspect-ratio: 3 / 2; }
.tq-slides-grid.cover .tq-slides-main img { left: 0; width: 100%; transform: none; }
.tq-next-img img.cover { left: 0; top: 0; width: 100%; height: 100%; }
.tq-end { margin: 37px 16px 0; display: flex; flex-direction: column; gap: 16px; }