/* BEGIN OWB SHARED MAIN PAGE IDENTITY 09.25.26.01 */

/*
  Welcome is the visual reference.

  Desktop:
      portrait | Star 48

  Page-specific information follows underneath.

  The portrait uses the existing Welcome artwork.
  The Star is deliberately allowed to extend beyond its nominal
  grid column, matching the visual scale of the Welcome page.
*/

.owb-main-identity {
  display: grid;

  width: min(100%, 46rem);

  grid-template-columns:
    minmax(0, 22rem)
    minmax(0, 22rem);

  justify-content: center;
  align-items: center;

  column-gap: clamp(1rem, 2vw, 2rem);

  margin:
    0
    auto
    clamp(1.5rem, 3vw, 2.5rem);
}

.owb-main-identity-portrait {
  grid-column: 1;

  width: min(100%, 22rem);

  margin: 0;

  justify-self: start;
  align-self: end;
}

.owb-main-identity-portrait picture {
  display: block;
}

.owb-main-identity-portrait img {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;
}

.owb-main-identity-star {
  grid-column: 2;

  width: clamp(18rem, 34vw, 26rem);

  justify-self: start;
  align-self: center;

  margin-left: clamp(3rem, 5vw, 4.5rem);
}

.owb-main-identity-star img,
.owb-main-identity-star svg {
  display: block;

  width: 100%;
  max-width: none;
  height: auto;
}

/*
  Landing page:
  align the identity with the content below rather than centering
  it independently above the One World Balance heading.
*/

body.gateway-body .intro.gateway > .owb-main-identity {
  grid-column: 1 / -1;
  justify-self: stretch;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}

/*
  Contact and Donate formerly reserved a second title column for
  their page-specific Star. The shared identity now owns the Star.
*/

.contact-page .contact-title-row,
.donation-page .owb-page-title-row {
  grid-template-columns: minmax(0, 1fr);
}

/* Mobile / narrow viewport */

@media (max-width: 48rem) {

  .owb-main-identity {
    width: 100%;

    grid-template-columns: minmax(0, 1fr);

    justify-items: center;

    row-gap: 1.25rem;
  }

  body.gateway-body .intro.gateway > .owb-main-identity {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-items: center;

    margin-left: auto;
    margin-right: auto;
  }

  .owb-main-identity-portrait {
    grid-column: 1;

    width: min(100%, 18rem);

    justify-self: center;
  }

  .owb-main-identity-star {
    grid-column: 1;

    width: clamp(12rem, 48vw, 17rem);

    margin-left: 0;

    justify-self: center;
  }

  .owb-main-identity-star img,
  .owb-main-identity-star svg {
    width: 100%;
  }
}

/* END OWB SHARED MAIN PAGE IDENTITY 09.25.26.01 */
/* BEGIN OWB LANDING-STYLE DESKTOP ORDER 09.25.26.05 */

/*
  Narrow/mobile screens retain the existing order:
      portrait + Star 48
      page identification

  Desktop mirrors the landing page:
      page identification
      portrait + Star 48
*/

.owb-main-identity-shell {
  display: flex;
  flex-direction: column;
}

.owb-main-identity-shell > .owb-main-identity {
  order: 1;
}

.owb-main-identity-shell > .owb-main-identity-copy {
  order: 2;
}

@media (min-width: 48.001rem) {

  .owb-main-identity-shell > .owb-main-identity-copy {
    order: 1;
  }

  .owb-main-identity-shell > .owb-main-identity {
    order: 2;
  }

  /*
    Welcome already has all pieces inside campaign-hero.
    Reverse only its desktop grid rows.
  */

  body.welcome-body .campaign-introduction {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  body.welcome-body .campaign-portrait-stack {
    grid-column: 1;
    grid-row: 2;
  }

  body.welcome-body .welcome-mark-fixed {
    grid-column: 2;
    grid-row: 2;
  }

  body.welcome-body .campaign-donation-notice {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

/* END OWB LANDING-STYLE DESKTOP ORDER 09.25.26.05 */