/* Siavash Habibi Core — Gallery UI. Source: Child Theme v4.3.3. */
:root{--site-title-font:"Inter","Vazirmatn",sans-serif;--line:#272727;}
.siavash-portfolio-page .gallery-archive-button{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;border-bottom:1px solid #555;padding:8px 0;font-size:11px;color:#bbb;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.siavash-portfolio-page .gallery-archive-button:hover,.siavash-portfolio-page .gallery-archive-button:focus-visible{color:#fff;border-color:#fff}
/* ---------- Home lightbox: existing presentation retained ---------- */
/* v1.0.24 — safety net: hide the Home lightbox shell by default everywhere,
   not only under .siavash-portfolio-page. It's normally only ever printed
   on the Home template (see sh_core_home_lightbox_markup(), Core plugin),
   but if that guard is ever wrong for a future page, this stops it from
   rendering as a plain visible block instead of silently doing nothing. */
.lightbox{display:none}
.siavash-portfolio-page .lightbox{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:5vw}
.siavash-portfolio-page .lightbox.open{display:flex}
.siavash-portfolio-page .lightbox-box{width:min(1320px,96vw);height:min(88vh,900px);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:0;padding:0;overflow:hidden;border:1px solid #333;background:#151515}
.siavash-portfolio-page .lightbox-close{position:absolute;top:22px;right:30px;background:none;border:0;font-size:34px;cursor:pointer}
.siavash-portfolio-page .lightbox-image{min-height:55vh;background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#0b0b0b}
.siavash-portfolio-page .lightbox-details{padding:38px 30px;overflow:auto;border-inline-start:1px solid var(--sh-divider-subtle);background:#121212;text-align:start}
.siavash-portfolio-page .lightbox-details h3{font-size:25px;font-weight:500;margin:0 0 8px}
.siavash-portfolio-page .lightbox-details p{color:#aaa;font-size:13px;line-height:2;margin:0}
.siavash-portfolio-page .gallery-meta{border-top:1px solid var(--line);margin-top:18px}
.siavash-portfolio-page .gallery-meta>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}
.siavash-portfolio-page .gallery-meta span{color:#777}.siavash-portfolio-page .gallery-meta strong{font-weight:400;text-align:end}

/* ---------- Gallery archive: square grid intentionally preserved ---------- */
body.siavash-gallery-archive-page,body.siavash-gallery-archive-page #page,body.siavash-gallery-archive-page #content,body.siavash-gallery-archive-page .site,body.siavash-gallery-archive-page .site-content{background:#000;color:#fff;margin:0;padding:0;border:0;box-shadow:none}
body.siavash-gallery-archive-page{font-family:Inter,sans-serif;overflow-x:hidden}
/* v1.0.12 — Astra (the parent theme) wraps page content in its own
   #page/.ast-container/.site-main/#content divs, which can carry Astra's
   own default padding/margin. That's fine for normal boxed pages, but it
   left a visible gap below the footer on these full-bleed gallery pages
   (site footer + get_footer() themselves have zero margin — the leftover
   space was Astra's own wrapper padding). Zeroed out only here.
*/
body.siavash-gallery-archive-page #page,
body.siavash-gallery-archive-page .site-content,
body.siavash-gallery-archive-page .ast-container,
body.siavash-gallery-archive-page .site-main,
body.siavash-gallery-archive-page #content{padding:0!important;margin:0!important}
body.siavash-gallery-archive-page{margin:0!important}
html[dir="rtl"] body.siavash-gallery-archive-page,html[dir="rtl"] body.siavash-gallery-archive-page *{font-family:"Vazirmatn",sans-serif}
html[dir="ltr"] body.siavash-gallery-archive-page,html[dir="ltr"] body.siavash-gallery-archive-page *{font-family:"Inter",sans-serif}
/* v1.0.17 — footer used to sit far below the actual gallery content
   (a big empty black gap) whenever the visible items were shorter than
   one viewport — e.g. a filtered category with just a few photos, or
   simply a tall screen. That gap came from forcing this shell to
   min-height:100vh regardless of real content height, combined with a
   position:fixed sidebar pinned to the viewport. Switched to a flex
   layout with a position:sticky sidebar instead: the sidebar now
   stretches to match .gallery-content's real height (whatever that is)
   and stops sticking exactly where that content ends, so the footer
   always sits flush right after — no artificial gap, and the sidebar
   never overlaps the footer. Fixed for all three breakpoints below. */
body.siavash-gallery-archive-page .gallery-shell{display:flex;background:#000;padding-top:var(--sh-nav-h,74px)}
body.siavash-gallery-archive-page .gallery-sidebar{position:sticky;top:var(--sh-nav-h,74px);flex:0 0 250px;width:250px;background:#090909;z-index:20;border-inline-end:1px solid var(--sh-divider-subtle)}
body.siavash-gallery-archive-page .gallery-sidebar-inner{height:100%;padding:58px 36px 34px;display:flex;flex-direction:column;background:#090909}
body.siavash-gallery-archive-page .gallery-brand{display:flex;flex-direction:column;gap:5px;color:#fff;margin-bottom:58px;transition:color .2s ease}
body.siavash-gallery-archive-page .gallery-brand strong{font-family:var(--site-title-font);font-size:12px;line-height:1.35;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
body.siavash-gallery-archive-page .gallery-brand span{font-size:9px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:#aaa}
body.siavash-gallery-archive-page .gallery-nav{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
body.siavash-gallery-archive-page .gallery-nav a{position:relative;font-size:11px;line-height:1.2;color:#eee;padding-bottom:4px;transition:color .22s ease,opacity .22s ease}
body.siavash-gallery-archive-page .gallery-nav a:hover,body.siavash-gallery-archive-page .gallery-nav a:focus-visible,body.siavash-gallery-archive-page .gallery-nav a.is-active{color:#fff;opacity:1}
body.siavash-gallery-archive-page .gallery-nav a:not(.is-active){opacity:.55}
body.siavash-gallery-archive-page .gallery-nav a.is-active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff}
/* v1.0.11 — "back to home" and the language switch now live together in one
   row with an explicit, fixed gap (was two separate blocks whose visual
   spacing depended on margin-top:auto relative to variable-height content
   above, so fa/en never matched). The language switch is now sized/shaped
   exactly like the header's own FA/EN pill (.sh-lang), not a rectangular
   button — they're the same control, so they should look the same. */
body.siavash-gallery-archive-page .gallery-sidebar-actions{display:flex;align-items:center;gap:10px;padding-top:18px;margin-top:14px;border-top:1px solid var(--sh-divider-subtle);flex-wrap:wrap}
body.siavash-gallery-archive-page .gallery-sidebar-actions .gallery-nav-link.sh-btn{
  display:inline-flex;width:auto;align-items:center;justify-content:center;
  padding:9px 16px;margin:0;border:1px solid #3c3c3c;border-radius:2px;
  color:#eee;opacity:1;font-size:10.5px;letter-spacing:.05em;
}
body.siavash-gallery-archive-page .gallery-sidebar-actions .gallery-nav-link.sh-btn:hover{color:#fff;border-color:#fff;opacity:1}
body.siavash-gallery-archive-page .gallery-lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:30px;padding:5px 11px;margin:0;
  border:1px solid #3a3a3a;border-radius:20px;background:transparent;
  color:#c9c5be;font-size:11px;line-height:1;letter-spacing:.02em;
  transition:color .2s ease,border-color .2s ease;
}
body.siavash-gallery-archive-page .gallery-lang:hover,body.siavash-gallery-archive-page .gallery-lang:focus-visible{color:#fff;border-color:#666}
body.siavash-gallery-archive-page .gallery-sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
body.siavash-gallery-archive-page .gallery-sidebar-bottom a:not(.gallery-lang):not(.gallery-nav-link){font-size:10px;color:#ddd;transition:color .22s ease,opacity .22s ease}
body.siavash-gallery-archive-page .gallery-sidebar-bottom small{font-size:8px;line-height:1.55;color:#888;margin-top:16px;letter-spacing:.05em}
/* v1.0.15 note superseded by v1.0.17 above — .gallery-content no longer
   needs any min-height of its own; it's a flex child that simply takes
   its natural content height, and .gallery-shell follows it exactly. */
body.siavash-gallery-archive-page .gallery-content{flex:1;min-width:0;padding:clamp(38px,4.5vw,64px) clamp(28px,4vw,58px) 80px}
body.siavash-gallery-archive-page .gallery-mobile-head{display:none}
body.siavash-gallery-archive-page .gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(42px,4.5vw,66px) clamp(28px,4vw,58px);align-items:start}
body.siavash-gallery-archive-page .gallery-tile{display:block;width:100%;min-width:0;height:auto;overflow:visible;background:transparent}
body.siavash-gallery-archive-page .gallery-tile>a{display:block;width:100%;color:#fff}
body.siavash-gallery-archive-page .gallery-tile-media{display:block;position:relative;width:100%;height:auto;aspect-ratio:1/1;min-height:0;overflow:hidden;background:#111}
body.siavash-gallery-archive-page .gallery-tile-media img{display:block;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;margin:0;padding:0;border:0;transform:scale(1);transition:transform .45s ease,opacity .3s ease}
body.siavash-gallery-archive-page .gallery-tile:hover .gallery-tile-media img{transform:scale(1.018)}
body.siavash-gallery-archive-page .gallery-tile-overlay{display:flex;min-height:0;padding:13px 1px 0;gap:18px;justify-content:space-between;align-items:baseline}
body.siavash-gallery-archive-page .gallery-tile-overlay h2{margin:0;font-family:var(--site-title-font);font-size:12px;line-height:1.5;font-weight:400;color:#fff}
body.siavash-gallery-archive-page .gallery-tile-overlay span{font-size:9.5px;line-height:1.5;color:#888;text-transform:uppercase;letter-spacing:.08em;text-align:end}
body.siavash-gallery-archive-page .gallery-no-results{padding:100px 0;color:#777;font-size:12px}
html[dir="rtl"] body.siavash-gallery-archive-page .gallery-tile-overlay span{text-align:start}
html[dir="rtl"] body.siavash-gallery-archive-page .gallery-brand strong{letter-spacing:0}

/* ---------- Gallery single/detail: fullscreen image + compact metadata preserved ---------- */
body.siavash-gallery-single-page{margin:0;padding:0;background:#000;color:#fff;overflow:hidden}
body.siavash-gallery-single-page #page,
body.siavash-gallery-single-page .site-content,
body.siavash-gallery-single-page .ast-container,
body.siavash-gallery-single-page .site-main,
body.siavash-gallery-single-page #content{padding:0!important;margin:0!important}
body.siavash-gallery-single-page #wpadminbar{display:none}
html[dir="rtl"] body.siavash-gallery-single-page,html[dir="rtl"] body.siavash-gallery-single-page *{font-family:"Vazirmatn",sans-serif}
html[dir="ltr"] body.siavash-gallery-single-page,html[dir="ltr"] body.siavash-gallery-single-page *{font-family:"Inter",sans-serif}
/* v1.0.10 — page now includes the site's fixed header, so the fullscreen
   layout starts below it instead of covering the full viewport from y:0. */
body.siavash-gallery-single-page .gallery-single-fullscreen{position:fixed;top:var(--sh-nav-h,74px);left:0;right:0;bottom:0;width:100vw;height:calc(100vh - var(--sh-nav-h,74px));min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;direction:ltr;background:#000;overflow:hidden}
/* v1.0.26 — Fix: this used to be a no-op (identical to the base rule
   above), so the details column stayed pinned to the physical right side
   in BOTH languages. Persian keeps the existing layout (image left,
   details right); English now mirrors it (details left, image right) by
   swapping both the column widths and the visual order of the two panels. */
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-fullscreen{grid-template-columns:250px minmax(0,1fr)}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-visual{order:2}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-details{order:1}
body.siavash-gallery-single-page .gallery-single-visual{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#101010cf,#1b1b1bb8);overflow:hidden}
body.siavash-gallery-single-page .gallery-single-visual img{display:block;position:absolute;inset:0;width:96%;height:96%;margin:auto;object-fit:contain;object-position:center;background:#0000}
body.siavash-gallery-single-page .gallery-single-details{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;background:#090909;box-sizing:border-box}
body.siavash-gallery-single-page .gallery-single-details::-webkit-scrollbar{display:none}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details{direction:rtl;text-align:right;border-inline-start:0;border-inline-end:1px solid var(--sh-divider-subtle)}
/* v1.0.26 — details panel is now on the left in English, next to the
   image on its right, so the divider border moves to the inline-end side
   (which resolves to the physical right edge under direction:ltr). */
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-details{direction:ltr;text-align:left;border-inline-start:0;border-inline-end:1px solid var(--sh-divider-subtle)}
body.siavash-gallery-single-page .gallery-single-details-inner{display:block;min-height:0;height:auto;padding:35px 26px 28px;margin:0;box-sizing:border-box}
body.siavash-gallery-single-page .gallery-single-back{display:inline-block;margin:0 0 10px;padding:0;font-family:var(--site-title-font);font-size:12px;line-height:1.4;color:#888;text-decoration:none;transition:color .22s ease,opacity .22s ease}
body.siavash-gallery-single-page .gallery-single-back:hover,body.siavash-gallery-single-page .gallery-single-back:focus-visible{color:#fff;opacity:1}
body.siavash-gallery-single-page .gallery-single-back-previous{display:block}
body.siavash-gallery-single-page .gallery-single-cat{margin:0 0 8px;padding:0;font-family:var(--site-title-font);font-size:9.5px;line-height:1.4;color:#777;letter-spacing:.08em}
body.siavash-gallery-single-page .gallery-single-details h1{margin:0 0 9px;padding:0;font-family:var(--site-title-font);font-size:18px;line-height:1.28;font-weight:500;color:#fff}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details h1{line-height:1.3;letter-spacing:0}
body.siavash-gallery-single-page .gallery-single-details .gallery-caption{margin:0 0 12px;padding:0;font-family:var(--site-title-font);font-size:10.5px;line-height:1.6;color:#aaa}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group{margin:0;padding:9px 0 10px;border:0;border-top:1px solid var(--sh-divider-subtle)}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group:first-of-type{border-top:0;padding-top:4px}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group h2{margin:0 0 5px;padding:0;font-family:var(--site-title-font);font-size:9px;line-height:1.4;font-weight:500;color:#858585;letter-spacing:.08em}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta,body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{margin:0;border:0}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{display:grid;grid-template-columns:minmax(70px,.7fr) minmax(0,1.3fr);gap:8px;padding:2.5px 0}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-project{display:grid;grid-template-columns:minmax(74px,.7fr) minmax(0,1.3fr);gap:8px;padding:2.5px 0}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta span{font-family:var(--site-title-font);font-size:9.5px;line-height:1.45;color:#707070}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta strong{font-family:var(--site-title-font);font-size:9.8px;line-height:1.45;font-weight:400;color:#9a9a9a;word-break:normal;overflow-wrap:anywhere;white-space:normal}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-project strong{display:block;color:#9a9a9a;text-align:start;white-space:normal;overflow-wrap:anywhere}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-lens{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;width:100%}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-lens span{white-space:nowrap;text-align:start}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-lens strong{display:block;width:auto;max-width:none;white-space:nowrap;overflow:visible;word-break:normal;overflow-wrap:normal;text-align:end;direction:ltr;font-size:9.5px;line-height:1.4}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical{border-top:1px solid var(--sh-divider-subtle);padding-top:10px}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical h2{margin-bottom:6px}
body.siavash-gallery-single-page .gallery-single-home{display:inline-block;margin:10px 0 0;padding:0;font-family:var(--site-title-font);font-size:12px;line-height:1.4;color:#888;text-decoration:none;transition:color .22s ease,opacity .22s ease}
body.siavash-gallery-single-page .gallery-single-home:hover,body.siavash-gallery-single-page .gallery-single-home:focus-visible{color:#fff;opacity:1}
body.siavash-gallery-single-page .gallery-single-home.sh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;margin-top:14px;border:1px solid #3c3c3c;border-radius:2px;
  color:#eee;font-size:11px;letter-spacing:.05em;
}
body.siavash-gallery-single-page .gallery-single-home.sh-btn:hover,body.siavash-gallery-single-page .gallery-single-home.sh-btn:focus-visible{color:#fff;border-color:#fff;opacity:1}


@media(max-width:900px){
  body.siavash-gallery-archive-page .gallery-shell{flex-direction:column}
  body.siavash-gallery-archive-page .gallery-sidebar{position:relative;flex:0 0 auto;width:100%;height:auto;inset:auto;border-inline:0;border-bottom:1px solid var(--sh-divider-subtle)}
  body.siavash-gallery-archive-page .gallery-sidebar-inner{height:auto;padding:28px 24px 24px}
  body.siavash-gallery-archive-page .gallery-brand{margin-bottom:28px}
  body.siavash-gallery-archive-page .gallery-nav{flex-direction:row;flex-wrap:wrap;gap:16px 24px}
  body.siavash-gallery-archive-page .gallery-sidebar-bottom{margin-top:20px}
  body.siavash-gallery-archive-page .gallery-sidebar-bottom>a:not(.gallery-lang):not(.gallery-nav-link),
  body.siavash-gallery-archive-page .gallery-sidebar-bottom>small{display:none}
  body.siavash-gallery-archive-page .gallery-content,html[dir="rtl"] body.siavash-gallery-archive-page .gallery-content{margin:0;padding:28px 24px 70px}
  body.siavash-gallery-archive-page .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}

  body.siavash-gallery-single-page{overflow:auto}
  body.siavash-gallery-single-page .gallery-single-fullscreen{position:relative;inset:auto;top:auto;width:100%;height:auto;min-height:calc(100vh - var(--sh-nav-h,68px));padding-top:var(--sh-nav-h,68px);display:block;overflow:visible;box-sizing:border-box}
  body.siavash-gallery-single-page .gallery-single-visual{position:sticky;top:var(--sh-nav-h,68px);z-index:2;width:100%;height:68vh;min-height:420px}
  body.siavash-gallery-single-page .gallery-single-details{height:auto;min-height:0;overflow:visible;position:relative;z-index:3;border:0}
  body.siavash-gallery-single-page .gallery-single-details-inner{padding:24px 20px 30px}
}
@media(max-width:768px){
  .siavash-portfolio-page .lightbox-box{grid-template-columns:1fr;height:90vh}
  .siavash-portfolio-page .lightbox-image{height:52vh;min-height:0}
  .siavash-portfolio-page .lightbox-details{border-inline-start:0;border-top:1px solid var(--sh-divider-subtle);padding:22px}
}
@media(max-width:600px){
  /* Archive Mobile: keep the category menu visible and usable above the gallery. */
  body.siavash-gallery-archive-page .gallery-sidebar{
    border-bottom:1px solid var(--sh-divider-subtle);
  }
  body.siavash-gallery-archive-page .gallery-sidebar-inner{
    padding:20px 18px 18px;
  }
  body.siavash-gallery-archive-page .gallery-brand{
    margin-bottom:18px;
  }
  body.siavash-gallery-archive-page .gallery-nav{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:0;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0 7px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.siavash-gallery-archive-page .gallery-nav::-webkit-scrollbar{display:none}
  body.siavash-gallery-archive-page .gallery-nav a{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border-inline-end:1px solid var(--sh-divider-subtle);
    font-size:10px;
    line-height:1.5;
    white-space:nowrap;
    opacity:.72;
  }
  body.siavash-gallery-archive-page .gallery-nav a:first-child{padding-inline-start:0}
  body.siavash-gallery-archive-page .gallery-nav a:last-child{border-inline-end:0}
  body.siavash-gallery-archive-page .gallery-nav a{position:relative;padding-bottom:6px}
  body.siavash-gallery-archive-page .gallery-nav a.is-active{opacity:1;color:#fff}
  body.siavash-gallery-archive-page .gallery-nav a.is-active:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:#fff}
  body.siavash-gallery-archive-page .gallery-sidebar-actions{
    display:none;
  }

  body.siavash-gallery-archive-page .gallery-mobile-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
  }
  body.siavash-gallery-archive-page .gallery-mobile-head a{color:#fff;font-size:10px}
  body.siavash-gallery-archive-page .gallery-mobile-head-end{display:flex;align-items:center;gap:10px}
  body.siavash-gallery-archive-page .gallery-mobile-head-home{color:#999}
  body.siavash-gallery-archive-page .gallery-mobile-head-home.sh-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:6px 12px;border:1px solid #3c3c3c;border-radius:2px;
    font-size:9.5px;color:#eee;
  }
  body.siavash-gallery-archive-page .gallery-mobile-head-home.sh-btn:hover{color:#fff;border-color:#fff}
  body.siavash-gallery-archive-page .gallery-mobile-head-lang{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;height:29px;padding:5px 10px;
    border:1px solid #3a3a3a;border-radius:20px;background:transparent;
    color:#c9c5be;font-size:10px;line-height:1;
    transition:color .2s ease,border-color .2s ease;
  }
  body.siavash-gallery-archive-page .gallery-mobile-head-lang:hover,
  body.siavash-gallery-archive-page .gallery-mobile-head-lang:focus-visible{color:#fff;border-color:#666}

  /* Mobile default: editorial square layout uses two equal columns. */
  body.siavash-gallery-archive-page .gallery-grid.is-editorial{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 12px;
  }
  body.siavash-gallery-archive-page .gallery-grid.is-editorial .gallery-tile-media,
  body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-media{
    aspect-ratio:1/1;
  }

  body.siavash-gallery-archive-page .gallery-grid.is-compact{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 9px;
  }
  body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay{
    display:block;
    padding-top:7px;
  }
  body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay h2{
    font-size:9px;
    line-height:1.5;
    margin:0 0 2px;
  }
  body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay span{
    display:block;
    font-size:7px;
    line-height:1.5;
  }

  body.siavash-gallery-single-page .gallery-single-visual{height:62vh;min-height:380px}
  body.siavash-gallery-single-page .gallery-single-details-inner{padding:18px 16px 28px}
  body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{grid-template-columns:1fr;gap:4px}
  /* v1.0.27 — this used to be the lower-specificity `.gallery-meta
     strong` and was silently defeated by the more specific base rule
     further down the file, so label/value stayed spread to opposite
     edges even in this single-column stacked layout instead of both
     starting from the same (leading) edge. Matching the base rule's
     selector still isn't enough to win here (it comes later in the
     file, so equal specificity resolves in its favor regardless of
     which media query matches) — !important is the correct fix for a
     narrow-breakpoint override of a more specific base rule, same as
     the existing .gallery-tile[hidden] override above. */
  body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div>strong{text-align:start !important}
  body.siavash-gallery-single-page .gallery-single-details h1{font-size:18px}
}

/* ---------- Gallery single: hover prev/next arrows + filmstrip (v1.0.36) ----------
   Arrows and filmstrip are hidden by default and revealed on hover of the
   image area, exactly like the reference photographer-portfolio sites.
   Touch devices have no hover, so .sh-controls-visible (toggled by
   gallery-single.js on tap, and briefly on load) shows them there instead.
   Arrow placement is intentionally physical left/right — not logical
   start/end — so "previous" stays on the physical left and "next" on the
   physical right in both Persian and English, matching how photo viewers
   (Google Photos, native camera rolls, etc.) behave regardless of the
   interface's reading direction. */
body.siavash-gallery-single-page .gallery-single-arrow{
  position:absolute;top:50%;z-index:5;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-top:-22px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(10,10,10,.42);backdrop-filter:blur(2px);
  color:#fff;font-size:20px;line-height:1;text-decoration:none;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease;
}
body.siavash-gallery-single-page .gallery-single-arrow span{transform:translateY(-1px)}
body.siavash-gallery-single-page .gallery-single-arrow-prev{left:16px}
body.siavash-gallery-single-page .gallery-single-arrow-next{right:16px}
body.siavash-gallery-single-page .gallery-single-visual:hover .gallery-single-arrow,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
body.siavash-gallery-single-page .gallery-single-visual.sh-controls-visible .gallery-single-arrow{
  opacity:1;pointer-events:auto;
}
body.siavash-gallery-single-page .gallery-single-arrow:hover,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible{
  background:rgba(10,10,10,.72);border-color:rgba(255,255,255,.5);
}
body.siavash-gallery-single-page .gallery-single-arrow:active{transform:scale(.92)}

body.siavash-gallery-single-page .gallery-single-filmstrip{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:14px 16px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
body.siavash-gallery-single-page .gallery-single-visual:hover .gallery-single-filmstrip,
body.siavash-gallery-single-page .gallery-single-filmstrip:focus-within,
body.siavash-gallery-single-page .gallery-single-visual.sh-controls-visible .gallery-single-filmstrip{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-track{
  display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-track::-webkit-scrollbar{display:none}
body.siavash-gallery-single-page .gallery-single-filmstrip-item{
  flex:0 0 46px;display:block;width:46px !important;height:46px !important;
  max-width:46px !important;max-height:46px !important;
  border-radius:2px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  opacity:.62;transition:opacity .18s ease,border-color .18s ease;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item:hover,
body.siavash-gallery-single-page .gallery-single-filmstrip-item:focus-visible{opacity:1;border-color:rgba(255,255,255,.5)}
body.siavash-gallery-single-page .gallery-single-filmstrip-item.is-current{opacity:1;border-color:#fff}
/* v1.0.38 — some image-optimization/lazy-load plugins (seen: WP Smush's
   --smush-placeholder-width/aspect-ratio custom properties, consumed by
   their own injected `width:var(--smush-placeholder-width)` stylesheet
   rule at the same specificity as ours) can win the cascade after gallery.css
   and force the <img> back to its native upload width (e.g. 150px) inside
   this 46px box — the photo then gets clipped to a thin, stretched-looking
   sliver instead of a clean square. !important guarantees this sizing
   can't be overridden by any such plugin, regardless of load order. */
body.siavash-gallery-single-page .gallery-single-filmstrip-item img{
  display:block !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  object-fit:cover !important;object-position:center;
  aspect-ratio:1/1 !important;
}
/* v1.0.39 — the template also now writes this exact sizing directly onto
   each <img>'s inline style attribute (single-siavash_gallery.php), so a
   third-party plugin rule would have to be inline *and* !important on that
   same element to still win — nothing external can. This stylesheet rule
   stays as a second line of defense (e.g. if a caching plugin ever strips
   inline styles) and must be kept in sync with that inline value. */
@media(hover:none){
  /* No hover on touch: keep controls faintly visible so they're
     discoverable, full opacity is handled by .sh-controls-visible
     (tap-to-toggle, and briefly on load) via gallery-single.js. */
  body.siavash-gallery-single-page .gallery-single-arrow{opacity:.55;pointer-events:auto}
  body.siavash-gallery-single-page .gallery-single-filmstrip{opacity:.9;transform:translateY(0);pointer-events:auto}
}
@media(max-width:600px){
  body.siavash-gallery-single-page .gallery-single-arrow{width:38px;height:38px;margin-top:-19px;font-size:17px}
  body.siavash-gallery-single-page .gallery-single-arrow-prev{left:10px}
  body.siavash-gallery-single-page .gallery-single-arrow-next{right:10px}
  body.siavash-gallery-single-page .gallery-single-filmstrip{padding:10px 10px 9px}
  body.siavash-gallery-single-page .gallery-single-filmstrip-item{width:38px !important;height:38px !important;max-width:38px !important;max-height:38px !important}
}

/* ---------- Gallery popup viewer (v1.0.37) ----------
   Opened by gallery-single.js when a photo is clicked from the Gallery
   grid or a Project page: it fetches that photo's real, independently
   crawlable page and mounts its exact `.gallery-single-fullscreen`
   markup here — same CSS as the standalone page above (activated by the
   `siavash-gallery-single-page` body class the script adds while open),
   just with a close button added and presented as an overlay instead of
   a full navigation. */
.sh-gallery-viewer-mount{display:none}
.sh-gallery-viewer-mount.is-open{
  display:block;position:fixed;inset:0;z-index:150;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sh-gallery-viewer-mount .gallery-single-fullscreen{
  animation:sh-gallery-viewer-in .22s ease both;
}
@media(prefers-reduced-motion:reduce){
  .sh-gallery-viewer-mount .gallery-single-fullscreen{animation:none}
}
@keyframes sh-gallery-viewer-in{
  from{opacity:0;transform:scale(.98)}
  to{opacity:1;transform:scale(1)}
}
.sh-gallery-viewer-close{
  position:fixed;top:calc(var(--sh-nav-h,74px) + 14px);z-index:160;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin:0;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,10,10,.5);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
html[dir="rtl"] .sh-gallery-viewer-close{left:18px}
html[dir="ltr"] .sh-gallery-viewer-close{right:18px}
.sh-gallery-viewer-close:hover,.sh-gallery-viewer-close:focus-visible{
  background:rgba(10,10,10,.8);border-color:rgba(255,255,255,.55);
}
.sh-gallery-viewer-close:active{transform:scale(.92)}
.sh-gallery-viewer-stage:empty{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
}
html.sh-gallery-viewer-lock,html.sh-gallery-viewer-lock body{overflow:hidden}
@media(max-width:600px){
  .sh-gallery-viewer-close{width:36px;height:36px;font-size:19px;top:14px}
  html[dir="rtl"] .sh-gallery-viewer-close{left:12px}
  html[dir="ltr"] .sh-gallery-viewer-close{right:12px}
}

/* Keep the square gallery grid exactly as designed */
.gallery-tile-media,
.gallery-tile-media img{
  aspect-ratio:1 / 1;
}

/* Full-image gallery/detail view: show the complete photograph */
.gallery-viewer img,
.single-gallery-image img,
.gallery-single-image img{
  object-fit:contain;
}

/* Reduce layout shifts around gallery image containers */
.gallery-tile-media{overflow:hidden;}

/* Compact mobile rhythm without changing the visual language */
@media (max-width: 767px){
  .site-header,
  header{
    max-width:100%;
  }

  .hero-title{
    text-wrap:balance;
  }

}

/* Very narrow phones */
@media (max-width: 390px){
  .hero-image{max-height:74svh;}
  .gallery-grid{width:100%;}
}

/* Avoid hover-only enlargement on touch devices */
@media (hover:none) and (pointer:coarse){
  .gallery-tile:hover img{transform:none;}
}

/* Gallery metadata: editorial two-column alignment.
   Label stays RTL/right-aligned; value stays LTR/left-aligned.
   Do not use text-align: end for the value column here. */
.gallery-meta .meta-row,
.single-gallery-meta .meta-row,
.gallery-viewer .meta-row,
.meta-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:18px;
  align-items:baseline;
}
.meta-row > span:first-child{
  text-align:right;
  justify-self:stretch;
}
.meta-row > span:last-child{
  text-align:left;
  justify-self:stretch;
  direction:ltr;
  unicode-bidi:plaintext;
}

/* Keep metadata stable on narrow screens. */
@media (max-width: 480px){
  .meta-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:12px;
  }
}

/* Gallery filter state: only one active filter should visually remain active. */
.gallery-filters [data-filter],
.gallery-filter [data-filter],
.filter-button[data-filter]{
  cursor:pointer;
}

/* Image rendering hints */
img{
  text-rendering:auto;
}

/* v4.2.1 — regression fix: the HTML hidden attribute must override
   the gallery tile's explicit display:block rule. */
body.siavash-gallery-archive-page .gallery-tile[hidden]{
  display:none !important;
}

/* Restore the intended editorial metadata alignment:
   label = leading edge, value = trailing edge.
   v1.0.27 — fix: this used text-align:right/left (physical), which only
   reads correctly in RTL (fa), where the grid's first column happens to
   land on the physical right. In LTR (en) the same grid places that
   column on the physical left, so the hardcoded "right" pinned the label
   against the inner/gap edge instead of the true left edge — and same
   for the value on the other side — leaving English EXIF rows crammed
   together instead of spread across the panel like every other page
   direction/dir case. text-align:start/end tracks the grid's own
   direction-based column placement instead of fighting it. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > span{
  text-align:start;
  justify-self:stretch;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > strong{
  text-align:end;
  justify-self:stretch;
  direction:ltr;
}

/* v4.3.1 — date metadata regression fix.
   Technical/EXIF values remain LTR, but the Persian date must retain
   its natural RTL word order: «۲۹ مرداد ۱۴۰۵».
   v1.0.27 — text-align:left changed to text-align:end for the same
   reason as above: it must land on the value column's trailing edge in
   both fa and en, not just fa. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > strong.gallery-meta-date-value{
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:end;
  white-space:nowrap;
}


/* v7.2 — Gallery display controls. Archive only. */
body.siavash-gallery-archive-page .gallery-toolbar{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 28px;
  position:relative;z-index:10;direction:ltr;
}
body.siavash-gallery-archive-page .gallery-control{position:relative;}
body.siavash-gallery-archive-page .gallery-control-button{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--sh-divider-subtle);background:#090909;color:#aaa;padding:0;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
body.siavash-gallery-archive-page .gallery-control-button:hover,
body.siavash-gallery-archive-page .gallery-control-button:focus-visible,
body.siavash-gallery-archive-page .gallery-control-button[aria-expanded="true"]{
  color:#f2efe8;border-color:#4a4a4a;background:#101010;
}
body.siavash-gallery-archive-page .gallery-control-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
body.siavash-gallery-archive-page .gallery-control-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:158px;
  display:flex;flex-direction:column;padding:6px;background:#101010;border:1px solid var(--sh-divider-subtle);
  box-shadow:0 12px 30px rgba(0,0,0,.28);z-index:30;direction:rtl;
}
body.siavash-gallery-archive-page .gallery-control-menu[hidden]{display:none!important}
body.siavash-gallery-archive-page .gallery-control-menu button{
  appearance:none;border:0;background:transparent;color:#999;text-align:start;padding:9px 10px;
  font:inherit;font-size:10px;line-height:1.6;cursor:pointer;white-space:nowrap;
}
body.siavash-gallery-archive-page .gallery-control-menu button:hover,
body.siavash-gallery-archive-page .gallery-control-menu button:focus-visible,
body.siavash-gallery-archive-page .gallery-control-menu button.is-selected{color:#f2efe8;background:#181818}
html[dir="ltr"] body.siavash-gallery-archive-page .gallery-control-menu{direction:ltr}

body.siavash-gallery-archive-page .gallery-grid.is-editorial{grid-template-columns:repeat(2,minmax(0,1fr));}
body.siavash-gallery-archive-page .gallery-grid.is-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-media{aspect-ratio:1/1;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay{padding-top:10px;gap:12px;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay h2{font-size:11px;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay span{font-size:8px;}

@media(max-width:1100px){
  body.siavash-gallery-archive-page .gallery-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px;}
}
@media(max-width:900px){
  body.siavash-gallery-archive-page .gallery-toolbar{margin-bottom:24px;}
  /* "مربع بزرگ" (editorial) stays single-column/large on mobile;
     "مربع کوچک" (compact) stays a 2-column small grid. Previously both
     were forced to the same repeat(2,...) here, so the toggle had no
     visible effect on mobile — kept intentionally distinct now. */
  body.siavash-gallery-archive-page .gallery-grid.is-editorial{grid-template-columns:repeat(1,minmax(0,1fr));}
  body.siavash-gallery-archive-page .gallery-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
  body.siavash-gallery-archive-page .gallery-toolbar{
    margin-bottom:22px;
    justify-content:flex-start;
    gap:7px;
  }
  body.siavash-gallery-archive-page .gallery-control-button{
    width:36px;
    height:36px;
  }
  /* The dropdown used to be positioned absolute relative to the small
     36px button itself, which on narrow screens could push it past the
     viewport edge and create horizontal scroll. Anchoring it to the
     full-width toolbar instead guarantees it always stays on-screen. */
  body.siavash-gallery-archive-page .gallery-control{position:static;}
  body.siavash-gallery-archive-page .gallery-control-menu{
    position:absolute;
    inset-inline-start:12px;
    inset-inline-end:12px;
    left:12px;
    right:12px;
    width:auto;
    min-width:0;
    max-width:none;
  }
}
@media(max-width:390px){
  body.siavash-gallery-archive-page .gallery-sidebar-inner{padding-inline:14px;}
  body.siavash-gallery-archive-page .gallery-grid.is-editorial{
    grid-template-columns:repeat(1,minmax(0,1fr));
    gap:20px 8px;
  }
  body.siavash-gallery-archive-page .gallery-grid.is-compact{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 8px;
  }
}


/* v1.0 semantic archive heading/pagination — matches the existing gallery visual system. */
.gallery-archive-head{padding:28px 0 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px}
.gallery-archive-head h1{margin:0;font-size:clamp(28px,4vw,48px);font-weight:400;line-height:1.15}
.gallery-archive-head p{margin:8px 0 0;color:#8f8f8f;max-width:60ch;font-size:13px}
.gallery-pagination{padding:28px 0 10px}
.gallery-pagination ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.gallery-pagination a,.gallery-pagination span{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--sh-divider-subtle);padding:0 9px;color:#aaa;font-size:11px}
.gallery-pagination .current{color:#fff;border-color:#777}


/* v1.0.3 — mobile EXIF hardening. Keep the existing editorial visual
   language while preventing malformed/long metadata from overflowing. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > strong{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}
@media(max-width:600px){
  body.siavash-gallery-single-page .gallery-single-details .gallery-meta,
  body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div{
    min-width:0;
    width:100%;
  }
}