/*
 * Doplnkové štýly pre všeobecné šablóny nového vzhľadu:
 * zoznamy (realizácie, rady a tipy, produkty) a detaily (realizácia, článok, produkt).
 * Nadväzuje na premenné a komponenty z main.css (scss/pages.scss).
 */

/* Admin taby nad obsahom */
.d-admin-region { padding-top: 16px; }

/* Menší H1 pre dlhé názvy detailov */
.not-front .d-title-md { font-size: 46px; line-height: 1.12; margin: 0 0 22px; }

/* Filter kategórií z Better Exposed Filters (odkazy) */
.d-exposed-filters { min-width: 0; }
.d-exposed-filters form,
.d-exposed-filters .form--inline,
.d-exposed-filters .form-item { margin: 0; padding: 0; }
.d-exposed-filters label,
.d-exposed-filters .form-actions,
.d-exposed-filters input[type="submit"] { display: none !important; }
.d-exposed-filters .bef-links ul {
  display: flex; gap: 24px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
}
.d-exposed-filters .bef-links ul::-webkit-scrollbar { display: none; }
.d-exposed-filters .bef-links li { margin: 0; padding: 0; list-style: none; }
.d-exposed-filters .bef-links a {
  display: block; white-space: nowrap; padding: 16px 0; margin-bottom: -1px;
  border-bottom: 3px solid transparent; color: #5c6871; font-size: 14px; text-decoration: none;
}
.d-exposed-filters .bef-links a:hover { color: #246cb6; }
.d-exposed-filters .bef-links a.bef-link--selected { color: #246cb6; border-bottom-color: #246cb6; font-weight: 600; }
.d-empty { color: #63717c; font-size: 16px; }

/* Text v hero detailu */
.not-front .d-hero-text { font-size: 16px; line-height: 1.75; color: #52616b; max-width: 600px; }
.not-front .d-hero-text p { margin: 0 0 14px; }
.not-front .d-hero-text p:last-child { margin-bottom: 0; }
.d-page-hero-image a { display: block; }

/* Štítky (dodané produkty) */
.d-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.d-tag-list a {
  display: inline-block; padding: 7px 12px; border-radius: 3px; background: #f3f9ff; border: 1px solid #cfe8ff;
  color: #246cb6; font-size: 12px; font-weight: 600; text-decoration: none;
}
.d-tag-list a:hover { border-color: #246cb6; }

/* Fotogaléria */
.d-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.d-gallery a { position: relative; display: block; overflow: hidden; border-radius: 7px; background: #eaf0f4; }
.d-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.d-gallery a:hover img { transform: scale(1.035); }
.d-calc-gallery .d-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.d-calc-gallery .d-gallery a:first-child { grid-column: 1 / -1; }

/* Článok */
.d-article-perex p { margin: 0 0 12px; }
.not-front .d-article-perex { max-width: 760px; font-size: 18px; }
.d-article-cover { margin: 0; }
.d-article-cover img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 8px; }
.not-front .d-section--article { padding-top: 64px; }
.d-article-body ul, .d-article-body ol { margin: 0 0 24px; padding-left: 22px; }
.d-article-body li { margin-bottom: 8px; }
.d-article-body h3 { font-size: 22px; margin: 30px 0 14px; }
.d-article-body a { color: #246cb6; }
.d-article-body img { border-radius: 7px; }
.d-article-back { margin-top: 20px; padding-top: 28px; border-top: 1px solid #d8e5ef; }
.d-multi-content + .d-multi-content { margin-top: 32px; }
.d-multi-content .d-gallery { margin: 10px 0 30px; }
.d-recommended { margin: 36px 0; padding: 28px; border-radius: 8px; background: #f3f9ff; }
.d-recommended .d-card-grid { --bs-gutter-x: 20px; }
.d-recommended h3 { font-size: 18px !important; }

/* Produkt – výhody */
.d-benefit-icon img, .d-benefit-icon svg { width: 56px; height: 56px; object-fit: contain; }
.d-benefit p p { margin: 0; }

/* Produkt – možnosti montáže */
.d-option-grid { row-gap: 28px; }
.d-option-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #d8e5ef; border-radius: 8px; overflow: hidden; }
.d-option-media { display: block; overflow: hidden; background: #eaf0f4; }
.d-option-media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.d-option-body { padding: 26px 28px 8px; }
.d-option-body h3 { font-size: 22px; margin: 0 0 12px; }
.not-front .d-option-body .d-prose { font-size: 15px; line-height: 1.75; }
.not-front .d-option-note { font-size: 14px; color: #63717c; }

/* Produkt – kalkulácia */
.d-calc { row-gap: 40px; align-items: flex-start; }
.d-calc-copy { padding-right: 50px; }
.not-front .d-calc-copy .d-prose { font-size: 16px; }
.d-price-box { margin: 26px 0 0; padding: 26px 28px; border-radius: 8px; background: #f3f9ff; border: 1px solid #cfe8ff; }
.d-price-label { margin: 0 0 6px; font-size: 13px; color: #536574; }
.d-price-values { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.d-price-values strong { font-family: "Lato", sans-serif; font-size: 40px; font-weight: 800; color: #246cb6; letter-spacing: -.02em; }
.d-price-values del { font-size: 20px; color: #71808b; }
.d-price-note { margin: 8px 0 0; font-size: 13px; color: #63717c; }

/* Produkt – technický list */
.not-front .d-section--compact { padding: 50px 0; }
.d-tech-sheet { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 36px 40px; border: 1px solid #cfe8ff; border-radius: 8px; }
.d-tech-sheet h2 { font-size: 30px !important; margin: 0 0 8px !important; }
.d-tech-sheet p:not(.d-eyebrow) { margin: 0; color: #63717c; }
.d-tech-sheet .d-button { flex-shrink: 0; }

/* Produkt – FAQ v rámci d-section */
.d-product-generic .product-faq { padding-top: 88px; }
.d-product-generic .faq-answer p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .not-front .d-title-md { font-size: 38px; }
  .d-calc-copy { padding-right: 12px; }
  .d-tech-sheet { display: block; }
  .d-tech-sheet .d-button { margin-top: 20px; }
  .d-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 767px) {
  .not-front .d-title-md { font-size: 32px; }
  .d-gallery { gap: 10px; }
  .d-gallery img { aspect-ratio: 1/1; }
  .d-option-body { padding: 22px 20px 4px; }
  .d-price-values strong { font-size: 32px; }
  .d-tech-sheet { padding: 26px; }
  .not-front .d-section--article { padding-top: 40px; }
  .d-product-generic .product-faq { padding-top: 48px; }
}

/* ==========================================================================
   Detail produktu – spoločné komponenty (templates/includes/product/)
   ========================================================================== */

/* Technické informácie – karta s obrázkom namiesto videa */
.installation-media { display: block; flex-shrink: 0; width: 200px; height: 200px; border-radius: 8px; overflow: hidden; background: #fff; }
.installation-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.installation-media:hover img { transform: scale(1.04); }
.installation ul, .technical-text ul, .control-note ul { margin: 0 0 0 18px; padding: 0; }
.installation li, .technical-text li { margin-bottom: 6px; line-height: 24px; }
.installation p:last-child, .technical-text p:last-child, .control-note p:last-child { margin-bottom: 0; }
.installation a, .technical-text a { color: #086bc7; font-weight: 700; }

/* Technické informácie – voľný text */
.technical-text { padding: 30px 25px; font-size: 16px; line-height: 26px; color: #333; }
.technical-text p { margin-bottom: 14px; }
.technical-text strong { font-weight: 800; }

/* Technické informácie – ovládanie a ikony */
.control-note { width: 100%; padding: 4px 4px 0; font-size: 15px; line-height: 24px; color: #52616b; }
.color-gallery a + a { margin-top: 12px; display: block; }

/* Hero – cena na mieru */
.product-price-row .price-on-request { font-size: 28px; }

/* Vzorová kalkulácia – jedna ukážka, zoznam ukážok, ponuka na mieru */
.calculator--single, .calculator--list, .calculator--consult { min-height: 0; }
.calculator--single .price-examples { display: block; }
.calculator--single .price-example > img { aspect-ratio: 16/10; }
.calculator--single .price-example-body { min-height: 0; padding: 22px 22px 24px; }
.calculator--single .price-example h4, .calculator--list .price-example h4 { white-space: normal; }
.calculator--list .price-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.calculator--list .price-example-body { min-height: 0; margin-top: 0; padding: 20px 10px; }
.calculator--list .price-example p { font-size: 14px; line-height: 20px; }
.calculator--consult .calculator-intro { margin-bottom: 26px; }
.price-example-specs { list-style: none; margin: 12px 0 4px; padding: 0; text-align: left; font-size: 15px; line-height: 22px; color: #333; }
.price-example-specs li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.price-example-specs li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #086bc7; }
.price-example-note { display: block; margin-top: 4px; font-size: 14px; color: #52616b; }
.calculator-cta { display: inline-block; margin: 6px 0 14px; }

/* Porovnanie – tabuľka bez obrázkov a s iným počtom stĺpcov */
.comparison-table--text thead th { height: auto; padding: 26px 10px 22px; vertical-align: middle; }
.comparison-table thead th + th { border-left: 1px solid #cfe8ff; }
.comparison-table tbody td + td { border-left: 1px solid #cfe8ff; }
.comparison-table--cols-5 thead th span, .comparison-table--cols-7 thead th span { font-size: 18px; }
.comparison-table--cols-5 tbody td, .comparison-table--cols-7 tbody td { padding: 8px 10px; }
.comparison-table--cols-7 { min-width: 1100px; }
.comparison-section .text-center { margin-bottom: 10px; }

/* Realizácie – odkaz na všetky */
.reference-more { margin: 26px 0 0; text-align: center; }

/* Porovnanie – šírka stĺpcov pre iný počet variantov ako 3 */
.comparison-table.comparison-table--cols-2 thead th:nth-child(n) { width: 37.08%; }
.comparison-table.comparison-table--cols-4 thead th:nth-child(n) { width: 18.54%; }
.comparison-table.comparison-table--cols-5 thead th:nth-child(n) { width: 14.83%; }
.comparison-table.comparison-table--cols-7 thead th:nth-child(n) { width: 10.6%; }

@media (max-width: 1199px) {
  .installation-media { width: 180px; height: 180px; }
}
@media (max-width: 991px) {
  .installation-media { width: 150px; height: 150px; }
}
@media (max-width: 767px) {
  .installation-media { width: 170px; height: 170px; margin: 0 auto 20px; }
  .technical-text { padding: 22px 18px; }
  .comparison-table--cols-2 { min-width: 640px; }
  .comparison-table--cols-3 { min-width: 820px; }
  .calculator--list .price-examples { grid-template-columns: 1fr 1fr; }
}