@charset "UTF-8";

/* Press / press-kit page: editorial guidelines, media mentions, logo grid, brand-usage charter. */

/* Editorial guidelines: label on its own line, then use / avoid in two equal columns. */
.press-guide {
  display: grid;
  margin-block-start: var(--space-8);
}
.press-guide__head {
  display: grid;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: 1fr 1fr;
  padding-block-end: var(--space-3);
}
.press-guide__col-head {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.press-guide__row {
  border-block-start: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-3) var(--space-8);
  grid-template-columns: 1fr 1fr;
  padding-block: var(--space-5);
}
.press-guide__label {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  grid-column: 1 / -1;
  letter-spacing: var(--tracking-wide);
  margin: 0;
  text-transform: uppercase;
}
.press-guide__use,
.press-guide__avoid {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  padding-inline-start: var(--space-6);
  position: relative;
}
.press-guide__use::before,
.press-guide__avoid::before {
  font-weight: var(--weight-bold);
  inset-inline-start: 0;
  position: absolute;
}
.press-guide__use::before {
  color: var(--color-success);
  content: "\2713"; /* check */
}
.press-guide__avoid::before {
  color: var(--color-error);
  content: "\2717"; /* cross */
}

/* Media mentions: full-width cards with a thumbnail, badges and a description. */
.media-list {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin-block-start: var(--space-6);
  padding: 0;
}
.media-card__link {
  align-items: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: minmax(160px, 14rem) 1fr;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.media-card__link:hover {
  border-color: var(--accent);
}
.media-card__thumb {
  align-items: center;
  display: flex;
  justify-content: center;
  min-block-size: 9rem;
  overflow: hidden;
}
.media-card__thumb--img {
  align-items: stretch;
}
.media-card__thumb--img picture {
  block-size: 100%;
  display: block;
  inline-size: 100%;
}
.media-card__thumb--img img {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}
.media-card__thumb--press,
.media-card__thumb--radio {
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface));
}
.media-card__icon {
  block-size: 2.75rem;
  color: var(--accent-light);
  inline-size: 2.75rem;
}
.media-card__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}
.media-card__title {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.media-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.media-card__desc {
  color: var(--color-text-secondary);
}

/* Badges */
.badge {
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.4;
  padding: var(--space-1) var(--space-3);
}
.badge--source {
  background: var(--accent-faint);
  color: var(--accent-light);
}
.badge--type {
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.badge--date {
  background: var(--color-surface-raised);
  color: var(--color-text-tertiary);
}

/* Logo download grid */
.logo-kit {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-block-start: var(--space-6);
}
.logo-kit__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  /* image, then flexible caption (absorbs the combined card's extra note line),
     then download row pinned to the bottom so buttons align and keep a natural
     height across all cards. */
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  text-align: center;
}
.logo-kit__item--primary {
  border-color: var(--accent);
}
.logo-kit__img {
  block-size: auto;
  border-radius: var(--radius-lg);
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 180px;
}
.logo-kit__cap {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.logo-kit__note {
  color: var(--color-text-tertiary);
  display: block;
  font-size: var(--text-sm);
}
.logo-kit__dl {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.logo-kit__dl a {
  background: var(--accent-faint);
  border-radius: var(--radius-sm);
  color: var(--accent-light);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}
.logo-kit__dl a:hover {
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* Brand-usage charter: clear-space rule + do / avoid columns, as a panel. */
.brand-usage {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-block-start: var(--space-12);
  padding: var(--space-8);
}
.brand-usage__title {
  color: var(--color-text);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
}
.brand-usage__lead {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-inline-size: 60ch;
}
.brand-usage__cols {
  display: grid;
  gap: var(--space-6) var(--space-8);
  grid-template-columns: 1fr 1fr;
  margin-block-start: var(--space-6);
}
.brand-usage__col-head {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}
.brand-usage__col-head--do {
  color: var(--color-success);
}
.brand-usage__col-head--dont {
  color: var(--color-error);
}
.brand-usage__list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-usage__list li {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  padding-inline-start: var(--space-6);
  position: relative;
}
.brand-usage__list li::before {
  font-weight: var(--weight-bold);
  inset-inline-start: 0;
  position: absolute;
}
.brand-usage__list--do li::before {
  color: var(--color-success);
  content: "\2713";
}
.brand-usage__list--dont li::before {
  color: var(--color-error);
  content: "\2717";
}

/* Stack cards, guideline rows and charter columns on narrow viewports */
@media (max-width: 40rem) {
  .media-card__link {
    grid-template-columns: 1fr;
  }
  .media-card__thumb {
    aspect-ratio: 16 / 9;
    min-block-size: 0;
  }
  .press-guide__head {
    display: none;
  }
  .press-guide__row,
  .brand-usage__cols {
    grid-template-columns: 1fr;
  }
}