/* ==========================================================================
   TIADEL — Our Point of View page
   Requires common.css
   ========================================================================== */
.page--pov {
  background: var(--cream-page);
}
/* Hero
   -------------------------------------------------------------------------- */
.page--pov .hero {
  background: var(--cream-alt);
}
.page--pov .hero__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  position: relative;
  height: 342px;
}
.page--pov .hero__image {
  position: absolute;
  right: 64px;
  top: 14px;
  width: 570px;
  height: 310px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, black 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, black 62%, transparent 100%);
}
.page--pov .hero__content {
  position: absolute;
  left: 108px;
  top: 60px;
  width: 340px;
}
.page--pov .hero__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 45px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-strong);
}
.page--pov .hero__rule {
  margin: 24px 0 26px;
}
.page--pov .hero__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-body-alt);
}

/* Principles — image pair + copy panel per row
   -------------------------------------------------------------------------- */
.page--pov .principles {
  padding: 0 66px;
}
.page--pov .principle-row {
  display: grid;
  grid-template-columns: 297px 293px 1fr;
  gap: 4px;
  margin-bottom: 5px;
}
.page--pov .principle-row--last {
  margin-bottom: 0;
}
.page--pov .principle-row__image {
  width: 100%;
  height: 197px;
  object-fit: cover;
  display: block;
}

/* The middle row runs slightly taller */
.page--pov .principle-row--tall .principle-row__image {
  height: 207px;
}
.page--pov .principle-panel {
  background: #F2EDE2;
  padding: 28px 34px;
  box-sizing: border-box;
}
.page--pov .principle-panel__number {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold);
}
.page--pov .principle-panel__title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--ink-strong);
  margin-top: 6px;
}
.page--pov .principle-panel__text {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: #615A4C;
}
.page--pov .principle-panel__text--tight {
  margin-top: 14px;
}
.page--pov .principle-panel__text--follow {
  margin-top: 10px;
}

/* Closing band with two link cards
   -------------------------------------------------------------------------- */
.page--pov .closing {
  position: relative;
  height: 294px;
  background: linear-gradient(180deg, #F0E9DB 0%, #E9E0CE 100%);
  margin-top: 7px;
  overflow: hidden;
}
.page--pov .closing__deco {
  position: absolute;
  top: 0;
  height: 294px;
  width: auto;
}
.page--pov .closing__deco--left {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, black 55%, transparent 100%);
  mask-image: linear-gradient(90deg, black 55%, transparent 100%);
}
.page--pov .closing__deco--right {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, black 55%, transparent 100%);
  mask-image: linear-gradient(270deg, black 55%, transparent 100%);
}
.page--pov .closing__inner {
  position: relative;
  max-width: var(--page-width);
  margin: 0 auto;
  height: 100%;
}
.page--pov .closing__head {
  text-align: center;
  padding-top: 24px;
}
.page--pov .closing__quote {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-strong);
}
.page--pov .closing__rule {
  margin: 14px auto 0;
}
.page--pov .closing__cards {
  position: absolute;
  left: 123px;
  right: 123px;
  top: 141px;
  display: flex;
  gap: 8px;
}
.page--pov .link-card {
  flex: 1;
  background: #FBF8F1;
  box-shadow: 0 1px 6px rgba(60, 50, 30, 0.10);
  display: flex;
  align-items: center;
  padding: 10px 12px;
  box-sizing: border-box;
  height: 132px;
}
.page--pov .link-card__image {
  width: 150px;
  height: 108px;
  object-fit: contain;
}
.page--pov .link-card__image--tall {
  height: 116px;
}
.page--pov .link-card__body {
  margin-left: 14px;
}
.page--pov .link-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--gold);
}
.page--pov .link-card__title {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-strong);
  margin-top: 7px;
}
.page--pov .link-card__cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 12px;
}
.page--pov .link-card__cta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #3B362E;
  border-bottom: 1px solid var(--gold-rule);
  padding-bottom: 3px;
  white-space: nowrap;
}

/* ==========================================================================
   Tablet — 768px to 1085px
   ========================================================================== */
@media (max-width: 991px) {
  .page--pov .principles {
    padding: 0 24px;
  }

  /* Each principle becomes a two-image row with the copy panel below */
  .page--pov .principle-row,
  .page--pov .principle-row--tall {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 4px;
  }

  .page--pov .principle-panel {
    grid-column: 1 / -1;
    padding: 26px 28px;
  }

  .page--pov .principle-row__image,
  .page--pov .principle-row--tall .principle-row__image {
    height: 210px;
  }

  /* --- Closing band: art and absolute cards do not fit ---------------- */
  .page--pov .closing {
    height: auto;
    padding: 36px 24px 40px;
  }

  .page--pov .closing__deco {
    display: none;
  }

  .page--pov .closing__inner {
    height: auto;
  }

  .page--pov .closing__head {
    padding-top: 0;
  }

  .page--pov .closing__quote {
    font-size: 21px;
  }

  .page--pov .closing__cards {
    position: static;
    margin-top: 28px;
  }

  .page--pov .link-card {
    height: auto;
    padding: 14px;
  }

  .page--pov .link-card__image,
  .page--pov .link-card__image--tall {
    width: 110px;
    height: 92px;
  }

  .page--pov .link-card__title {
    font-size: 15px;
  }

}

/* ==========================================================================
   Mobile — up to 767px
   ========================================================================== */
@media (max-width: 767px) {
  /* Below 768px the overlay becomes two stacked blocks. */
  .page--pov .hero__inner {
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .page--pov .hero__image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 310;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .page--pov .hero__content {
    position: static;
    width: auto;
    padding: 32px 20px 36px;
  }

  .page--pov .principles {
    padding: 0 20px;
  }

  .page--pov .principle-row,
  .page--pov .principle-row--tall {
    grid-template-columns: 1fr;
    margin-bottom: 14px;
  }

  .page--pov .principle-row__image,
  .page--pov .principle-row--tall .principle-row__image {
    height: 190px;
  }

  .page--pov .principle-panel {
    padding: 24px 20px;
  }

  .page--pov .principle-panel__title {
    font-size: 19px;
  }

  .page--pov .closing {
    padding: 32px 20px 36px;
  }

  .page--pov .closing__quote {
    font-size: 18px;
  }

  /* The two link cards stack, each with its sketch beside the copy */
  .page--pov .closing__cards {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .page--pov .link-card__body {
    margin-left: 12px;
  }

  .page--pov .link-card__cta {
    gap: 14px;
    margin-top: 10px;
  }

  .page--pov .link-card__cta-label {
    font-size: 9px;
    letter-spacing: 1px;
  }

}

/* On the narrowest phones the sketch and its copy cannot sit side by side. */
@media (max-width: 380px) {
  .page--pov .link-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 14px;
  }

  .page--pov .link-card__image,
  .page--pov .link-card__image--tall {
    width: 96px;
    height: 76px;
  }

  .page--pov .link-card__body {
    margin-left: 0;
    margin-top: 10px;
  }

  .page--pov .link-card__cta {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ==========================================================================
   Desktop, narrow end (992px - 1085px)
   The closing band keeps its fixed height here, but the cards have less
   width to work with, so their copy wraps to more lines. Pull the side
   inset in and tighten the card so nothing touches the footer edge.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1085px) {
  .page--pov .closing__cards {
    left: 60px;
    right: 60px;
    top: 132px;
  }

  .page--pov .link-card {
    height: 140px;
    padding: 10px 14px;
  }

  .page--pov .link-card__image,
  .page--pov .link-card__image--tall {
    width: 128px;
    height: 96px;
  }

  .page--pov .link-card__title {
    font-size: 15.5px;
  }

  .page--pov .link-card__cta {
    gap: 14px;
    margin-top: 10px;
  }

  /* The principle copy column is at its narrowest here. */
  .page--pov .principles {
    padding: 0 40px;
  }
}

/* ==========================================================================
   Tablet hero — 768px to 991px
   The banner keeps the desktop overlay down to 768px; only its
   proportions change so the copy never runs into the image.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  /* The hero keeps its overlay layout here, sized in percentages. */
  .page--pov .hero__inner {
    height: 300px;
  }

  .page--pov .hero__image {
    right: 24px;
    top: 12px;
    width: 54%;
    height: 276px;
  }

  .page--pov .hero__content {
    left: 40px;
    top: 48px;
    width: 40%;
  }

  .page--pov .hero__title {
    font-size: 32px;
  }

  .page--pov .hero__text {
    font-size: 12px;
  }
}