/* Selected Brand Campaigns - Consistent Bento Grid Architecture */
/* Identity Portrait Perfect Framing across all viewports */
.brands-page .identity {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
.brands-page .identity .portrait {
  flex: 0 0 auto !important;
  height: 100% !important;
  width: auto !important;
  aspect-ratio: 432 / 528 !important;
  max-width: 48% !important;
  overflow: hidden !important;
  background: #18181b !important;
}
.brands-page .identity .portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.brands-page .identity-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .brands-page[data-mobile-view=overview] .identity {
    grid-area: 1 / 1 / 3 / 4 !important;
  }
  .brands-page[data-mobile-view=overview] .views {
    grid-area: 1 / 4 / 3 / 7 !important;
  }
  .brands-page .identity-copy {
    padding: 12px 14px !important;
  }
}
@media (max-width: 767px) {
  .brands-page .identity .portrait {
    max-width: 42% !important;
  }
}
.brands-page .tile-art { width: 63px; height: 63px; right: 9px; bottom: 7px; opacity: .4; }
.brands-page .follower-art { width: 53px; height: 53px; right: 13px; bottom: 13px; }

/* Campaign Gallery Bento Tile (Seamlessly consistent with other tiles) */
.brands-page .kit .campaign-gallery {
  grid-area: 3 / 1 / 8 / 5;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  box-shadow: none;
}

/* Gifted campaigns tag in tile header */
.gifted-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 4px;
  color: #e5c158;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Navigation toolbar with brand tabs and prev/next controls */
.campaign-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
  flex: none;
}
.campaign-brand-tabs {
  display: flex;
  gap: 6px;
}
.campaign-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #a4a4ac;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.campaign-tab-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.campaign-tab-btn[aria-pressed="true"] {
  background: #ffffff;
  color: #111114;
  border-color: #ffffff;
}

.campaign-nav-arrows {
  display: flex;
  gap: 6px;
}
.campaign-nav-arrows button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.campaign-nav-arrows button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
}
.campaign-nav-arrows button:disabled {
  opacity: 0.25;
  cursor: default;
}
.campaign-nav-arrows svg {
  width: 14px;
  height: 14px;
}

/* Horizontal slide showcase container */
.campaign-slides {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 10px;
}
.campaign-slides::-webkit-scrollbar { display: none; }

.campaign-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 6px;
  box-sizing: border-box;
}

/* Prominent brand logo banner */
.campaign-brand-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 4px 12px;
  box-sizing: border-box;
}
.brand-real-logo {
  height: 24px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}
.brand-logo-novation {
  height: 20px;
}
.brand-razer-combo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.brand-razer-snake {
  height: 24px;
  width: auto;
}
.brand-razer-text {
  height: 16px;
  width: auto;
}
.brand-logo-spotify {
  height: 24px;
}
.brand-logo-svg {
  height: 24px;
  width: auto;
  max-width: 160px;
  display: block;
}

/* Media presentation wrapper */
.campaign-media-wrapper {
  flex: 1 1 0px;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 9:16 Vertical Reel (Novation, Razer) */
.campaign-slide.slide-vertical .campaign-play {
  aspect-ratio: 9 / 16;
  height: 100%;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  padding: 0;
  display: block;
}

/* 16:9 Widescreen Video (Spotify) */
.campaign-slide.slide-horizontal .campaign-play {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 380px;
  height: auto;
  max-height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  padding: 0;
  display: block;
}

.campaign-play:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 255, 255, 0.12);
}
.campaign-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay play pill */
.campaign-watch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  padding: 6px 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(14, 14, 18, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 11px !important;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.campaign-play:hover .campaign-watch {
  background: #ffffff;
  color: #111114;
  border-color: #ffffff;
  transform: translateX(-50%) translateY(-1px);
}
.campaign-play:hover .campaign-watch svg {
  fill: #111114;
}
.campaign-watch svg { width: 12px; height: 12px; }

/* Bento tile layout adjustments */
.brands-page .kit .age { grid-area: 5 / 5 / 8 / 8; }
.brands-page .kit .formats { padding: 11px 12px; }
.brands-page .kit .formats h2 { font-size: 17px; }
.brands-page .kit .formats .management-link { margin-top: 4px; }
.brands-page .kit .formats .management-link small { margin-top: 3px; }

/* Responsive viewports */
@media (max-width: 767px) {
  .brands-page .dashboard > .campaign-gallery {
    display: none !important;
  }
  .brands-page[data-mobile-view=campaigns] .dashboard > .campaign-gallery {
    display: flex !important;
    grid-column: span 2 !important;
    height: 480px;
    padding: 14px;
  }
  .campaign-slide.slide-vertical .campaign-play {
    height: 260px;
  }
  .campaign-slide.slide-horizontal .campaign-play {
    width: 90%;
    max-width: 320px;
  }
  .brands-page .kit .age { grid-column: span 2 !important; }
  .brands-page .tile-art { width: 52px; height: 52px; right: 7px; bottom: 12px; }
  .brands-page .follower-art { width: 45px; height: 45px; right: 8px; bottom: 15px; }
  .brands-page .kit .formats h2 { font-size: 20px; }
  .brands-page .kit .formats .management-link { font-size: 22px; }
}

/* Compact screens use content-sized cards; only desktop locks to the viewport. */
@media (max-width:1199px) {
  html:has(.brands-page), .brands-page { height:auto; overflow:auto; }
  .brands-page .kit { height:auto; min-height:0; }
  .brands-page .dashboard { flex:none; height:auto; min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; }
  .brands-page .dashboard > .tile { grid-area:auto!important; grid-column:span 1!important; }
  .brands-page .dashboard > .identity { display:none!important; }
  .brands-page[data-mobile-view=overview] .dashboard > .identity { display:flex!important; }
  .brands-page:not([data-mobile-view=campaigns]) .dashboard > .campaign-gallery { display:none!important; }
  .brands-page[data-mobile-view=campaigns] .dashboard > .campaign-gallery { display:flex!important; grid-column:1/-1!important; height:480px; padding:16px; }
  .brands-page .dashboard > .formats { grid-column:1/-1!important; min-height:110px; gap:10px; }
  .brands-page .kit .identity-copy { align-items:flex-start; gap:8px; }
  .brands-page .identity .portrait { width:40%!important; max-width:40%!important; aspect-ratio:auto!important; }
  .brands-page .kit .identity h2 { font-size:26px; }
  .brands-page .dashboard > .views { min-height:190px; }
  .brands-page .views-media { height:115px; top:auto; bottom:46px; width:25%; right:12px; }
  .brands-page .dashboard > .reach,.brands-page .dashboard > .followers { min-height:100px; }
  .brands-page .kit .reach .stat,.brands-page .kit .followers .stat { font-size:30px; }
  .brands-page .dashboard > .interactions { min-height:165px; }
  .brands-page .dashboard > .youtube { min-height:140px; }
  .brands-page .dashboard > .age { min-height:230px; }
  .brands-page .dashboard > .gender { min-height:190px; }
  .brands-page .dashboard > .countries,.brands-page .dashboard > .cities { height:auto; min-height:290px; }
  .brands-page .kit .rank-list { flex:1; min-height:150px; }
  .brands-page .kit .age-chart { min-height:130px; }
  .brands-page .kit .formats .management-link { font-size:22px; }
}
@media (min-width:768px) and (max-width:1199px) {
  .brands-page .dashboard > .identity,.brands-page .dashboard > .views { height:220px; }
  .brands-page .dashboard > .interactions,.brands-page .dashboard > .youtube { height:180px; }
  .brands-page .dashboard > .reach,.brands-page .dashboard > .followers { height:100px; }
  .brands-page .hero-number { font-size:clamp(42px,5.5vw,60px); }
  .brands-page .kit .formats h2 { font-size:22px; }
}
@media (max-width:767px) {
  .brands-page .dashboard > :is(.identity,.views,.interactions,.youtube,.age,.gender) { grid-column:1/-1!important; }
  .brands-page .dashboard > .identity { height:160px; }
  .brands-page .kit .identity-copy { padding:12px!important; }
  .brands-page .kit-heading h1 { flex-shrink:0; white-space:nowrap; max-width:none; font-size:22px; }
  .brands-page .kit .identity h2 { font-size:28px; }
  .brands-page .kit .identity p { line-height:1.35; }
  .brands-page .dashboard > .youtube { min-height:120px; }
  .brands-page .dashboard > .gender { min-height:155px; }
  .brands-page .report-strip { flex-wrap:wrap; }
  .brands-page .report-strip span { max-width:100%; }
  .brands-page .report-strip button { max-width:none; }
}

/* The media button keeps its video ratio instead of filling the flex row. */
.brands-page .campaign-slide .campaign-play { flex:none; padding:0; }