/* =========================================================
 * File: assets/css/style-story-card.css
 * ======================================================= */
/**
 * Full-width section background:
 * Replace the URL below with your overall background image (spans whole width).
 */
.story-card {
	position: relative;
  overflow: hidden; /* keeps svg inside rounded/section edges if needed */
  padding: 1.5rem;
}
/* The SVG behaves like a "background image layer" */
.story-card__svg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;

  /* Control color from CSS */
  --story-card-fabric-color: #D8D5CB;
	background-color: var(--Secondary-Gray-Card, #E3E0D6);
}
.home .story-card .story-card__svg-bg {	
  /* Control color from CSS */
  --story-card-fabric-color: #EBE2FB;
	background-color: var(--Tertiary-Purple-Fringe-BG, #F4EDFF);
}
/*
.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body:not(.home) .story-card {
	background-color: rgba(209, 186, 121, 0.35);
}
body:not(.home) .story-card::before {
	background: rgba(255, 255, 255, .8);
}
*/
.story-card .inner-project {
  max-width: var(--max-width);
  margin: 0 auto;
	position: relative;
  z-index: 1;
}
/* Card uses a fixed aspect ratio (1080x602) so background image behaves predictably */
.story-card__card {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1.5rem;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: 602 / 602;
  border-radius: 0.5rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}
.story-card__content {
  max-width: 36rem;
  margin-left: auto; /* extra safety */
  justify-items: end;
  text-align: center;
}
.story-card__pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 1rem 2rem .75rem;
  background: rgba(255, 255, 255, .14);
  justify-self: end;
  border-radius: 1.875rem;
  border: 3px solid var(--Primary-Open-Frame, #FFF);
  margin-bottom: 1.5rem;
}
.story-card__pill-text {
  color: var(--Primary-Open-Frame, #FFF);
  text-align: center;
  /* Mobile/Button Text */
  font: var(--Mobile-Button-Text);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}
.story-card__quote {
  margin-bottom: 1.5rem;
}
.story-card__quote p {
  color: var(--Primary-Open-Frame, #FFF);
  text-align: center;
  font-feature-settings: 'liga'off;
  /* Mobile/Customer Quote */
	font: var(--Mobile-Customer-Quote);
	letter-spacing: 0.015rem;
}
.story-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
}
.story-card__link-text {
  color: var(--Primary-Open-Frame, #FFF);
  text-align: center;
  /* Mobile/Hyperlink */
  font: var(--Mobile-Hyperlink);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
} 
@media (min-width: 768px) {
  .story-card {
    padding: 7.5rem 3.25rem;
  }
	.story-card__card {
    padding: 3.25rem;
  	aspect-ratio: 1080 / 602;
		align-items: center;
	}
  .story-card__content {
    max-width: 100%;
		text-align: right;
  }
  .story-card__pill {
    margin-bottom: 3rem;
  }
  .story-card__quote {
    margin-bottom: 3rem;
		max-width: 550px;
  }
  .story-card__quote p {
		text-align: right;
    font-size: 2.5rem;
    line-height: 2.875rem;
    letter-spacing: 0.025rem;
  }
}
/* Flourishes */
.nf-section.story-card .nf-flourish--a .nf-flourish {
	right: -1.5rem;
	top: -3rem;
}
@media (min-width: 768px) {
	.nf-section.story-card .nf-flourish--a .nf-flourish {
		right: -5rem;
		top: -4rem;
	}
}