/* photo-row.css: the photos and videos of a page, and the home page's tile wall (build/photo_markup.py,
   build/tile_markup.py write the markup). Its own file: step 85 copies it to /el/photo-row.css and links it
   only on pages that get photos, so el-photobooth.css and every page without photos stay as they were.
   Written with start/end sides, so ar and he read right to left. Reduced motion: nothing moves.
   NOTE (Joe, 2026-10-13): el-photobooth.css still says there are no photographs and nothing should become an
   <img>. That was true until Joe decided the pages carry real photos and videos as well. They come only from
   core/data/photos.json and are written by build/photo_markup.py. Every other visual is still hand-drawn SVG. */

/* 1. places: photos spread between sections (a band with its own wrap) and inside them */
.photo-place{margin:clamp(22px,3.5vw,40px) 0;}
.photo-place:has(>.wrap){margin:0;padding:clamp(10px,2vw,24px) 0;}
.photo-place.n2:not(:has(>.wrap)),.photo-place.n2>.wrap,.photo-place.n3:not(:has(>.wrap)),.photo-place.n3>.wrap{display:grid;gap:clamp(10px,1.6vw,18px);}
.photo-place.n2:not(:has(>.wrap)),.photo-place.n2>.wrap{grid-template-columns:repeat(2,minmax(0,1fr));}
.photo-place.n3:not(:has(>.wrap)),.photo-place.n3>.wrap{grid-template-columns:repeat(3,minmax(0,1fr));}
/* Each photo is a <picture> (WebP first, JPG for old browsers, R145); it adds no box, so the rules below see the <img> as before. */
picture{display:contents;}
.photo-place figure{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--card);aspect-ratio:3/2;}
.photo-place figure::after{content:"";position:absolute;inset:0;border:1px solid var(--hair,var(--line));border-radius:3px;pointer-events:none;}
.photo-place.n1>.wrap>figure{aspect-ratio:21/9;}
.photo-place.n1>figure{aspect-ratio:16/9;}
.photo-place img,.photo-place video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.6s var(--ease),filter .8s;filter:saturate(.95) brightness(.94);}
.photo-place figure:hover img,.photo-place figure:hover video{transform:scale(1.03);filter:none;}
/* fade and settle in once seen; only when photo-row.js has said it watches (no script: always shown) */
.pp-watch .photo-place figure{transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);}
.pp-watch .photo-place:not(.in) figure{opacity:0;transform:translateY(26px) scale(.985);}
.pp-watch .photo-place.in figure:nth-child(2){transition-delay:.12s;}
.pp-watch .photo-place.in figure:nth-child(3){transition-delay:.24s;}
@media (max-width:700px){
  .photo-place.n3:not(:has(>.wrap)),.photo-place.n3>.wrap{grid-template-columns:repeat(2,minmax(0,1fr));}
  .photo-place.n3 figure:first-child{grid-column:1/-1;}
  .photo-place.n1>.wrap>figure,.photo-place.n1>figure{aspect-ratio:4/3;}
}

/* 2. the home page's first screen: hero words beside a wall that shows every service at once */
.hero:has(.tile-wall){min-height:100svh;display:flex;align-items:stretch;}
.hero:has(.tile-wall) .scene{display:none;}
.hero:has(.tile-wall)::before{background:radial-gradient(50% 60% at 12% 40%,rgba(143,107,255,.13),transparent 70%);}
[dir="rtl"] .hero:has(.tile-wall)::before{background:radial-gradient(50% 60% at 88% 40%,rgba(143,107,255,.13),transparent 70%);}
.hero:has(.tile-wall)::after{display:none;}
.hero .wrap:has(>.tile-wall){position:relative;inset:auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(24px,3vw,48px);align-items:center;width:100%;max-width:1440px;margin:0 auto;padding-top:92px;padding-bottom:20px;pointer-events:auto;}
.hero .wrap:has(>.tile-wall) .hero-inner{max-width:none;padding:0;}
.hero:has(.tile-wall) h1{font-size:clamp(2.1rem,min(3.6vw,6.4vh),3.9rem);line-height:1.04;}
.hero:has(.tile-wall) .lead{font-size:clamp(1rem,min(1.25vw,2.2vh),1.2rem);}
.tile-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:10px;height:calc(100svh - 72px - 40px);max-height:780px;min-height:420px;}
/* a tile: the picture fills it; its words and links sit in the flow at the bottom, so long names (de, es, it, fr)
   break and grow the words upward, and the links below never cover them. The whole tile clicks through the
   name link's ::before (a "stretched link"); the extra links sit above it. */
.tile{position:relative;overflow:hidden;border-radius:3px;background:var(--card);isolation:isolate;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(12px,1.3vw,20px);}
.tile-big{grid-row:1/3;}
.tile-pic,.tile-pic img,.tile-pic>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tile-pic img,.tile-pic>video{transition:transform 1.4s var(--ease),filter .6s;filter:saturate(.92) brightness(.9);}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,16,0) 30%,rgba(10,8,16,.88) 100%);pointer-events:none;z-index:1;}
.tile::before{content:"";position:absolute;inset:0;border:1px solid rgba(246,242,236,.08);z-index:5;pointer-events:none;transition:border-color .5s;}
.tile-link{display:flex;flex-direction:column;min-width:0;color:var(--ink);text-decoration:none;}
.tile-link::before{content:"";position:absolute;inset:0;z-index:2;}
.tile-name,.tile-line{position:relative;z-index:3;min-width:0;overflow-wrap:anywhere;}
.tile-name{hyphens:auto;-webkit-hyphens:auto;}
.tile-name{font-family:var(--serif);font-size:clamp(1.1rem,1.4vw,1.5rem);line-height:1.12;font-weight:500;}
.tile-big .tile-name{font-size:clamp(1.6rem,2.4vw,2.4rem);}
.tile-line{font-size:.78rem;line-height:1.45;color:var(--dim);margin-top:6px;max-width:22em;}
.tile-subs{position:relative;z-index:4;display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.tile-subs a{font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--ink);text-decoration:none;padding:5px 10px;
  border:1px solid rgba(246,242,236,.32);border-radius:99px;background:rgba(10,8,16,.45);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);transition:border-color .3s,color .3s;}
.tile-subs a:hover,.tile-subs a:focus-visible{border-color:var(--gold);color:var(--gold);}
.tile:hover .tile-pic img,.tile:hover .tile-pic>video,.tile:focus-within .tile-pic img,.tile:focus-within .tile-pic>video{transform:scale(1.05);filter:saturate(1.05) brightness(1);}
.tile:hover::before,.tile:focus-within::before{border-color:var(--hair-gold,var(--gold));}
.tile-link:focus-visible{outline:none;}
.tile-link:focus-visible .tile-name{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;}
.tile-link::after{content:"\2192";position:absolute;z-index:3;inset-inline-end:clamp(12px,1.3vw,20px);top:clamp(12px,1.3vw,20px);color:var(--gold);
  opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s var(--ease);}
[dir="rtl"] .tile-link::after{content:"\2190";transform:translateX(6px);}
.tile:not(.tile-big):hover .tile-link::after,.tile:not(.tile-big):focus-within .tile-link::after{opacity:1;transform:none;}
@media (max-height:760px) and (min-width:901px){.tile-line{font-size:.72rem;}}
@media (max-width:1100px) and (min-width:901px){
  .hero .wrap:has(>.tile-wall){grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
  .tile-wall{grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:repeat(3,1fr);}
  .tile-big{grid-row:1/4;}
  .tile-line{display:none;}
}
@media (max-width:900px){
  .hero:has(.tile-wall){min-height:0;padding:0 0 24px;}
  .hero .wrap:has(>.tile-wall){grid-template-columns:minmax(0,1fr);gap:14px;padding-top:calc(64px + 14px);margin-top:0;}
  .hero:has(.tile-wall) h1{font-size:clamp(1.7rem,8vw,2.4rem);}
  .tile-wall{grid-template-columns:1fr 1fr;grid-template-rows:minmax(min(22svh,170px),auto);grid-auto-rows:minmax(min(15svh,118px),auto);
    height:auto;max-height:none;min-height:0;gap:8px;}
  .tile-big{grid-column:1/3;grid-row:1;}
  .tile{padding:10px;}
  .tile-name{font-size:1.05rem;}
  .tile-big .tile-name{font-size:1.3rem;}
  .tile-line{font-size:.68rem;line-height:1.3;margin-top:3px;}
  .tile-subs{margin-top:8px;}
}

/* 3. a service page's first screen: its best photo beside the hero words (Joe's sample A); stacked on phones.
   The photo is the header's own child after the words' wrap, so the words keep every line they had. */
.phero:has(>.phero-photo){align-items:center;gap:clamp(24px,4vw,64px);padding-inline:max(0px,calc((100% - 1240px)/2));}
.phero:has(>.phero-photo) .scene{display:none;}
.phero:has(>.phero-photo)::before{background:radial-gradient(60% 70% at 85% 30%,rgba(143,107,255,.14),transparent 70%);}
[dir="rtl"] .phero:has(>.phero-photo)::before{background:radial-gradient(60% 70% at 15% 30%,rgba(143,107,255,.14),transparent 70%);}
.phero:has(>.phero-photo)>.wrap{flex:1 1 auto;min-width:0;max-width:none;margin:0;}
.phero-photo{position:relative;z-index:2;flex:0 0 auto;height:min(64svh,620px);aspect-ratio:4/5;max-width:42%;
  margin:0;margin-inline-end:clamp(20px,4vw,48px);overflow:hidden;border-radius:3px;background:var(--card);}
.phero-photo::after{content:"";position:absolute;inset:0;border:1px solid var(--hair,var(--line));border-radius:3px;pointer-events:none;}
.phero-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.94);}
@media (max-width:860px){
  .phero:has(>.phero-photo){padding-inline:0;}
  .phero:has(>.phero-photo)::before{display:none;}
  .phero:has(>.phero-photo) .scene ~ .wrap{margin-top:0;padding-top:24px;}
  .phero-photo{height:auto;max-width:none;aspect-ratio:4/3;margin:24px clamp(20px,4vw,48px) 0;}
}
.tile-subs a::first-letter{text-transform:uppercase;}
/* real photos in place of drawings (build/drawn_markup.py): the booth cards and the closing strip */
.booth-photo{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--card);}
.booth-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.2s var(--ease,ease);}
.booth:hover .booth-photo img{transform:scale(1.04);}
.cta-photos{display:flex;justify-content:center;gap:clamp(8px,1.4vw,14px);width:min(100%,460px);margin:0 auto 1.6rem;}
.cta-photos figure{margin:0;flex:1 1 0;min-width:0;aspect-ratio:4/3;overflow:hidden;border-radius:3px;border:1px solid var(--hair,var(--line));background:var(--card);}
.cta-photos figure:nth-child(2){transform:translateY(-6px);}
.cta-photos img{display:block;width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion:reduce){
  .photo-place figure,.photo-place img,.photo-place video,.tile-pic img,.tile-pic>video,.tile-link::after{transition:none!important;transform:none!important;}
  .booth-photo img,.cta-photos figure{transition:none!important;transform:none!important;}
}