/* === DREAMY — popisky Technogel® MATRACE · nadstavba · v1 · 2026-10-11 ===
 * Patří za popisky.css + popisky-technogel.css (Záhlaví):
 *   <link rel="stylesheet" href="/user/documents/upload/styles/popisky-technogel-matrace.css?v=1">
 * JS pro videa (Zápatí): <script src="/user/documents/upload/styles/popisky-technogel.js?v=1"></script>
 * Vše je pod .dpd--tg a třídy začínají tgm-, polštáře Technogel ani zbytek webu neovlivní.
 */

/* Úvod matrace: širší fotka, matrace na podstavci */
.dpd--tg .tgm-hero .tg-hero-img { padding: 34px 18px 64px; }
.dpd--tg .tgm-hero .tg-hero-img img { max-width: 620px; }

/* Název modelu — italský význam */
.dpd p.tgm-name { margin-top: 18px !important; font: italic 400 15px/1.5 var(--tg-serif) !important; color: rgba(191,230,244,.78) !important; }
.tgm-name b { font-style: normal; font-weight: 400; color: #fff; }

/* Video (náhled + tlačítko; JS po kliknutí vloží přehrávač youtube-nocookie, bez JS odkaz na YouTube) */
.tgm-video { position: relative; border-radius: 22px; overflow: hidden; background: #0b1522; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -36px rgba(0,0,0,.7); }
.dpd .tgm-video img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.tgm-video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,28,46,0) 40%, rgba(15,28,46,.82) 100%); pointer-events: none; }
.dpd a.tgm-play { position: absolute; z-index: 2; left: 24px; bottom: 22px; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 14px; line-height: 1.25; color: #fff !important; text-decoration: none !important; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.dpd.dpd-js .tgm-video { cursor: pointer; }
.tgm-play::before { content: ""; grid-row: span 2; width: 58px; height: 58px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat; border: 1px solid rgba(255,255,255,.55); background-color: rgba(15,28,46,.45); transition: transform .3s, background-color .3s; }
.tgm-video:hover img { transform: scale(1.035); }
.tgm-video:hover .tgm-play::before { transform: scale(1.08); background-color: #d90074; border-color: #d90074; }
.tgm-play span { grid-column: 2; align-self: start; font-size: 12.5px; font-weight: 400; color: rgba(226,236,245,.8); }
.dpd a.tgm-play { grid-template-rows: auto auto; align-content: center; }
.tgm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.tgm-video.is-playing::before, .tgm-video.is-playing .tgm-play { display: none; }
.dpd p.tgm-video-note { margin-top: 10px !important; font-size: 12.5px !important; color: var(--muted) !important; }
.tg-dark p.tgm-video-note { color: rgba(191,230,244,.6) !important; }
.tgm-vid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }

/* Světlý panel (Purotex + video) */
.tgm-panel { border-radius: 28px; background: var(--tg-mist); padding: 48px 50px; }
.tgm-panel .dpd-checks { margin-top: 18px !important; }

/* Vlastnosti modelu — 3 karty s velkým číslem */
.tgm-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px !important; }
.tgm-keys li { position: relative; padding: 26px 24px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--tg-line); }
.tgm-keys li > b { display: block; font: 400 44px/1 var(--tg-serif); color: var(--tg-navy); letter-spacing: -.01em; }
.tgm-keys li > b small { font: 600 15px Rubik, sans-serif; color: var(--tg-gel-2); margin-left: 4px; letter-spacing: 0; }
.tgm-keys h3 { margin-top: 14px !important; font-size: 17px !important; font-weight: 600 !important; color: var(--ink) !important; }
.tgm-keys p { margin-top: 6px !important; font-size: 15px; line-height: 1.55; }
.tgm-keys li.is-gel { background: var(--tg-navy); border-color: var(--tg-navy); }
.tgm-keys li.is-gel > b { color: #7fd3f0; }
.dpd .tgm-keys li.is-gel h3 { color: #fff !important; }
.tgm-keys li.is-gel p { color: rgba(226,236,245,.8); }
.tgm-keys li.is-gel > b small { color: #bfe6f4; }

/* Dva potahy */
.tgm-covers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 28px !important; }
.tgm-covers li { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid var(--tg-line); background: #fff; }
.tgm-sw { height: 120px; font-size: 0; line-height: 0; }
.tgm-sw--outer { background: linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px) 0 0 / 16px 16px, radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f1efea 70%, #e4ded4 100%); }
.tgm-sw--inner { background: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 2px, transparent 2px 9px), linear-gradient(120deg, #dff3fb 0%, #9fd9ef 55%, #5cc4ea 100%); }
.tgm-covers .tgm-cv { padding: 22px 22px 24px; }
.dpd p.tgm-cv-tag { font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--tg-gel-2) !important; margin-bottom: 6px !important; }
.tgm-cv h3 { font-family: var(--tg-serif) !important; font-weight: 400 !important; font-size: 23px !important; }
.tgm-cv p { margin-top: 8px !important; font-size: 15px; line-height: 1.55; }
.tgm-tip { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px !important; padding: 18px 20px; border-radius: 18px; background: var(--tg-mist); }
.tgm-tip > i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: italic 400 19px var(--tg-serif); color: #fff; background: var(--tg-gel-2); }
.tgm-tip p { font-size: 15px; line-height: 1.55; }
.tgm-tip b { color: var(--ink); }

/* Tuhost — stupnice 1–5, dostupné tuhosti zvýrazněné */
.tgm-firm { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 14px; margin-top: 28px !important; }
.tgm-firm > li { padding: 24px 22px 22px; border-radius: 22px; border: 1px solid var(--tg-line); background: #fff; }
.tgm-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 16px !important; }
.tgm-scale i { height: 10px; border-radius: 5px; background: #e3eaf0; font-size: 0; line-height: 0; }
.tgm-scale i.on { background: linear-gradient(90deg, #5cc4ea, #137cab); }
.tgm-firm h3 { font-family: var(--tg-serif) !important; font-weight: 400 !important; font-size: 23px !important; }
.dpd p.tgm-firm-lvl { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--tg-gel-2) !important; margin-bottom: 4px !important; }
.tgm-firm p { font-size: 15px; line-height: 1.55; margin-top: 6px !important; }
.dpd p.tgm-scale-lbl { display: flex; justify-content: space-between; margin-top: 10px !important; font-size: 12px !important; color: var(--muted) !important; }

/* Technický list (jako štítek u prémiového textilu) */
.tgm-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin-top: 26px !important; border-top: 1px solid var(--tg-line); }
.tgm-spec li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--tg-line); font-size: 15px; }
.tgm-spec li span:first-child { color: var(--muted); }
.tgm-spec li span:last-child { color: var(--ink); font-weight: 600; text-align: right; }

@media (max-width: 991px) {
  .tgm-vid { grid-template-columns: 1fr; gap: 24px; }
  .tgm-keys { grid-template-columns: 1fr; }
  .tgm-keys li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .tgm-keys li > b { grid-row: span 2; font-size: 36px; }
  .tgm-keys h3 { margin-top: 2px !important; }
}
@media (max-width: 767px) {
  .tgm-video { border-radius: 18px; }
  .tgm-panel { padding: 28px 18px; border-radius: 22px; }
  .dpd a.tgm-play { left: 16px; bottom: 14px; gap: 10px; font-size: 14px; }
  .tgm-play::before { width: 46px; height: 46px; background-size: 20px; }
  .tgm-play span { display: none; }
  .tgm-keys li { grid-template-columns: 84px minmax(0, 1fr); padding: 18px 16px; border-radius: 18px; }
  .tgm-keys li > b { font-size: 28px; }
  .tgm-keys li > b small { display: block; margin: 4px 0 0; font-size: 12px; }
  .tgm-covers, .tgm-firm { grid-template-columns: 1fr; }
  .tgm-covers li { display: grid; grid-template-columns: 84px minmax(0, 1fr); border-radius: 18px; }
  .tgm-sw { height: auto; min-height: 100%; }
  .tgm-covers .tgm-cv { padding: 16px 16px 18px; }
  .tgm-cv h3 { font-size: 20px !important; }
  .tgm-firm > li { padding: 18px 16px; border-radius: 18px; }
  .tgm-spec { grid-template-columns: 1fr; }
  .tgm-spec li { font-size: 14px; padding: 12px 0; }
}