/*
 * Brand assets page (templates/default/brand_assets.php).
 * Loaded in <head> by index::brand_assets() after destination_v2.css;
 * every rule is scoped to .brand-v2. White cards on the #FAFAFA page,
 * navy accents, brand pink for the main buttons only.
 */

.brand-v2 {
   --br-pink: #E8236E;
   --br-pink-dark: #C2145A;
   --br-navy: #14183A;
   --br-border: #E4E8F0;
   --br-soft: #F3F5F9;
   --br-text2: #5B6178;
   --br-ok: #1E7B4A;
   --br-bad: #C62828;
   --br-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
}

/* Hero */
.brand-v2 .brand-hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 24px;
   margin-top: 16px;
   align-items: center;
}

.brand-v2 .dv2-hero h1 {
   margin: 0;
}

.brand-v2 .brand-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 20px;
}

.brand-v2 .brand-hero-logo {
   display: none;
}

@media (min-width: 960px) {
   .brand-v2 .brand-hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
      gap: 40px;
      margin-top: 24px;
   }

   .brand-v2 .brand-hero-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 32px;
      background: #fff;
      border: 1px solid var(--br-border);
      border-radius: 20px;
      box-shadow: var(--br-shadow);
   }

   .brand-v2 .brand-hero-logo img {
      width: 100%;
      height: auto;
   }
}

/* Buttons */
.brand-v2 .brand-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 46px;
   padding: 0 20px;
   border: 1px solid var(--br-border);
   border-radius: 999px;
   background: #fff;
   color: var(--br-navy);
   font: 600 15px/1 'Poppins', Arial, sans-serif;
   text-decoration: none;
}

.brand-v2 .brand-btn:hover {
   border-color: var(--br-navy);
   color: var(--br-navy);
   text-decoration: none;
}

.brand-v2 .brand-btn-primary {
   background: var(--br-pink);
   border-color: var(--br-pink);
   color: #fff;
}

.brand-v2 .brand-btn-primary:hover {
   background: var(--br-pink-dark);
   border-color: var(--br-pink-dark);
   color: #fff;
}

/* Grids and cards */
.brand-v2 .dv2-section-head p {
   margin: 4px 0 0;
   color: var(--br-text2);
}

.brand-v2 .brand-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   margin-top: 16px;
}

@media (min-width: 640px) {
   .brand-v2 .brand-grid-2,
   .brand-v2 .brand-grid-3,
   .brand-v2 .brand-grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 960px) {
   .brand-v2 .brand-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .brand-v2 .brand-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

.brand-v2 .brand-card {
   background: #fff;
   border: 1px solid var(--br-border);
   border-radius: 20px;
   box-shadow: var(--br-shadow);
   overflow: hidden;
   min-width: 0;
}

.brand-v2 .brand-card-pad {
   padding: 20px;
}

.brand-v2 .brand-card h3 {
   margin: 0 0 6px;
   font-size: 17px;
}

.brand-v2 .brand-card p {
   margin: 0;
}

.brand-v2 .brand-card-body {
   padding: 16px 18px 18px;
}

.brand-v2 .brand-card-body p {
   color: var(--br-text2);
   font-size: 14px;
}

.brand-v2 .brand-subhead {
   margin: 32px 0 4px;
   font-size: 18px;
}

.brand-v2 .brand-muted {
   color: var(--br-text2);
   font-size: 14px;
   margin: 8px 0 0;
}

/* Logo previews */
.brand-v2 .brand-preview {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 170px;
   padding: 28px;
   border-bottom: 1px solid var(--br-border);
}

.brand-v2 .brand-preview img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.brand-v2 .brand-preview-light {
   background: #fff;
}

.brand-v2 .brand-preview-dark {
   background: var(--br-navy);
}

.brand-v2 .brand-preview-photo {
   padding: 0;
   background: var(--br-soft);
}

.brand-v2 .brand-preview-photo img {
   height: 100%;
   width: auto;
}

.brand-v2 .brand-downloads {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
}

.brand-v2 .brand-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 34px;
   padding: 0 12px;
   border: 1px solid var(--br-border);
   border-radius: 999px;
   background: #fff;
   color: var(--br-navy);
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
}

.brand-v2 .brand-chip span {
   color: var(--br-text2);
   font-weight: 500;
}

.brand-v2 .brand-chip:hover {
   border-color: var(--br-navy);
   color: var(--br-navy);
   text-decoration: none;
}

/* Do / don't */
.brand-v2 .brand-list {
   margin: 8px 0 0;
   padding-left: 20px;
}

.brand-v2 .brand-list li {
   margin: 6px 0;
}

@media (min-width: 960px) {
   .brand-v2 .brand-list-cols {
      columns: 2;
      column-gap: 40px;
   }

   .brand-v2 .brand-list-cols li {
      break-inside: avoid;
   }
}

.brand-v2 .brand-do h3 i {
   color: var(--br-ok);
}

.brand-v2 .brand-dont h3 i {
   color: var(--br-bad);
}

/* Colour swatches */
.brand-v2 .brand-swatch,
.brand-v2 .brand-caption {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding: 0;
   border: 1px solid var(--br-border);
   border-radius: 20px;
   background: #fff;
   box-shadow: var(--br-shadow);
   text-align: left;
   font: inherit;
   color: inherit;
   cursor: pointer;
   overflow: hidden;
}

.brand-v2 .brand-swatch:hover,
.brand-v2 .brand-caption:hover {
   border-color: var(--br-navy);
}

.brand-v2 .brand-swatch:focus-visible,
.brand-v2 .brand-caption:focus-visible {
   outline: 3px solid rgba(20, 24, 58, 0.25);
   outline-offset: 2px;
}

.brand-v2 .brand-swatch-colour {
   display: block;
   height: 110px;
}

.brand-v2 .brand-swatch-sm .brand-swatch-colour {
   height: 70px;
}

.brand-v2 .brand-swatch-colour.is-light {
   border-bottom: 1px solid var(--br-border);
}

.brand-v2 .brand-swatch-body {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 12px 16px 14px;
}

.brand-v2 .brand-swatch-body b {
   color: var(--br-navy);
}

.brand-v2 .brand-mono {
   font-family: ui-monospace, Menlo, Consolas, monospace;
   font-size: 13px;
   color: var(--br-text2);
}

.brand-v2 .brand-swatch-use {
   font-size: 13px;
   color: var(--br-text2);
   margin-top: 4px;
}

.brand-v2 .brand-copied {
   display: none;
   color: var(--br-ok);
   font-size: 12px;
   font-weight: 600;
}

.brand-v2 .is-copied .brand-copied {
   display: inline;
}

.brand-v2 .brand-swatch .brand-copied {
   position: absolute;
   top: 12px;
   right: 14px;
}

/* Type */
.brand-v2 .brand-type-sample {
   font-size: 64px;
   line-height: 1;
   font-weight: 700;
   color: var(--br-navy);
   margin: 0 0 12px !important;
}

.brand-v2 .brand-type-head {
   font-size: 24px;
   line-height: 1.25;
   font-weight: 700;
   color: var(--br-navy);
   margin: 0 0 8px !important;
}

.brand-v2 .brand-type-body {
   color: #454545;
}

.brand-v2 .brand-tagline {
   font-size: 20px;
   font-weight: 600;
   color: var(--br-navy);
   margin: 0 0 8px !important;
}

/* Promote */
.brand-v2 .brand-step {
   position: relative;
}

.brand-v2 .brand-step-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   margin-bottom: 10px;
   border-radius: 50%;
   background: var(--br-navy);
   color: #fff;
   font-weight: 700;
}

.brand-v2 .brand-caption {
   justify-content: space-between;
   gap: 12px;
   padding: 18px;
   font-size: 14px;
   line-height: 1.55;
}

.brand-v2 .brand-caption-foot {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--br-navy);
   font-weight: 600;
   font-size: 13px;
}

.brand-v2 .brand-note {
   margin-top: 16px;
   background: var(--br-soft);
   box-shadow: none;
}

/* Social designs */
.brand-v2 .brand-social-item {
   margin: 0;
}

.brand-v2 .brand-social-item img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 16px;
   border: 1px solid var(--br-border);
   box-shadow: var(--br-shadow);
}

.brand-v2 .brand-social-item figcaption {
   margin-top: 10px;
}

/* Contact */
.brand-v2 .brand-contact {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.brand-v2 .brand-contact h2 {
   margin: 0 0 6px;
}

@media (min-width: 960px) {
   .brand-v2 .brand-contact {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
   }

   .brand-v2 .brand-contact .brand-btn {
      flex: 0 0 auto;
   }
}