/* Homepage: inline styl z prototype/navrh-h/web/index.html, upravený na markup WordPressu. Hero je .hero-home
   (odiengroup_hero() na úvodní stránce), s headliny fotek .hero jako v karusel.html, čísla mají vlastní velikosti pod .home, slider je blok odien/slider,
   dlaždice divizí skupiny .tile (obrázek a nadpis s odkazem) a novinky Query Loop .news. */
.more a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--olive-dark); }
.more a::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .3s var(--ease); }
.more a:hover::after { transform: translateX(4px); }
:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); }

/* hero: one photo, title centred below it */
.hero-home .ph { position: relative; height: clamp(420px, 66vh, 700px); overflow: hidden; }
.hero-home .ph img { position: absolute; left: 0; top: -15%; width: 100%; height: 115%; object-fit: cover; object-position: 50% 30%; translate: 0 var(--py, 0px); animation: settle 14s var(--ease) both; }
.hero-home .ph img:not(.on) { opacity: 0; } /* more photos (block Hero) take turns as on the division pages; one photo is always .on */
.hero-home .ph img { transition: opacity 1.4s ease; }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-home .cap { position: absolute; right: var(--gutter); top: 16px; background: var(--bg); font-size: 13px; padding: 3px 10px; }
.hero-home .panel { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: clamp(36px, 4vw, 56px) var(--gutter) 0; text-align: center; }
.hero-home h1 { font-size: clamp(2rem, 3.52vw, 3.2rem); }
.hero-home .panel p { max-width: 40em; margin: 14px auto 0; font-size: 1.05rem; }
/* hero s headliny fotek (karusel, prototyp karusel.html): nadpis na fotce jako .hero na stránkách divizí (sub.css),
   výška fotky homepage a menší nadpis na delší headliny */
.home .hero .ph { height: clamp(420px, 66vh, 700px); }
.home .hero h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); } /* D681: menší headliny karuselu (26–40 px) */
/* podtitul pod fotkou (D621, D622): tmavý na pozadí stránky nad čísly, odsazení a velikost jako podtitul .hero-home
   (karusel.html, varianta pod fotkou) */
.hero-lead { padding: clamp(36px, 4vw, 56px) var(--gutter) 0; text-align: center; }
.hero-lead p { max-width: 40em; margin: 0 auto; font-size: 1.05rem; }

/* figures: equal columns whatever the text; side padding small enough for "~ 1.2M m² GBA" on one line (client,
   4 Nov 2026), a longer figure wraps into balanced lines instead of widening its column past the screen. Each figure spans two rows of the list (subgrid), so the figures
   in a row sit on one bottom line and their labels start on one top line however many lines either wraps into */
.home .figures { padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 96px); }
.home .figures dl { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.home .figures dl > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding: 8px 12px; }
.home .figures dt { align-self: end; font-size: clamp(2.08rem, 2.9vw, 2.6rem); white-space: normal; text-wrap: balance; }

/* about: a slider, each slide is a title on the left and text on the right; the arrow below (added by site.js)
   slides the whole strip to the next one. The block's root is the strip, so it also carries the section padding,
   the line on top and the clip at the gutters (overflow for the page width, clip-path for the gutters) */
.wp-block-odien-slider { --gap: clamp(32px, 5vw, 96px); position: relative; display: flex; gap: var(--gutter); max-width: calc(1320px + 2 * var(--gutter)); margin: 0 auto; padding: calc(clamp(40px, 5vw, 72px) + clamp(48px, 6vw, 80px)) var(--gutter) clamp(80px, 9vw, 130px); background: linear-gradient(var(--line), var(--line)) no-repeat center clamp(40px, 5vw, 72px) / calc(100% - 2 * var(--gutter)) 1px; overflow: hidden; clip-path: inset(0 var(--gutter)); }
.wp-block-odien-slider:has(> .wp-block-odien-slide + .wp-block-odien-slide) { padding-bottom: calc(clamp(80px, 9vw, 130px) + 80px); } /* room for the arrow: 28px gap + 52px button */
.wp-block-odien-slide { flex: 0 0 100%; display: grid; grid-template-columns: 5fr 7fr; gap: 20px var(--gap); align-items: start; transform: translateX(calc(var(--slide, 0) * (-100% - var(--gutter)))); transition: transform .8s var(--ease); }
.wp-block-odien-slide h2 { max-width: 9em; }
.wp-block-odien-slide p { max-width: 38em; }
.wp-block-odien-slide p + p { margin-top: 16px; }
.ctrl { position: absolute; bottom: clamp(80px, 9vw, 130px); left: calc(var(--gutter) + (100% - 2 * var(--gutter) - var(--gap)) * 5 / 12 + var(--gap)); display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 600; letter-spacing: .09em; color: var(--olive-dark); }
.next { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--olive); border-radius: 50%; background: none; color: var(--olive-dark); cursor: pointer; transition: background .25s, color .25s; }
.next:hover { background: var(--olive); color: #fff; }
.next svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.next:hover svg { transform: translateX(3px); }

/* businesses: three equal photo tiles with just the name and an arrow, the whole tile is the link (the link of the
   title stretched over the tile); crops of the photos as in the prototype are the focal points of the images */
.biz .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; background: var(--ink); }
.tile .wp-block-image { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; }
.tile .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile .wp-block-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 24, 30, .88) 0%, rgba(20, 24, 30, .5) 32%, rgba(20, 24, 30, 0) 62%); }
.tile h3 { padding: 28px 30px 30px; font-size: clamp(1.6rem, 2.08vw, 2.08rem); }
.tile h3 a { text-decoration: none; }
.tile h3 a::before { content: ""; position: absolute; inset: 0; }
.tile h3 a::after { content: ""; display: block; width: 22px; height: 22px; margin: 16px 0 9px; /* 9px: the arrow's line box in the prototype is 31px */ background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .35s var(--ease); }
.tile h3 a:focus-visible { outline: 0; }
.tile:has(a:focus-visible) { outline: 2px solid var(--olive); outline-offset: 3px; }
.tile:hover img, .tile:has(a:focus-visible) img { transform: scale(1.05); }
.tile:hover h3 a::after, .tile h3 a:focus-visible::after { transform: translateX(6px); }
.biz:last-child { padding-bottom: clamp(80px, 9vw, 130px); } /* without news (no posts yet) the tiles end the page */

/* news: the latest three posts (Query Loop); the whole card is the link of its title */
.news { padding: clamp(80px, 9vw, 130px) 0; }
.news-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
@media (min-width: 761px) { .news-head .more { display: flex; } } /* „All news“ je odkaz v odstavci: jeho řádek by hlavičku o 1 px prodloužil */
.news .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); list-style: none; }
.news .wp-block-post { position: relative; }
.news .wp-block-post-featured-image { aspect-ratio: 3 / 2; overflow: hidden; margin: 0; }
.news .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.news .wp-block-post:hover img { transform: scale(1.04); }
.news .wp-block-post-terms { margin-top: 18px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--olive-dark); font-weight: 600; }
.news .wp-block-post-title { font-size: 1.32rem; margin-top: 6px; }
.news .wp-block-post-title a { text-decoration: none; }
.news .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.news .wp-block-post-title a:focus-visible { outline: 0; }
.news .wp-block-post:has(a:focus-visible) { outline: 2px solid var(--olive); outline-offset: 3px; } /* like a.card in the prototype */
.news .wp-block-post:hover .wp-block-post-title a { text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: 1.5px; text-underline-offset: 2px; } /* prototyp 6px: u nadpisu na dva řádky (line-height 1.08) linka sahala do horních tahů dalšího řádku (D472) */

/* výpis News a archivy novinek (Query Loop .news.list): karty jako Latest news pod nadpisem stránky, nadpis karty
   je h2 (pod h1 stránky) ve vzhledu h3 z homepage; stránkování pod kartami, až je příspěvků víc než na stránku */
.news.list { padding: 0 0 clamp(72px, 8vw, 120px); }
.news.list .wp-block-post-template { row-gap: clamp(40px, 4vw, 56px); }
.news .wp-block-post-title { color: inherit; }
.wp-block-query-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: clamp(48px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.wp-block-query-pagination a { text-decoration: none; color: var(--olive-dark); }
.wp-block-query-pagination a:hover { text-decoration: underline; text-decoration-color: var(--olive); }
.wp-block-query-pagination-numbers { display: flex; gap: 16px; }
.wp-block-query-pagination .current { text-decoration: underline 2px var(--olive); text-underline-offset: 8px; }
.wp-block-query-pagination-previous-arrow { margin-right: 8px; }
.wp-block-query-pagination-next-arrow { margin-left: 8px; }

@media (max-width: 1180px) {
  .home .figures dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .home .figures dt { font-size: clamp(2.08rem, 3.52vw, 3.04rem); }
  .home .figures dl > div:nth-child(3) { border-left: 0; }
  .biz .wrap { gap: 12px; }
  .tile h3 { padding: 20px; }
}
@media (max-width: 760px) {
  .hero-home .ph { height: 66vw; min-height: 300px; }
  .hero-home .cap { top: 10px; right: 10px; }
  .home .hero .ph { height: 92vw; min-height: 360px; max-height: 560px; } /* jako sub.css: .home .hero výš přebíjí jeho mobilní výšku */
  .home .figures dl { grid-template-columns: minmax(0, 1fr); gap: 24px 0; } /* one under another, each figure on one line (D834) */
  .home .figures dl > div { padding: 4px 0; border-left: 0; }
  .home .figures dt { font-size: 1.68rem; }
  .home .figures dd { font-size: 15px; line-height: inherit; }
  .wp-block-odien-slide { grid-template-columns: 1fr; }
  .ctrl { left: var(--gutter); }
  .biz .wrap { grid-template-columns: 1fr; gap: 16px; }
  .tile { aspect-ratio: 4 / 3; }
  .news .wp-block-post-template { grid-template-columns: 1fr; }
  .news-head { display: block; }
}