@import url('./brand-colors.css');

/* Circloud EVENTSARO brand block — single source of truth.
   Identical structure to every other Circloud project (nest, spidermind,
   dome); only the gradient token differs.

   Structure:
     <div class="cr-brand" data-size="sm|md|lg">
       <img class="cr-brand-logo" src="...">
       <div class="cr-brand-box">
         <span class="cr-brand-reg">&reg;</span>
         <div class="cr-brand-name">Circloud</div>
         <div class="cr-brand-sub"><span>E</span><span>V</span>…<span>O</span></div>
       </div>
       <div class="cr-brand-slogan">AI Event Radar</div>  (optional)
     </div>

   Sizes: sm (header), md (portal card / login), lg (hero)
*/

.cr-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.cr-brand-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: max-content;
}

.cr-brand-name,
.cr-brand-sub {
  font-weight: 600;
}

.cr-brand-name {
  color: var(--text, #fff);
}

.cr-brand-sub {
  display: flex;
  justify-content: space-between;
  /* Reads from assets/brand-colors.css — change there to retint everywhere */
  background: var(--eventsaro-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.cr-brand-sub span {
  display: inline-block;
}

/* "EVENT" keeps the brand sweep; "SARO" (letters 6–9) is brass like the
   rings in the logo. The span's own clipped background paints over the
   parent gradient, so the split needs no extra markup. */
.cr-brand-sub span:nth-child(n+6) {
  background: var(--eventsaro-brass-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cr-brand-reg {
  position: absolute;
  top: -0.15em;
  right: -0.7em;
  font-size: 0.35em;
  font-weight: 400;
  opacity: 0.5;
  color: var(--text, #fff);
  -webkit-text-fill-color: var(--text, #fff);
}

.cr-brand-logo {
  height: auto;
  display: block;
  margin-bottom: 0.3em;
  /* width set by JS to match cr-brand-name width */
}

.cr-brand-slogan {
  color: #6d7696;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 0.5em;
}

/* ── Size variants ── */

/* sm: header */
.cr-brand[data-size="sm"] {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.cr-brand[data-size="sm"] .cr-brand-logo {
  width: auto;
  height: 42px;
  margin-bottom: 0;
}
.cr-brand[data-size="sm"] .cr-brand-name { font-size: 1.05rem; }
.cr-brand[data-size="sm"] .cr-brand-sub  { font-size: 0.7rem; }
.cr-brand[data-size="sm"] .cr-brand-slogan {
  display: none;
}

/* md: login pages / portal card */
.cr-brand[data-size="md"] .cr-brand-name { font-size: 2rem; }
.cr-brand[data-size="md"] .cr-brand-sub  { font-size: 1.3rem; }
.cr-brand[data-size="md"] .cr-brand-slogan {
  font-size: 13px;
}

/* lg: hero */
.cr-brand[data-size="lg"] .cr-brand-name { font-size: 3rem; }
.cr-brand[data-size="lg"] .cr-brand-sub  { font-size: 2rem; }
.cr-brand[data-size="lg"] .cr-brand-slogan {
  font-size: 15px;
}