/* ============================================================
   CREATIVE GALLERY · styles
   Visual parity with the React/Tailwind bundle it replaced in 2026-11.
   ============================================================ */

.cg {
  --cg-violet: #9400CB;
  --cg-violet-dark: #6F009C;
  --cg-menu: #2a0f3d;
  width: 100%;
  min-height: 100dvh;
  background: #121212;
  color: rgba(255, 255, 255, 0.87);
  overflow: hidden;
}

:where(.cg) button { font: inherit; }

/* ---------- hero ---------- */
.cg-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 800px;
  background-size: cover;
  background-position: center;
}

.cg-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 140px;
  color: #fff;
  text-align: center;
}

.cg-hero__title {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 800px;
  margin: 0 auto 20px;
  color: #fff;
  text-wrap: wrap;
}

.cg-hero__lead {
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  opacity: 0.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- buttons ---------- */
.cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 66px;
  border: 0;
  font-family: "Poppins", sans-serif !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4286;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.cg-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cg-btn:disabled { opacity: .5; cursor: not-allowed; }

.cg-btn--primary { background: #fff; color: #000; }
.cg-btn--primary:hover { background: var(--cg-violet); color: #fff; }

.cg-btn--secondary { background: transparent; color: #fff; border: 1px solid #e2e8f0; }
.cg-btn--secondary:hover { background: #f8fafc; color: var(--cg-violet); }

.cg-btn--violet { background: var(--cg-violet); color: #fff; width: 91px; }
.cg-btn--violet:hover { background: var(--cg-violet-dark); }

.cg-btn--violet-outline { background: transparent; color: var(--cg-violet); border: 1px solid var(--cg-violet); width: 84px; }
.cg-btn--violet-outline:hover { background: #fff; }

.cg-btn--clear { background: #fff; color: #000; width: 100px; height: 36px; border: 1px solid #fff; }

.cg-more { width: auto; padding-left: 30px; padding-right: 30px; }
.cg-more[hidden] { display: none; }

/* ---------- filters ---------- */
.cg-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 30px;
}
@media (min-width: 1024px) { .cg-filters { flex-direction: row; } }

.cg-select { position: relative; display: inline-flex; align-items: center; }

.cg-select__trigger {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 48px 0 16px;
  border: 1px solid #fff;
  border-radius: 9999px;
  background: transparent;
  color: #fff;
  font-size: 14px !important;
  line-height: 1;
  cursor: pointer;
  text-align: left;
}
.cg-select__trigger:focus { outline: none; }
.cg-select__trigger:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.cg-select.has-value .cg-select__trigger { padding-right: 40px; }

.cg-select__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cg-select__value.is-placeholder { color: rgba(255, 255, 255, 0.5); }

.cg-select__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.cg-select.has-value .cg-select__chevron { display: none; }

.cg-select__clear {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: .7;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.cg-select__clear:hover { opacity: 1; }
.cg-select.has-value .cg-select__clear { display: block; }

.cg-select__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--cg-menu);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  overflow: hidden;
  opacity: 0;
  transform: scale(.95);
  transform-origin: top left;
  visibility: hidden;
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.cg-select.is-open .cg-select__list {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .15s, transform .15s;
}
.cg-select__list li {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.cg-select__list li:hover,
.cg-select__list li:focus { background: rgba(255, 255, 255, 0.12); }
.cg-select__list li[aria-selected="true"] { background: rgba(255, 255, 255, 0.2); }

.cg-search {
  display: flex;
  align-items: center;
  width: 230px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #fff;
  border-radius: 66px;
  background: transparent;
}
.cg-search__input {
  width: 100%;
  padding: 8px 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}
.cg-search__input::placeholder { color: #9ca3af; }

/* ---------- grid ---------- */
.cg-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding-top: 50px;
  padding-bottom: clamp(60px, 8vw, 140px);
}

.cg-grid {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 1440px;
  grid-template-columns: repeat(auto-fit, 277px);
  justify-content: center;
}

/* ---------- card (flip) ---------- */
.cg-card { width: 277px; height: 520px; border-radius: 30px; perspective: 1000px; }

.cg-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s;
}
.cg-card.is-flipped .cg-card__inner { transform: rotateY(180deg); }

.cg-card__face {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-family: "Montserrat", sans-serif;
}

.cg-card__front {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 33px 30px;
  background-size: cover;
  background-position: center;
}
.cg-card__shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 208px;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4), transparent);
  pointer-events: none;
}
.cg-card__info { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.cg-badge {
  max-width: 100%;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
}

.cg-names {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 260px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
.cg-names__adv { flex: 1; min-width: 0; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cg-names__sep { flex-shrink: 0; width: 2px; height: 18px; margin: 0 10px; background: rgba(255, 255, 255, 0.7); }
.cg-names__name {
  flex: 1; min-width: 0; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cg-card__actions { display: flex; gap: 13px; }
.cg-card__front .cg-btn { width: 84px; }

.cg-card__back {
  z-index: 1;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 33px 20px;
  background: #fff;
  color: #000;
}
.cg-back__format { font-size: 18px; font-weight: 700; line-height: 28px; text-align: center; }

/* Back side: plain "Advertiser | Name", no truncation */
.cg-names--dark { color: #000; width: auto; max-width: 100%; align-items: stretch; }
.cg-names--dark .cg-names__adv,
.cg-names--dark .cg-names__name { flex: none; display: block; overflow: visible; white-space: normal; text-align: left; }
.cg-names--dark .cg-names__adv { padding-right: 10px; margin-right: 10px; border-right: 2px solid #000; }
.cg-names--dark .cg-names__sep { display: none; }

.cg-back__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin-bottom: 25px;
  padding-top: 20px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.cg-back__desc { margin: 0; font-size: 12px; line-height: 16px; text-align: center; }
.cg-back__objective { margin-top: auto; padding: 10px 0; font-size: 13px; font-weight: 700; line-height: 19.5px; text-align: center; }

.cg-card__back .cg-card__actions { margin-top: auto; }

/* ---------- modal ---------- */
.cg-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000BA;
  opacity: 0;
  transition: opacity .2s;
}
.cg-modal[hidden] { display: none; }
.cg-modal.is-open { opacity: 1; }

.cg-modal__box {
  display: flex;
  gap: 25px;
  overflow-y: auto;
  background: #1D1D1D;
  border: 3px solid rgba(255, 255, 255, 0.87);
  border-radius: 30px;
}
.cg-modal__box--vertical {
  flex-direction: column;
  width: 320px;
  height: 85vh;
  max-height: 657px;
  padding: 15px 10px;
}
.cg-modal__box--vertical.cg-modal__box--fit {
  height: auto;
  padding-bottom: 30px;
}
.cg-modal__box--horizontal {
  width: 700px;
  max-width: calc(100vw - 32px);
  padding: 23px 18px 23px 74px;
}

.cg-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.cg-modal__media { width: 100%; flex-shrink: 0; background: #fff; overflow: hidden; }
/* Old app pushed the close button outside the landscape popup; keep it inside */
.cg-modal__box--horizontal .cg-modal__media { width: auto; flex: 1 1 auto; min-width: 0; }
.cg-modal__media > iframe,
.cg-modal__media > video { display: block; width: 100%; border: 0; }
.cg-ratio-v { aspect-ratio: 9 / 16; }
.cg-ratio-h { aspect-ratio: 16 / 9; }
.cg-modal__tag { display: flex; justify-content: center; align-items: center; width: 100%; }