/* ============================================================
   LOGO PAGE — CTA buttons, subsections, image blocks
   ============================================================ */

/* ----------------------------------------------------------
   CTA GROUP — two cta-tertiary buttons side by side
   ---------------------------------------------------------- */

.cta-group {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Each cta-tertiary inside a group shares width equally */
.cta-group .cta-tertiary {
  flex: 1;
  width: auto;
}

/* ----------------------------------------------------------
   LOGO BODY GROUP — body text + CTA container (48px gap)
   Used when a section-content has both text and CTAs.
   ---------------------------------------------------------- */

.logo-body-group {
  display: flex;
  flex-direction: column;
  gap: var(--inner-gap);
}

/* ----------------------------------------------------------
   LOGO IMAGE BLOCK — full-width screenshot container
   ---------------------------------------------------------- */

.logo-img-block {
  width: 100%;
  display: block;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
}

.logo-img-block img {
  width: 100%;
  height: auto;
  display: block;
}

.logo-img-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-img-block--video {
  aspect-ratio: 933 / 451;
}

/* picture wrapper: block so it doesn't create inline gaps */
.logo-img-block picture {
  display: block;
}

/* Motion: mob static image hidden by default (shown only at mobile) */
.logo-mob-img {
  display: none;
}

/* Motion 01 — exact Figma desktop frame: 933×451 */
.motion-video-frame {
  width: 933px;
  height: 451px;
  overflow: hidden;
}

.motion-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ----------------------------------------------------------
   COBRANDING — lockup groups with captions
   ---------------------------------------------------------- */

.logo-cobrand-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.logo-cobrand-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logo-cobrand-caption {
  width: 340px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.42px;
}

.logo-cobrand-caption__title {
  font-family: var(--font-beausite);
  font-weight: 500;
  color: var(--color-black);
}

.logo-cobrand-caption__desc {
  font-family: var(--font-beausite);
  font-weight: 400;
  color: #737373;
}

/* ----------------------------------------------------------
   INCORRECT USAGE — 2-column grid with captions
   ---------------------------------------------------------- */

.logo-inc-grid {
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
}

.logo-inc-row {
  display: flex;
  gap: var(--col-gap);
  align-items: flex-start;
}

.logo-inc-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
}

/* ----------------------------------------------------------
   LOGO SUBSECTION — Free / Boxed sub-sections within Primary
   Same gap-48px column layout as section-header but no border.
   ---------------------------------------------------------- */

.logo-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--inner-gap);
}

.logo-subsection__row {
  display: flex;
  gap: var(--col-gap);
  align-items: flex-start;
}

.logo-subsection__spacer {
  flex: 0 0 var(--label-col);
  flex-shrink: 0;
}

.logo-subsection__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--inner-gap);
}

/* ----------------------------------------------------------
   TABLET (441px – 999px)
   ---------------------------------------------------------- */

@media (max-width: 999px) {

  /* Match section-label width at tablet (32%) */
  .logo-subsection__spacer {
    flex: 0 0 32%;
  }

  /* Web video: Figma tablet = 868×451px; aspect-ratio gives 419px at 868px */
  .logo-img-block--video {
    aspect-ratio: auto;
    height: 451px;
  }

  /* Photography full-width images: Figma tablet = 868×400px; natural ratio gives 419px */
  #photography .logo-img-block {
    height: 400px;
  }

  #photography .logo-img-block picture {
    height: 100%;
  }

  #photography .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }
}

/* ----------------------------------------------------------
   MOBILE (≤ 440px)
   ---------------------------------------------------------- */

@media (max-width: 440px) {

  /* Image blocks: 16px inset from viewport edges */
  .logo-img-block {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  /* Web video: Figma mobile = 361×464px portrait */
  .logo-img-block--video {
    aspect-ratio: auto;
    height: 464px;
  }

  .motion-video-frame {
    width: calc(100% - 32px);
    height: 464px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Living System placeholder: Figma mobile = 361×464px portrait */
  #living .logo-img-block {
    height: 464px;
  }

  /* Reset when parent already manages horizontal margins */
  .logo-cobrand-groups .logo-img-block,
  .logo-inc-cell .logo-img-block,
  .logo-inc-grid > .logo-img-block,
  .media-stack .logo-img-block {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Primary logo hero: Figma mobile = 361×464px portrait */
  #primary-logo > .logo-img-block {
    height: 464px;
  }

  #primary-logo > .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }

  /* Logo grids: stack rows to single column */
  .logo-inc-row {
    flex-direction: column;
  }

  .logo-inc-cell {
    flex: none;
    width: 100%;
  }

  /* Logo cells: 280px fixed height with cover crop */
  .logo-inc-cell .logo-img-block {
    height: 280px;
  }

  .logo-inc-cell .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }

  /* Standalone logo-img-block inside logo-inc-grid (reduction-01, clearspace-11):
     logo-inc-grid already has 16px padding so no extra margin needed */
  .logo-inc-grid > .logo-img-block {
    height: 280px;
  }

  .logo-inc-grid > .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }

  /* Cobranding: Figma mobile = 240px for lockups 1–4, 400px for lockup 5 */
  .logo-cobrand-group .logo-img-block {
    height: 240px;
  }

  .logo-cobrand-group .logo-img-block img {
    height: 100%;
    object-fit: cover;
  }

  .logo-cobrand-group:last-child .logo-img-block {
    height: 400px;
  }

  /* Subsection: collapse side-by-side layout to column */
  .logo-subsection__row {
    flex-direction: column;
    gap: 0;
  }

  .logo-subsection__spacer {
    display: none;
  }

  .logo-subsection__content {
    padding: 0 16px;
  }

  /* CTA buttons: side by side */
  .cta-group {
    flex-direction: row;
  }

  .cta-group .cta-tertiary {
    flex: 1;
    width: auto;
  }

  /* Section spacing: 40px gap between header, hero, subsections */
  .view--logo .section-block {
    gap: 40px;
  }

  /* Subsection header → grid: 40px */
  .logo-subsection {
    gap: 40px;
  }

  /* Motion: show static image, hide video */
  .logo-mob-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .motion-video-frame video {
    display: none;
  }

  /* Cobranding: add 16px margin, remove fixed caption width */
  .logo-cobrand-groups {
    padding: 0 16px;
  }

  .logo-cobrand-caption {
    width: 100%;
  }

  /* Incorrect usage grid: add 16px margin */
  .logo-inc-grid {
    padding: 0 16px;
  }
}