/* Gallery only. While the gallery is empty, ONE clear message sits under the intro
   (same hand-drawn pencil + underlined italic line as the Journal page). The three category
   rows then only describe what each category will hold: number · icon · text · drawn arrow.
   Existing arrival-on-scroll (style.css) stays; hover tilts the icon and redraws its line. */
.gallery-soon{display:flex;align-items:center;gap:20px;margin:36px 0 8px;max-width:680px}
.gallery-soon .cat-icon{flex:none}
.gallery-soon .soon-line{margin:0;padding-bottom:6px;font:italic 19px/1.4 Georgia,serif;color:var(--ink);border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 14px 8px}

.gallery-empty{grid-template-columns:50px 56px 1fr auto;align-items:start}
.gallery-empty .cat-icon{margin-top:4px}
.gallery-empty>.empty-sketch{margin:4px 0 0}

/* Empty category (reached from the home tiles via #category-N): a small tilted paper note in the colour of its
   home tile (blue / olive / clay), with tape and the sand offset shadow, and one italic Georgia line with a drawn
   rust underline. Pure text, no fake artwork; it disappears as soon as the category has its first work. */
.cat-soon{grid-column:3;margin:14px 0 6px}
.gallery-empty .cat-soon-line{position:relative;display:inline-block;max-width:100%;margin:0;padding:20px 30px 22px 26px;background:var(--blue);box-shadow:7px 8px 0 var(--sand);transform:rotate(-1.4deg);font:italic 19px/1.4 Georgia,serif;color:var(--ink)}
.cat-soon-line::before{content:'';position:absolute;top:-10px;left:38%;width:64px;height:20px;background:var(--sand);opacity:.9;transform:rotate(-7deg)}
.cat-soon-line::after{content:'';position:absolute;left:24px;right:34%;bottom:14px;height:8px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 8px 5px}
.cat-soon-1 .cat-soon-line{background:var(--olive);transform:rotate(1deg)}
.cat-soon-2 .cat-soon-line{background:var(--clay);transform:rotate(-.7deg)}

/* Finished works from galerie.json sit under their category text, in a quiet grid:
   preview, caption in the site's small muted text, Georgia title. No cards, no shadows. */
.gallery-works{grid-column:1 / -1;list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 32px}
.gallery-work figure{margin:0 0 14px}
.gallery-work img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--olive)}
.gallery-work figcaption{margin-top:8px;font-size:12px;color:var(--muted)}
.gallery-work h3{font:normal 24px/1.2 Georgia,serif;letter-spacing:-.5px;margin:0 0 8px}
.gallery-work p{font-size:15px}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gallery-empty:hover .cat-icon,.gallery-soon:hover .cat-icon{transform:translate(2px,-3px) rotate(4deg)}
  .gallery-empty:hover .stroke-trail,.gallery-soon:hover .stroke-trail{animation:icon-redraw 520ms ease-out}
  .cat-soon-line{transition:transform 220ms ease}
  .gallery-empty:hover .cat-soon-line{transform:translate(0,-3px) rotate(-.4deg)}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .gallery-soon{animation:gallery-soon-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes gallery-soon-arrive{from{translate:0 10px}to{translate:0 0}}
  }
}
@media(max-width:900px){
  .gallery-empty{grid-template-columns:30px 48px 1fr auto;gap:16px}
}
@media(max-width:600px){
  .gallery-soon{gap:14px;margin-top:28px;align-items:flex-start}
  .gallery-soon .cat-icon{width:44px;height:44px}
  .gallery-soon .soon-line{font-size:17px}
  .gallery-empty{grid-template-columns:24px 44px 1fr;column-gap:12px}
  .gallery-empty .cat-icon{width:44px;height:44px}
  .gallery-empty>div{grid-column:3}
  .gallery-empty>.empty-sketch{grid-column:3;width:60px;font-size:30px;margin-top:0}
  .cat-soon{grid-column:2 / -1;margin:10px 8px 4px 0}
  .gallery-empty .cat-soon-line{padding:16px 22px 18px 20px;font-size:17px;box-shadow:5px 6px 0 var(--sand)}
  .cat-soon-line::before{top:-8px;width:48px;height:15px}
  .cat-soon-line::after{left:18px;bottom:11px}
}
/* Category jump links: styled once in style.css (Georgia links with a hand-drawn line, like menu and footer). */

/* Gallery grid (once works exist): the preview and the title open the work's own page. */
.gallery-work-image{display:block}
.gallery-work-title{background:linear-gradient(var(--rust),var(--rust)) 0 100%/0 2px no-repeat;padding-bottom:2px}
.gallery-work-title:hover,.gallery-work-title:active{color:var(--rust)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gallery-work-title{transition:background-size 260ms ease,color 200ms ease}
  .gallery-work:hover .gallery-work-title{background-size:100% 2px}
}

/* One work (drawing, 3D model or AI image) – dilo-<kategorie>-<nazev>.html. Surface: Decide / Learn – look at one
   piece. The image lies on a tilted paper note with tape and the sand offset shadow in the colour of its category
   (as on the home tiles and the empty categories: Kresby blue, 3D olive, AI clay); the caption is written under it
   in italic Georgia with a drawn rust underline. Title and text beside it; back to the category at the top and
   again after the text; a quiet "next in this category" link when the category has more works. */
.work-detail{padding-top:calc(var(--page-top) - 44px)}
.work-back{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:14px;-webkit-tap-highlight-color:transparent}
.work-back span{color:var(--rust);margin-right:6px}
.work-back:active{color:var(--rust)}
.work-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"paper head" "paper text";grid-template-rows:auto 1fr;column-gap:80px;margin-top:28px}
.work-head{grid-area:head;align-self:end;padding-top:24px}
.work-head h1{font-size:var(--title-inner);margin-bottom:24px;text-wrap:balance;overflow-wrap:anywhere}
.work-text{grid-area:text}
.work-text .intro{max-width:480px;text-wrap:pretty;white-space:pre-line}
.work-back-end{margin-top:12px}
.work-paper{grid-area:paper;position:relative;margin:14px 14px 0 0;padding:18px 18px 22px;background:var(--blue);box-shadow:9px 11px 0 var(--sand);transform:rotate(-1.3deg);align-self:start}
.work-cat-1 .work-paper{background:var(--olive);transform:rotate(1deg)}
.work-cat-2 .work-paper{background:var(--clay);transform:rotate(-.8deg)}
.work-paper::before{content:'';position:absolute;z-index:1;top:-12px;left:42%;width:88px;height:26px;background:var(--sand);opacity:.92;transform:rotate(-7deg)}
.work-paper img,.work-placeholder{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper)}
.work-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted)}
.work-placeholder .cat-icon{width:72px;height:72px}
.work-placeholder-label{font-size:12px;letter-spacing:2px;text-transform:uppercase}
.work-caption{position:relative;display:inline-block;margin:16px 8px 0 4px;padding-bottom:8px;font:italic 18px/1.4 Georgia,serif;color:var(--ink);text-wrap:pretty}
.work-caption::after{content:'';position:absolute;left:0;right:22%;bottom:0;height:8px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 8px 5px}
.work-pager{margin-top:88px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .work-paper{transition:transform 240ms ease}
  .work-paper:hover{transform:translate(0,-3px) rotate(-.4deg)}
  .work-back span{display:inline-block;transition:transform 200ms ease}
  .work-back:hover span{transform:translateX(-3px)}
}
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .work-text{animation:gallery-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}
@media(max-width:900px){.work-layout{column-gap:44px}}
@media(max-width:750px){
  .work-layout{grid-template-columns:1fr;grid-template-areas:"head" "paper" "text";grid-template-rows:auto;margin-top:16px}
  .work-head{padding-top:0}
  .work-head h1{margin-bottom:8px}
  .work-paper{margin:20px 8px 36px 4px;padding:12px 12px 16px;box-shadow:6px 8px 0 var(--sand)}
  .work-paper::before{width:64px;height:20px;top:-10px}
  .work-caption{font-size:16px;margin-top:12px}
  .work-pager{margin-top:56px}
}
/* Private template previews of a work (nahled-dila-*.html, noindex) – same olive strip as nahled-clanku. */
.preview-banner{margin:24px 0 0;padding:12px 16px;background:var(--olive);color:var(--brown);font-size:13px;max-width:760px}
/* Gallery previews = small paper notes like everywhere else on the site (home tiles, journal list, work page):
   tilted, a strip of tape, the sand offset shadow, in the colour of the category (Kresby blue, 3D olive, AI clay).
   The same note grows into the paper on the work's own page (view transition, navigation.css). */
.gallery-work figure{margin:0 0 18px}
.gallery-work-image{position:relative;margin:8px 12px 0 0;padding:10px 10px 12px;background:var(--blue);box-shadow:7px 9px 0 var(--sand);transform:rotate(-1.3deg);-webkit-tap-highlight-color:transparent}
#category-1 .gallery-work-image{background:var(--olive);transform:rotate(1deg)}
#category-2 .gallery-work-image{background:var(--clay);transform:rotate(-.8deg)}
.gallery-works>li:nth-child(even) .gallery-work-image{transform:rotate(1.1deg)}
.gallery-work-image::before{content:'';position:absolute;z-index:1;top:-10px;left:40%;width:64px;height:20px;background:var(--sand);opacity:.92;transform:rotate(-7deg)}
.gallery-work img{background:var(--paper)}
/* Works of any shape (portrait drawings, wide 3D renders, square AI images): every preview is the same 4 : 3 paper
   frame and the WHOLE picture lies in it on a cream mat (passe-partout, like the photo on O mně) – never cropped,
   never stretched. A hairline marks the mat's edge; a transparent PNG shows the cream mat through. */
.gallery-work img{box-sizing:border-box;aspect-ratio:4/3;object-fit:contain;padding:clamp(8px,5%,14px);box-shadow:inset 0 0 0 1px var(--line)}
.gallery-work figcaption{margin:14px 0 0 2px;font:italic 15px/1.4 Georgia,serif;color:var(--muted)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gallery-work-image{transition:transform 220ms ease}
  .gallery-work:hover .gallery-work-image{transform:translate(0,-3px) rotate(-.4deg)}
}
/* Robustness on real works. The layout columns may not grow with a long word or link (minmax(0,…)).
   On the work's own page the WHOLE image is shown, portrait, landscape or panorama – never cropped: the paper
   note hugs the image (at least 320 px wide, a narrow portrait sits centred on its paper) and the image is at most
   ~3/4 of the screen tall, so title, text and image never collide. The gallery grid keeps its calm, even 4 : 3
   previews (cropped from the centre, as before); the full picture is one tap away. */
.work-paper{justify-self:start;width:fit-content;min-width:min(100%,320px);max-width:calc(100% - 14px)}
.work-paper img{width:auto;max-width:100%;height:auto;max-height:min(76vh,720px);aspect-ratio:auto;object-fit:contain;margin:0 auto}
.work-paper:has(.work-placeholder){width:auto;justify-self:stretch}
.work-paper .work-placeholder{width:100%}
/* caption: underline as long as its words (as before); a long caption wraps at ~34 characters so it never makes
   the paper of a narrow portrait much wider than the picture */
.work-caption{max-width:34ch;overflow-wrap:anywhere}
@media(max-width:750px){
  .work-layout{grid-template-columns:minmax(0,1fr)}
  .work-paper{max-width:calc(100% - 12px);min-width:min(100% - 12px,260px)}
  .work-paper img{max-height:min(68vh,620px)}
}
/* Previous / next work of the same category at the end of a work page, so the visitor walks the category without
   going back to the gallery. Two halves on one line under a hairline (the same gesture as Pokračovat: eyebrow with
   the position "2 / 5", Georgia title, rust arrow, hand-drawn underline on hover); previous on the left, next on the
   right. The first work has only next, the last only previous (no loop, the counter says where you are). */
.work-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;border-top:1px solid var(--line);padding-top:36px}
.work-pager a{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:44px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.work-pager .eyebrow{margin:0}
.work-pager-arrow{color:var(--rust);font-size:16px;letter-spacing:0}
.work-pager-pos{white-space:nowrap}
.work-pager-next{grid-column:2;align-items:flex-end;text-align:right}
.work-pager-title{position:relative;width:fit-content;max-width:100%;padding-bottom:9px;font:normal 32px/1.15 Georgia,serif;letter-spacing:-1px;overflow-wrap:anywhere;text-wrap:balance}
.work-pager-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 6px 4px;transform:rotate(-1.2deg) scaleX(0);transform-origin:left}
.work-pager-next .work-pager-title::after{transform-origin:right;transform:rotate(1deg) scaleX(0)}
.work-pager a:hover .work-pager-title,.work-pager a:active .work-pager-title{color:var(--rust)}
.work-pager a:focus-visible{outline-offset:6px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .work-pager-title::after{transition:transform .24s ease}
  .work-pager-prev:hover .work-pager-title::after{transform:rotate(-1.2deg) scaleX(1)}
  .work-pager-next:hover .work-pager-title::after{transform:rotate(1deg) scaleX(1)}
  .work-pager-arrow{display:inline-block;transition:transform .2s ease}
  .work-pager-prev:hover .work-pager-arrow{transform:translateX(-3px)}
  .work-pager-next:hover .work-pager-arrow{transform:translateX(3px)}
}
@media(max-width:600px){
  .work-pager{gap:16px;padding-top:28px}
  .work-pager .eyebrow{letter-spacing:.5px}
  .work-pager-title{font-size:22px;padding-bottom:6px}
}