/* interierservis 2026-11-04: fotky v textu, dlaždice služeb s textem, blok s výzvou. Načítá templates/Pages/default.twig. */

/* fotky v textu: <p [zarovnání]><img width="480" alt><em>popisek</em></p>
   Řádky skládá při zobrazení FormattedTextareaHelper::wrapMediaRows (v DB zůstává HTML z editoru):
   bez zarovnání = fotka vlevo | text, zarovnat vpravo (ql-align-right) = text | fotka, text svisle na střed fotky;
   do bloku (ql-align-justify) = dvojice fotek vedle sebe; na střed (ql-align-center) = jen fotka uprostřed;
   fotka bez width = přes celou šířku. Základní pravidla jsou v :where(), aby je řádky snadno přebily. */
.page-editor-content :where(p:has(> img + em)){text-align:center;font-style:normal}
.page-editor-content :where(p:has(> img + em)) > img{display:block;height:auto;border-radius:.5rem;margin:0 auto .6rem}
.page-editor-content :where(p:has(> img + em)) > em{display:block;font-size:.875rem;line-height:1.4;color:var(--color-neutral-400)}
.page-editor-content :where(p:has(> img[width] + em)){max-width:480px;margin:2rem auto}
.page-editor-content :where(p:has(> img[width] + em)) > img{width:100%}
.page-editor-content :where(p:has(> img:not([width]) + em)){margin:2rem 0}

/* řádek fotka | text */
.page-editor-content .media-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;align-items:center;margin:2.5rem 0}
.page-editor-content .media-row--right{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.page-editor-content .media-row--right .media-row__img{order:2}
.page-editor-content .media-row__img > p{max-width:none;margin:0;text-align:center}
.page-editor-content .media-row__text > :first-child{margin-top:0}
.page-editor-content .media-row__text > :last-child{margin-bottom:0}
/* dvojice fotek */
.page-editor-content .media-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start;margin:2.5rem 0}
.page-editor-content .media-pair > p{max-width:none;margin:0;text-align:center}
/* krátký text vedle fotky: fotku na desktopu oříznout, ať vedle ní nezůstává prázdné místo (na mobilu celá) */
@media screen and (min-width:701px){
  .page-editor-content .media-row--medium .media-row__img > p > img{aspect-ratio:1/1;object-fit:cover}
  .page-editor-content .media-row--short{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .page-editor-content .media-row--short.media-row--right{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .page-editor-content .media-row--short .media-row__img > p > img{aspect-ratio:4/3;object-fit:cover}
}
@media screen and (max-width:700px){
  .page-editor-content .media-row,.page-editor-content .media-row--right{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .page-editor-content .media-row--right .media-row__img{order:0}
  .page-editor-content .media-row__img > p{max-width:480px;margin:0 auto}
  .page-editor-content .media-pair{grid-template-columns:minmax(0,1fr)}
}
.page-editor-content .gallery{margin:1.5rem 0}
/* web má globálně a{display:block}, výjimka jen p>a a li>a; odkaz v tučném/kurzívě by se zalomil */
.page-editor-content strong > a,.page-editor-content em > a,.cta-box .cta-text a{display:inline}

/* dlaždice služeb s textem pod nadpisem (jen /sluzby) */
.services-list-item.with-text{display:flex;flex-direction:column;color:var(--color-text);text-decoration:none}
.services-list-item.with-text .content{position:static;height:auto;background:none;color:var(--color-text);padding:1rem .25rem 0;justify-content:flex-start}
.services-list-item.with-text .content h3{margin:0 0 .5rem}
.services-list-item.with-text .tile-text{margin:0;font-size:.875rem;line-height:1.5}

/* blok pod dlaždicemi na /sluzby */
.services-after{margin-top:3rem}

/* blok s výzvou */
.cta-box{margin:3rem 0;padding:2.5rem 1.5rem;background:var(--color-neutral-100);border-radius:.5rem;text-align:center;font-style:normal}
.cta-box h2{margin-top:0}
.cta-box .cta-text p{text-align:center;margin:.25rem 0}
.cta-box .btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem}
.cta-box .btn.outline{padding:1.1em 2.25em .95em;border-radius:6.25rem;border:.125rem solid var(--color-red-400);color:var(--color-red-400);background:transparent}
.cta-box .btn.outline:hover{background:var(--color-red-400);color:var(--color-text-inverted)}