/* ============================================================
   GALLERY PAGE — Smart Expos & Events Morocco
   ============================================================ */

:root {
  --gold:     #d4af37;
  --gold-lt:  #f0c030;
  --navy:     #05101f;
  --navy-mid: #0a2540;
  --white:    #ffffff;
}

/* ── Hero ── */
.sg-hero {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy);
}

.sg-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sg-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(5,16,31,0.80) 0%, rgba(10,37,64,0.65) 100%);
  z-index: 1;
}

.sg-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}

.sg-hero__kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 50px;
  padding: 5px 18px;
  margin-bottom: 18px;
}

.sg-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 0 0 14px;
}

.sg-hero__title em {
  font-style: normal;
  color: var(--gold);
}

.sg-hero__sub {
  font-size: clamp(0.88rem, 1.8vw, 1.05rem);
  color: rgba(255,255,255,0.70);
  max-width: 540px;
  margin: 0 auto 22px;
  line-height: 1.65;
}

.sg-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

.sg-hero__breadcrumb a {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color .2s;
}
.sg-hero__breadcrumb a:hover { color: var(--gold); }

/* ── Section layout ── */
.sg-section {
  padding: 70px 0 100px;
  background: #f8f7f4;
}

.sg-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.sg-section-header {
  text-align: center;
  margin-bottom: 54px;
}

.sg-kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 50px;
  padding: 5px 18px;
  margin-bottom: 14px;
}

.sg-title {
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--navy-mid);
  margin: 0 0 10px;
}

.sg-lead {
  font-size: 1rem;
  color: #777;
}

/* ── Logos grid ── */
.sg-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

/* ── Logo card — 3D flip wrapper ── */
.sg-logo-card {
  perspective: 1000px;
  height: 240px;
  opacity: 0;
  transform: translateY(28px);
  cursor: default;
}

.sg-logo-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}

.sg-logo-card.has-photos { cursor: pointer; }

/* Inner — the thing that flips */
.sg-logo-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  border-radius: 16px;
}

.sg-logo-card.is-flipped .sg-logo-card__inner {
  transform: rotateY(180deg);
}

/* Shared face styles */
.sg-logo-card__front,
.sg-logo-card__back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* ── FRONT ── */
.sg-logo-card__front {
  background: #fff;
  box-shadow: 0 4px 20px rgba(5,16,31,0.08);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, box-shadow .3s;
}

.sg-logo-card.has-photos:hover .sg-logo-card__front {
  border-color: var(--gold);
  box-shadow: 0 14px 44px rgba(5,16,31,0.14);
}

.sg-logo-card__img-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  border-bottom: 1px solid #f0ede6;
}

.sg-logo-card__img-wrap img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
}

.sg-logo-card.has-photos:hover .sg-logo-card__img-wrap img {
  transform: scale(1.07);
}

/* Hover overlay on front */
.sg-logo-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,16,31,0.74);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}

.sg-logo-card.has-photos:hover .sg-logo-card__overlay { opacity: 1; }

.sg-logo-card__view {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(212,175,55,0.18);
  border: 1.5px solid var(--gold);
  border-radius: 50px;
  padding: 9px 20px;
  backdrop-filter: blur(4px);
}

.sg-logo-card__view svg {
  width: 15px; height: 15px;
  stroke: var(--gold); flex-shrink: 0;
}

/* Info bar on front */
.sg-logo-card__info {
  padding: 10px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
}

.sg-logo-card__name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-mid);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sg-logo-card__tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 50px;
  padding: 3px 9px;
  flex-shrink: 0;
}

/* ── BACK ── */
.sg-logo-card__back {
  background: var(--navy);
  border: 2px solid rgba(212,175,55,0.25);
  box-shadow: 0 14px 44px rgba(0,0,0,0.35);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
}

.sg-logo-card__back-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.sg-logo-card__back-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 36px);
}

.sg-logo-card__back-close {
  width: 26px; height: 26px;
  flex-shrink: 0;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}

.sg-logo-card__back-close:hover {
  background: var(--gold);
  color: var(--navy);
  transform: rotate(90deg);
}

/* Photos mini-grid on back */
.sg-logo-card__photos {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  overflow: hidden;
}

.sg-photo-thumb {
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color .2s, transform .2s;
  aspect-ratio: 1;
}

.sg-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-photo-thumb:hover {
  border-color: var(--gold);
  transform: scale(1.04);
}

/* Empty */
.sg-empty {
  text-align: center;
  padding: 80px 0;
  color: #999;
  grid-column: 1/-1;
}

/* ── Lightbox ── */
.sg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sg-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,16,31,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .4s ease;
}

.sg-lightbox.is-open {
  pointer-events: all;
}

.sg-lightbox.is-open .sg-lightbox__backdrop {
  opacity: 1;
}

/* Panel */
.sg-lightbox__panel {
  position: relative;
  z-index: 2;
  width: min(900px, 94vw);
  background: #0b1c30;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.22);
  box-shadow: 0 60px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* entry animation — flies in from below with 3D tilt */
  opacity: 0;
  transform: perspective(1200px) translateY(60px) rotateX(10deg) scale(0.88);
  transition:
    opacity    .5s cubic-bezier(.2,.8,.3,1),
    transform  .5s cubic-bezier(.2,.8,.3,1);
}

.sg-lightbox.is-open .sg-lightbox__panel {
  opacity: 1;
  transform: perspective(1200px) translateY(0) rotateX(0deg) scale(1);
}

/* Header */
.sg-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(212,175,55,0.12);
  flex-shrink: 0;
}

.sg-lightbox__event-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 50px);
}

.sg-lightbox__close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}

.sg-lightbox__close:hover {
  background: var(--gold);
  color: var(--navy);
  transform: rotate(90deg);
}

/* Stage */
.sg-lightbox__stage {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: #08152a;
}

.sg-lightbox__prev,
.sg-lightbox__next {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin: 0 8px;
  background: rgba(212,175,55,0.10);
  border: 1.5px solid rgba(212,175,55,0.25);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}

.sg-lightbox__prev:hover,
.sg-lightbox__next:hover {
  background: var(--gold);
  color: var(--navy);
}

.sg-lightbox__prev svg,
.sg-lightbox__next svg { width: 20px; height: 20px; }

.sg-lightbox__img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  min-height: 340px;
  position: relative;
}

/* gold line bottom glow */
.sg-lightbox__img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
}

.sg-lightbox__img {
  max-width: 100%;
  max-height: 58vh;
  border-radius: 10px;
  object-fit: contain;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transition:
    opacity   .35s cubic-bezier(.4,0,.2,1),
    transform .35s cubic-bezier(.4,0,.2,1);
}

/* exit — flip away */
.sg-lightbox__img.is-exit {
  opacity: 0;
  transform: perspective(800px) rotateY(-25deg) scale(0.88) translateX(-30px);
}

/* enter — flip in */
.sg-lightbox__img.is-enter {
  opacity: 0;
  transform: perspective(800px) rotateY(25deg) scale(0.88) translateX(30px);
}

.sg-lightbox__img.is-loading {
  opacity: 0;
  transform: perspective(800px) rotateX(12deg) scale(0.92);
}

/* Footer — thumbnails + counter */
.sg-lightbox__footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(212,175,55,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.sg-lightbox__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}

.sg-lightbox__thumbs::-webkit-scrollbar { display: none; }

.sg-lb-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  opacity: 0.55;
}

.sg-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-lb-thumb.is-active {
  border-color: var(--gold);
  opacity: 1;
  transform: scale(1.08);
}

.sg-lb-thumb:hover { opacity: 0.9; }

.sg-lightbox__counter {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.40);
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sg-logos-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
  .sg-logo-card  { height: 220px; }
  .sg-hero       { height: 360px; }
  .sg-container  { padding: 0 20px; }
}

@media (max-width: 600px) {
  .sg-logos-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sg-logo-card  { height: 190px; }
  .sg-hero       { height: 260px; }
  .sg-hero__title  { font-size: clamp(5px, 6vw, 16px); }
  .sg-hero__sub    { font-size: 7px; }
  .sg-hero__kicker { font-size: 0.55rem; padding: 3px 12px; }
  .sg-section    { padding: 36px 0 60px; }
  .sg-container  { padding: 0 12px; }
  .sg-section-header { margin-bottom: 32px; }
  .sg-logo-card__img-wrap img { max-height: 70px; }
  .sg-lightbox__prev, .sg-lightbox__next { width: 34px; height: 34px; margin: 0 2px; }
  .sg-lightbox__prev svg, .sg-lightbox__next svg { width: 15px; height: 15px; }
  .sg-lb-thumb { width: 38px; height: 38px; }
  .sg-lightbox__img-wrap { padding: 16px 4px; min-height: 240px; }
  .sg-lightbox__img { max-height: 50vh; }
  .sg-lightbox__footer { padding: 10px 14px; }
  .sg-lightbox__panel { border-radius: 14px; }
  .sg-hero__content {
  margin-top: 5rem;
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}
}

@media (max-width: 380px) {
  .sg-logos-grid { grid-template-columns: 1fr; }
  .sg-logo-card  { height: 200px; }
  .sg-events-grid { grid-template-columns: 1fr; }
}

/* ── Placeholder (no logo) ── */
.sg-logo-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%; height: 100%;
  color: #bbb;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 12px;
}
.sg-logo-card__placeholder svg {
  width: 36px; height: 36px;
  stroke: #ddd;
}

/* ── Back link to event page ── */
.sg-logo-card__back-link {
  display: block;
  text-align: center;
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.5px;
  padding: 2px 0;
  transition: opacity .2s;
  flex-shrink: 0;
}
.sg-logo-card__back-link:hover { opacity: 0.75; }

/* ── Categories Section ── */
.sg-section--dark { background: #060f1d; }

/* Album cards grid */
.sg-albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.sg-album-card {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.12);
  cursor: pointer;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.sg-album-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  border-color: rgba(212,175,55,0.35);
}

.sg-album-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #0a1a2e;
}
.sg-album-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.sg-album-card:hover .sg-album-card__img-wrap img { transform: scale(1.06); }

.sg-album-card__no-img {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-album-card__no-img svg {
  width: 44px; height: 44px;
  stroke: rgba(212,175,55,0.25);
}

.sg-album-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,16,31,0.75) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .3s;
}
.sg-album-card:hover .sg-album-card__overlay { opacity: 1; }
.sg-album-card__overlay svg { width: 26px; height: 26px; stroke: #fff; }
.sg-album-card__overlay span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.sg-album-card__info {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sg-album-card__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.sg-album-card__count {
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Photo panel (shown after clicking a category card) */
.sg-cat-photo-panel { margin-top: 20px; }

.sg-cat-panel-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.sg-cat-panel-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  color: rgba(255,255,255,0.7);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: all .2s;
}
.sg-cat-panel-back svg { width: 14px; height: 14px; }
.sg-cat-panel-back:hover { border-color: rgba(212,175,55,0.5); color: var(--gold); }

.sg-cat-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
}

/* Masonry grid for photos inside panel */
.sg-cat-grid {
  columns: 4;
  column-gap: 12px;
}
.sg-cat-photo {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: block;
}
.sg-cat-photo img {
  width: 100%;
  display: block;
  transition: transform .35s ease;
}
.sg-cat-photo:hover img { transform: scale(1.05); }
.sg-cat-photo__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,16,31,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.sg-cat-photo:hover .sg-cat-photo__overlay { opacity: 1; }
.sg-cat-photo__overlay svg { width: 26px; height: 26px; stroke: #fff; }

@media (max-width: 1100px) {
  .sg-albums-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 900px) {
  .sg-cat-grid { columns: 3; }
}
@media (max-width: 600px) {
  .sg-albums-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sg-cat-grid { columns: 2; }
}
@media (max-width: 380px) {
  .sg-albums-grid { grid-template-columns: 1fr; }
  .sg-cat-grid { columns: 1; }
}