/* ============================================================
   VALENA — brand page
   ============================================================ */

.v-brand-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.v-brand-hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}
.v-brand-hero__logo {
  width: min(220px, 100%);
  height: auto;
  object-fit: contain;
  align-self: flex-start;
}
.v-brand-hero__logo--canonical {
  aspect-ratio: var(--v-brand-logo-ratio);
  object-fit: cover;
}
.v-brand-hero__lead {
  margin: 0;
  font-size: var(--v-body);
  line-height: 1.6;
}
.v-brand-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.v-brand-hero__actions .v-btn { flex: 1 1 220px; }

.v-brand-hero__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--v-radius);
  overflow: hidden;
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-line);
}
.v-brand-hero__media:empty { display: none; }
.v-brand-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .v-brand-hero__actions .v-btn { flex: 0 0 auto; }
}

@media (min-width: 1024px) {
  .v-brand-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}

/* ------------------------------------------------------- why brand --- */
/*
 * Picture beside the argument. The image is the brand's own photography, so it
 * carries the claim the copy is making better than another paragraph would.
 */
.v-brand-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.v-brand-why__media {
  margin: 0;
  border-radius: var(--v-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--v-surface);
}
.v-brand-why__media img { width: 100%; height: 100%; object-fit: cover; }

.v-brand-why__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.v-brand-why__content h2 { margin: 0; }
.v-brand-why__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--v-small);
  line-height: 1.6;
}
.v-brand-why__list p { margin: 0; }
.v-brand-why__list strong { font-weight: 600; }

@media (min-width: 900px) {
  .v-brand-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* No picture: the copy keeps its measure instead of stretching to the gutter. */
  .v-brand-why:not(:has(.v-brand-why__media)) {
    grid-template-columns: minmax(0, 700px);
    justify-content: end;
  }
}

/* ---------------------------------------------------------- brand CTA -- */
.v-brand-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.v-brand-cta__primary { min-height: 48px; padding: 0 20px; }
.v-brand-cta__ig {
  min-height: 40px;
  padding: 0 16px;
  font-weight: 400;
  font-size: var(--v-small);
}

@media (min-width: 768px) {
  .v-brand-cta__actions { align-items: flex-end; }
}

/* -------------------------------------------------------- brand FAQ -- */
.v-brand-faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.v-brand-faq__title {
  font-weight: 400;
  font-size: var(--v-h3);
}
.v-brand-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v-faq-card {
  border-radius: var(--v-radius);
  background: var(--v-surface);
  box-shadow: inset 0 0 0 1px var(--v-blush-mid);
  overflow: hidden;
}
.v-faq-card:has(.v-faq-card__btn[aria-expanded="true"]) { background: var(--v-blush); }
.v-faq-card__btn {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  font-weight: 400;
  font-size: var(--v-small);
  line-height: 1.5;
}
.v-faq-card__panel {
  padding: 0 20px 18px;
  font-size: var(--v-small);
  line-height: 1.6;
  color: var(--v-black-70);
}
.v-faq-card__panel[hidden] { display: none; }
.v-faq-card__panel p { margin: 0; }

@media (min-width: 768px) {
  .v-brand-faq { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
}