/* =========================================================
   PersianOnyx — Gallery Showcase (Premium Edition)
   Teal/purple gradient language, glass cards, RTL-safe
   ========================================================= */

:root{
  --pg-teal: var(--po-teal, #009688);
  --pg-purple: #8e24aa;
  --pg-teal-deep: #00695f;
  --pg-onyx: var(--onyx, #07191E);
  --pg-gold: #c9a227;
  --pg-border: rgba(0,0,0,0.08);
  --pg-radius-lg: 22px;
  --pg-radius-md: 16px;
}
body.dark-mode{ --pg-border: rgba(255,255,255,0.1); }

/* ── Status pills ─────────────────────────────────────── */
.po-gallery-status-pill,
.po-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.po-status-upcoming{ background:rgba(142,36,170,.16); color:#c98be0; border:1px solid rgba(142,36,170,.3); }
.po-status-ongoing{ background:rgba(0,150,136,.16); color:#3fd9c4; border:1px solid rgba(0,150,136,.35); }
.po-status-past{ background:rgba(150,150,150,.16); color:#aaa; border:1px solid rgba(150,150,150,.3); }
body.dark-mode .po-status-upcoming{ background:rgba(142,36,170,.28); color:#e3bdf2; }
body.dark-mode .po-status-ongoing{ background:rgba(0,150,136,.28); color:#8ef2e2; }

/* ── Archive header ───────────────────────────────────── */
.po-gallery-archive-header{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(56px,7vw,96px) 20px clamp(28px,3vw,44px);
  background:
    radial-gradient(circle at 20% -10%, rgba(0,150,136,.14), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(142,36,170,.16), transparent 55%);
}
.po-gallery-eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
  background:linear-gradient(120deg,var(--pg-teal),var(--pg-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.po-gallery-archive-sub{max-width:640px;margin:16px auto 0;color:var(--charcoal-muted,#6b6b6b);font-size:16px;line-height:1.8;}

/* ── Filter bar ───────────────────────────────────────── */
.po-gallery-filters{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  margin:30px 0 40px;
}
.po-gallery-filter-btn{
  padding:10px 22px;border-radius:999px;border:1px solid var(--pg-border);
  background:transparent;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .3s cubic-bezier(.16,1,.3,1);text-decoration:none;color:inherit;
}
.po-gallery-filter-btn:hover{ border-color:var(--pg-teal); color:var(--pg-teal); transform:translateY(-2px); }
.po-gallery-filter-btn.is-active{
  background:linear-gradient(135deg,var(--pg-teal) 0%,var(--pg-purple) 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 12px 28px rgba(0,150,136,.28);
}
.po-gallery-filter-sep{ width:1px;height:22px;background:var(--pg-border); margin:0 6px; }
.po-gallery-filter-tag{ opacity:.85; }

/* ── Grid & Card ──────────────────────────────────────── */
.po-gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);
  padding-bottom:clamp(44px,5vw,76px);
}
@media (max-width:960px){ .po-gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .po-gallery-grid{ grid-template-columns:1fr; } }

.po-gallery-card{
  position:relative;border-radius:var(--pg-radius-md);overflow:hidden;
  background:var(--pure-white,#fff);border:1px solid var(--pg-border);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.po-gallery-card:hover{ transform:translateY(-8px); box-shadow:0 26px 56px rgba(0,0,0,.12); border-color:transparent; }
.po-gallery-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(0,150,136,.5),rgba(142,36,170,.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
.po-gallery-card:hover::before{ opacity:1; }
.po-gallery-card-link{ display:block; color:inherit; text-decoration:none; }
.po-gallery-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cream,#f3efe7); }
.po-gallery-card-img img{ width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1); }
.po-gallery-card:hover .po-gallery-card-img img{ transform:scale(1.08); }
.po-gallery-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,25,30,.55) 100%);
}
.po-gallery-card-img-fallback{ width:100%;height:100%;background:linear-gradient(135deg,var(--pg-teal),var(--pg-purple)); opacity:.18; }
.po-gallery-card-img .po-gallery-status-pill{ position:absolute; top:14px; inset-inline-end:14px; z-index:2; }
.po-gallery-card-body{ padding:22px; display:flex; flex-direction:column; gap:9px; }
.po-gallery-card-type{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--pg-teal); }
.po-gallery-card-title{ font-family:var(--font-serif); font-size:19px; font-weight:700; line-height:1.4; }
.po-gallery-card-loc,.po-gallery-card-dates{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--charcoal-muted,#6b6b6b); }
.po-gallery-card-loc svg,.po-gallery-card-dates svg{ flex-shrink:0; color:var(--pg-teal); }

/* ── Single: Hero ─────────────────────────────────────── */
.po-gallery-hero{ position:relative; min-height:clamp(360px,46vw,560px); display:flex; align-items:flex-end; overflow:hidden; }
.po-gallery-hero-img{
  position:absolute; inset:0; width:100%; height:110%; object-fit:cover;
  animation:po-hero-zoom 22s ease-in-out infinite alternate;
}
@keyframes po-hero-zoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.po-gallery-hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,25,30,.1) 0%, rgba(7,25,30,.35) 55%, rgba(7,25,30,.92) 100%),
    radial-gradient(ellipse at 75% 15%, rgba(142,36,170,.22), transparent 60%);
}
.po-gallery-hero-content{ position:relative; z-index:2; padding-bottom:clamp(32px,4.5vw,58px); display:flex; flex-direction:column; gap:14px; }
.po-gallery-hero-type{
  color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  display:inline-flex; align-items:center; gap:8px; opacity:.9;
}
.po-gallery-hero-type::before{ content:''; width:22px; height:1px; background:var(--pg-teal); }
.po-gallery-hero-title{
  font-family:var(--font-serif); color:#fff; font-size:clamp(30px,4.5vw,52px); font-weight:700;
  line-height:1.2; margin:2px 0 0; text-shadow:0 4px 24px rgba(0,0,0,.35); max-width:820px;
}
.po-gallery-hero-loc{ display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.88); font-size:14.5px; }
.po-gallery-hero-loc svg{ color:var(--pg-teal); flex-shrink:0; }

/* ── Single: layout ───────────────────────────────────── */
.po-gallery-single-layout{
  display:grid; grid-template-columns:2fr 1fr; gap:clamp(30px,4vw,60px);
  padding:clamp(36px,4.5vw,60px) clamp(20px,4vw,40px);
}
@media (max-width:900px){ .po-gallery-single-layout{ grid-template-columns:1fr; } }

.po-gallery-facts{
  display:flex; flex-wrap:wrap; gap:14px; padding-bottom:28px; margin-bottom:28px;
  border-bottom:1px solid var(--pg-border);
}
.po-fact{
  display:flex; align-items:center; gap:12px; padding:14px 20px; border-radius:14px;
  background:linear-gradient(135deg, rgba(0,150,136,.06), rgba(142,36,170,.05));
  border:1px solid var(--pg-border); min-width:150px;
}
body.dark-mode .po-fact{ background:linear-gradient(135deg, rgba(0,150,136,.1), rgba(142,36,170,.08)); }
.po-fact-icon{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--pg-teal),var(--pg-purple)); color:#fff; flex-shrink:0;
}
.po-fact-label{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--pg-teal); margin-bottom:2px; }
.po-fact-value{ display:block; font-size:14.5px; font-weight:700; }

.po-gallery-description{ font-size:17px; line-height:1.9; }

.po-gallery-block-title{
  position:relative; display:flex; align-items:center; gap:12px; font-family:var(--font-serif);
  font-size:20px; font-weight:700; margin:0 0 18px;
}
.po-block-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--pg-teal),var(--pg-purple)); color:#fff; flex-shrink:0;
  box-shadow:0 8px 18px rgba(0,150,136,.28);
}

.po-gallery-artists{ margin-top:36px; }
.po-gallery-artist-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.po-gallery-artist-chip{
  padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:linear-gradient(135deg, rgba(0,150,136,.08), rgba(142,36,170,.08));
  border:1px solid var(--pg-border); transition:all .25s ease;
}
.po-gallery-artist-chip:hover{ border-color:var(--pg-teal); transform:translateY(-2px); }

.po-gallery-photos{ margin-top:36px; }
.po-gallery-photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:600px){ .po-gallery-photo-grid{ grid-template-columns:repeat(2,1fr); } }
.po-gallery-photo-item{ display:block; aspect-ratio:1; overflow:hidden; border-radius:14px; position:relative; }
.po-gallery-photo-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.po-gallery-photo-item:hover img{ transform:scale(1.1); }

/* ── Sponsors ─────────────────────────────────────────── */
.po-gallery-sponsors{ margin-top:44px; padding-top:36px; border-top:1px solid var(--pg-border); }
.po-sponsor-tier{ margin-bottom:28px; }
.po-sponsor-tier-label{
  display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:16px; color:var(--charcoal-muted,#6b6b6b);
}
.po-sponsor-tier-label::after{ content:''; flex:1; height:1px; background:var(--pg-border); }
.po-sponsor-tier-platinum .po-sponsor-tier-label{ color:var(--pg-gold); }
.po-sponsor-tier-gold .po-sponsor-tier-label{ color:#c9a227; }
.po-sponsor-tier-silver .po-sponsor-tier-label{ color:#9098a3; }
.po-sponsor-tier-supporter .po-sponsor-tier-label,
.po-sponsor-tier-media .po-sponsor-tier-label{ color:var(--pg-teal); }

.po-sponsor-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.po-sponsor-card{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:126px; padding:18px 12px; border-radius:16px; text-decoration:none; color:inherit;
  border:1px solid var(--pg-border); background:var(--pure-white,#fff);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
body.dark-mode .po-sponsor-card{ background:rgba(255,255,255,.03); }
.po-sponsor-card:hover{ transform:translateY(-4px); border-color:var(--pg-teal); box-shadow:0 14px 30px rgba(0,150,136,.16); }
.po-sponsor-card img{ width:58px; height:58px; object-fit:contain; }
.po-sponsor-fallback{
  display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--pg-teal),var(--pg-purple)); color:#fff; font-weight:800; font-size:15px;
}
.po-sponsor-name{ font-size:11.5px; font-weight:700; text-align:center; line-height:1.35; }

.po-sponsor-tier-platinum .po-sponsor-card{ border-color:rgba(201,162,39,.4); background:linear-gradient(160deg,rgba(201,162,39,.08),transparent); }
.po-sponsor-tier-platinum .po-sponsor-card:hover{ border-color:var(--pg-gold); box-shadow:0 14px 30px rgba(201,162,39,.22); }
.po-sponsor-tier-gold .po-sponsor-card{ border-color:rgba(201,162,39,.28); }

/* ── Sidebar cards (glass) ────────────────────────────── */
.po-gallery-sidebar{ position:relative; }
.po-gallery-side-card{
  position:relative; overflow:hidden;
  background:var(--pure-white,#fff); border:1px solid var(--pg-border); border-radius:var(--pg-radius-lg);
  padding:clamp(22px,2vw,28px); margin-bottom:24px;
  box-shadow:0 18px 44px rgba(7,25,30,.05);
}
body.dark-mode .po-gallery-side-card{
  background:radial-gradient(circle at top right, rgba(142,36,170,.08), rgba(255,255,255,.02));
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}

.po-tt-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.po-tt-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--pg-border); font-size:13.5px; }
.po-tt-row:last-child{ border-bottom:none; }
.po-tt-row.is-today{
  font-weight:800; margin:0 -14px; padding:10px 14px; border-radius:10px; border-bottom:none;
  background:linear-gradient(135deg, rgba(0,150,136,.1), rgba(142,36,170,.08));
  color:var(--pg-teal);
}
.po-tt-row.is-closed .po-tt-hours{ color:#c4603c; }
.po-tt-today-tag{
  display:inline-block; margin-inline-start:8px; font-size:9px; font-weight:800; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:linear-gradient(135deg,var(--pg-teal),var(--pg-purple)); color:#fff; letter-spacing:.05em;
}
.po-tt-notes{ margin-top:14px; font-size:12.5px; color:var(--charcoal-muted,#6b6b6b); line-height:1.7; padding-top:12px; border-top:1px dashed var(--pg-border); }

.po-contact-line{ font-size:14px; margin-bottom:10px; word-break:break-word; line-height:1.7; color:var(--charcoal-muted,#6b6b6b); }
.po-contact-line a{ color:inherit; text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.po-contact-line a:hover{ color:var(--pg-teal); }

.po-gallery-cta-stack{ display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.po-gallery-cta{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center; gap:8px;
  padding:14px 22px; border-radius:100px; font-size:13.5px; font-weight:800; text-decoration:none;
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.po-gallery-cta-primary{
  background:linear-gradient(135deg,var(--pg-teal) 0%,var(--pg-purple) 100%); color:#fff;
  box-shadow:0 14px 30px rgba(142,36,170,.28);
}
.po-gallery-cta-primary:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(142,36,170,.4); color:#fff; }
.po-gallery-cta-primary::after{
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .6s ease;
}
.po-gallery-cta-primary:hover::after{ left:150%; }
.po-gallery-cta-outline{ border:1.5px solid var(--pg-border); color:inherit; }
.po-gallery-cta-outline:hover{ border-color:var(--pg-teal); color:var(--pg-teal); transform:translateY(-2px); }

/* ── Related ──────────────────────────────────────────── */
.po-gallery-related{ padding:clamp(36px,4.5vw,60px) clamp(20px,4vw,40px); border-top:1px solid var(--pg-border); }
.po-gallery-related-title{ font-family:var(--font-serif); font-size:clamp(23px,2.5vw,30px); margin-bottom:26px; }

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width:640px){
  .po-gallery-hero{ min-height:300px; }
  .po-fact{ flex:1 1 100%; }
  .po-sponsor-card{ width:100px; padding:14px 8px; }
}
/* ── City Filter Styling ────────────────────────────────────── */
.po-gallery-filter-city {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.po-gallery-filter-city::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pg-teal) 0%, var(--pg-purple) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.po-gallery-filter-city:hover::before {
  opacity: 0.2;
}
.po-gallery-filter-city.is-active::before {
  opacity: 1;
}
.po-gallery-filter-city.is-active {
  background: linear-gradient(135deg, var(--pg-teal) 0%, var(--pg-purple) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 150, 136, 0.28);
  position: relative;
  z-index: 1;
}

/* ── City Display in Card ───────────────────────────────────── */
.po-gallery-card-city {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--pg-teal);
  font-weight: 600;
}
.po-gallery-card-city svg {
  flex-shrink: 0;
  color: var(--pg-teal);
}

/* ── City Display in Hero ───────────────────────────────────── */
.po-gallery-hero-loc-detail {
  opacity: 0.85;
  font-weight: normal;
}

/* ── City Fact Styling ──────────────────────────────────────── */
.po-gallery-facts .po-fact:first-child {
  border-left: 2px solid var(--pg-teal);
}

/* ── Responsive Adjustments for City Filters ────────────────── */
@media (max-width: 768px) {
  .po-gallery-filters {
    gap: 8px;
  }
  .po-gallery-filter-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
  .po-gallery-filter-city {
    font-size: 11.5px;
    padding: 7px 14px;
  }
}

@media (max-width: 640px) {
  .po-gallery-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .po-gallery-filter-btn,
  .po-gallery-filter-city {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .po-gallery-filter-sep {
    display: none;
  }
}

/* ── Gallery Card: Logo + Name header row ──────────────── */
.po-gallery-card-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px 12px;
}
.po-gallery-card-logo{
  flex-shrink:0; width:44px; height:44px; border-radius:12px; overflow:hidden;
  background:var(--cream,#f3efe7); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--pg-border);
}
.po-gallery-card-logo img{ width:100%; height:100%; object-fit:contain; padding:4px; }
.po-gallery-card-logo-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--pg-teal),var(--pg-purple)); color:#fff; font-weight:800; font-size:16px;
}
.po-gallery-card-headtext{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.po-gallery-card-headtext .po-gallery-card-type{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--pg-teal); }
.po-gallery-card-headtext .po-gallery-card-title{
  font-family:var(--font-serif); font-size:17px; font-weight:700; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Card body no longer needs to repeat the title/type — img sits directly below the head row */
.po-gallery-card-body{ padding:14px 18px 20px; display:flex; flex-direction:column; gap:8px; }
/* ── Gallery Logo Styling ───────────────────────────────────── */

/* Logo in Card */
.po-gallery-card-logo {
  position: absolute;
  bottom: 150px;
  /* left: 16px; */
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(7, 25, 30, 0.12);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.po-gallery-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.po-gallery-card-logo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: var(--pg-teal);
  background: linear-gradient(135deg, rgba(0, 150, 136, 0.1), rgba(142, 36, 170, 0.08));
}
.po-gallery-card:hover .po-gallery-card-logo {
  background: rgba(255, 255, 255, 1);
  border-color: var(--pg-teal);
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo in Hero */
.po-gallery-hero-logo {
  /* position: absolute; */
  top: 24px;
  right: 24px;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.po-gallery-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Responsive Logo Adjustments */
@media (max-width: 768px) {
      .po-gallery-card-logo {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        bottom: 150px;
    }
  
  .po-gallery-card-logo-fallback {
    font-size: 14px;
  }
  
  .po-gallery-hero-logo {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 680px) {
  .po-gallery-hero-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    top: 12px;
    right: 12px;
  }
  .po-gallery-card-logo {
    width: 66px;
    height: 66px;
    border-radius: 10px;
    top: 16px;
    }
}