/**
 * Npy Banner — front-end styles.
 * ------------------------------------------------------------------
 * Every value an editor can change arrives as a custom property set inline on
 * `.npy-banner` by the renderer, so the declarations below are only defaults:
 *
 *   --npy-banner-bg          background colour
 *   --npy-banner-color       text colour
 *   --npy-banner-min-height  minimum height (0 = automatic)
 *
 * Two treatments, picked per banner in the admin:
 *   .npy-banner--side        image beside the text (two columns)
 *   .npy-banner--background  image behind the text, full bleed
 */

.npy-banner {
  /* Kept in sync with Npy_Banner_Cpt::DEFAULT_BG_COLOR, the value a new banner
     starts with in the admin. */
  --npy-banner-bg: #161643;
  --npy-banner-color: #ffffff;
  --npy-banner-accent: #f2ab30;
  --npy-banner-min-height: 0px;

  position: relative;
  display: flex;
  overflow: hidden;
  min-height: var(--npy-banner-min-height);
  background: var(--npy-banner-bg);
  color: var(--npy-banner-color);
  font-family: "Work Sans", sans-serif;
}

/* Body ------------------------------------------------------------------- */

.npy-banner__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  padding: 44px 48px;
  min-width: 0;
}

.npy-banner__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: inherit;
}

.npy-banner__text {
  font-size: 17px;
  line-height: 1.5;
}

/* The renderer runs the text through wpautop(), which wraps it in <p>. */
.npy-banner__text p {
  margin: 0 0 12px;
  padding: 0;
  color: inherit;
}

.npy-banner__text p:last-child {
  margin-bottom: 0;
}

/* Call to action --------------------------------------------------------- */

.npy-banner__cta {
  align-self: flex-start;
  display: inline-block;
  padding: 13px 26px;
  border-radius: 500px;
  background: var(--npy-banner-accent);
  color: var(--npy-banner-bg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.npy-banner__cta:hover,
.npy-banner__cta:focus {
  color: var(--npy-banner-bg);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Whole-banner link, used when a URL was set without a button label. */
.npy-banner__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.npy-banner__overlay-link:focus-visible {
  outline: 3px solid var(--npy-banner-accent);
  outline-offset: -3px;
}

/* Media ----------------------------------------------------------------- */

.npy-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Treatment: image beside the text --------------------------------------- */

.npy-banner--side .npy-banner__media {
  position: relative;
  flex: 0 0 42%;
  align-self: stretch;
  min-height: 240px;
}

/* Absolute rather than `height: 100%`: the column's height comes from the text
   beside it, and a percentage against an indefinite height is unreliable. */
.npy-banner--side .npy-banner__image {
  position: absolute;
  inset: 0;
}

/* Treatment: image behind the text --------------------------------------- */

.npy-banner--background {
  align-items: stretch;
}

.npy-banner--background .npy-banner__media {
  position: absolute;
  inset: 0;
}

.npy-banner--background .npy-banner__body {
  position: relative;
  z-index: 1;
  padding: 64px 48px;
}

/* Keeps the text readable whatever the photo underneath. */
.npy-banner--background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.npy-banner--background.npy-banner--align-center::after {
  background: rgba(0, 0, 0, 0.45);
}

.npy-banner--background.npy-banner--align-right::after {
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* Alignment -------------------------------------------------------------- */

.npy-banner--align-center .npy-banner__body {
  text-align: center;
  align-items: center;
}

.npy-banner--align-center .npy-banner__cta {
  align-self: center;
}

.npy-banner--align-right .npy-banner__body {
  text-align: right;
  align-items: flex-end;
}

.npy-banner--align-right .npy-banner__cta {
  align-self: flex-end;
}

/* On the two-column treatment, "right" means image first. `order` only moves
   the boxes visually; the DOM order still reads title-then-image. */
.npy-banner--side.npy-banner--align-right .npy-banner__media {
  order: -1;
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 782px) {
  .npy-banner {
    /* A fixed minimum height set for the desktop layout is wrong once the
       columns stack; let the content decide instead. */
    min-height: 0;
  }

  .npy-banner--side {
    flex-direction: column;
  }

  .npy-banner--side .npy-banner__media {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .npy-banner__body {
    padding: 28px 24px;
    gap: 12px;
  }

  /* Stacked layout: what separates the image above from the title is the body's
     top padding, and it needs more air than the side padding. Skipped when there
     is no image, where that padding is just the top of the box. */
  .npy-banner--side:not(.npy-banner--no-image) .npy-banner__body {
    padding-top: 40px;
  }

  .npy-banner--background .npy-banner__body {
    padding: 40px 24px;
  }

  .npy-banner__title {
    font-size: 26px;
  }

  .npy-banner__text {
    font-size: 16px;
  }
}

/* Shown only to logged-in editors when a shortcode points at a banner that
   cannot be rendered. Visitors get nothing at all. ----------------------- */

.npy-banner-placeholder {
  padding: 32px;
  border: 1px dashed #b4b9be;
  border-radius: 6px;
  background: #f6f7f7;
  color: #50575e;
  font-size: 15px;
  text-align: center;
}