/* ==========================================================================
   Biography Studio — page-gift.css
   Gift landing page — editorial, emotionally led, premium feel.
   Background sequence: cream → white → cream → blue-grey → white → cream → blue-grey → cream
   ========================================================================== */


/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.bsgi-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.bsgi-reveal--in {
	opacity: 1;
	transform: none;
}


/* ==========================================================================
   1 · HERO — centred, emotional
   ========================================================================== */
.bsgi-hero {
	background-color: var(--bs-cream);
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,254,250,0.8) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 5% 95%, rgba(237,229,217,0.35) 0%, transparent 50%);
	padding: 96px 0 104px;
	text-align: center;
}
.bsgi-hero__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
}
.bsgi-hero__label {
	font-family:    var(--bs-ui-font);
	font-size:      0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--bs-pink-dark);
	margin-bottom:  20px;
}
.bsgi-hero__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2.5rem, 5vw, 5rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.1;
	letter-spacing: -0.015em;
	color:          var(--bs-navy);
	margin-bottom:  28px;
}
.bsgi-hero__intro {
	font-family: var(--bs-body-font);
	font-size:   1.1875rem;
	line-height: 1.75;
	color:       var(--bs-text-muted);
	max-width:   46ch;
}


/* ==========================================================================
   2 · GIVE THIS AS A PRESENT — photo mosaic left, copy right
   ========================================================================== */
.bsgi-give {
	background:  var(--bs-white);
	padding:     104px 0;
	border-top:  1px solid var(--bs-border-light);
}
.bsgi-give__inner {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   72px;
	align-items:           center;
}

/* Photo column */
.bsgi-give__art {
	overflow: hidden;
}
.bsgi-give__photo {
	display:       block;
	width:         100%;
	height:        clamp(340px, 42vw, 560px);
	object-fit:    cover;
	object-position: center top;
	border-radius: 3px;
}


/* ==========================================================================
   SHARED SECTION STYLES
   ========================================================================== */
.bsgi-section {
	padding:    104px 0;
	border-top: 1px solid var(--bs-border-light);
}
.bsgi-section--white { background: var(--bs-white); }
.bsgi-section--cream { background: var(--bs-cream); }

.bsgi-section__label {
	font-family:    var(--bs-ui-font);
	font-size:      1.125rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--bs-text-muted);
	margin-bottom:  28px;
}
.bsgi-section__label--light {
	color: rgba(46, 74, 94, 0.55);
}

.bsgi-section__inner       { max-width: 720px; }
.bsgi-section__inner--wide { max-width: 780px; }

.bsgi-section__copy {
	font-family: var(--bs-body-font);
	font-size:   1.0625rem;
	line-height: 1.9;
	color:       var(--bs-text);
}
.bsgi-section__copy p            { margin-bottom: 1.6em; }
.bsgi-section__copy p:last-child { margin-bottom: 0; }


/* ==========================================================================
   4 · WHO THIS IS FOR — blue-grey accent, gift icon floats right
   ========================================================================== */
.bsgi-who {
	background:  #ccd8e2;
	padding:     104px 0;
	border-top:  1px solid rgba(9, 58, 102, 0.1);
}
.bsgi-who__inner {
	display:               grid;
	grid-template-columns: 1fr 300px;
	gap:                   80px;
	align-items:           start; /* required for sticky to work */
}

/* Stacked list — for-list on blue background */
.bsgi-for-list {
	list-style:    none;
	padding:       0;
	margin:        0 0 48px;
	border-top:    1px solid rgba(9, 58, 102, 0.14);
}
.bsgi-for-list li {
	font-family:   var(--bs-body-font);
	font-size:     1.0625rem;
	line-height:   1.5;
	color:         #2e4a5e;
	padding:       20px 0 20px 28px;
	border-bottom: 1px solid rgba(9, 58, 102, 0.14);
	position:      relative;
}
.bsgi-for-list li::before {
	content:    '';
	position:   absolute;
	left:       0;
	top:        50%;
	transform:  translateY(-50%);
	width:      12px;
	height:     1px;
	background: var(--bs-pink);
}

/* Qualifier paragraph */
.bsgi-for-close {
	font-family: var(--bs-body-font);
	font-size:   1rem;
	font-style:  italic;
	line-height: 1.85;
	color:       rgba(46, 74, 94, 0.7);
	max-width:   580px;
}
.bsgi-for-close p            { margin-bottom: 1.4em; }
.bsgi-for-close p:last-child { margin-bottom: 0; }

/* Gift book icon — sticky, tracks down as text scrolls past */
.bsgi-who__art {
	position:        sticky;
	top:             120px;
	display:         flex;
	justify-content: center;
	padding-top:     8px;
}
.bsgi-who__icon {
	display: block;
	width:   clamp(220px, 24vw, 320px);
	height:  auto;
	filter:  drop-shadow(0 12px 32px rgba(9, 58, 102, 0.14));
}


/* ==========================================================================
   5 · HOW GIVING WORKS — 2-col: prose left, steps right
   ========================================================================== */
.bsgi-how__inner {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   80px;
	align-items:           start;
}
.bsgi-steps {
	list-style:  none;
	padding:     0;
	margin:      0;
	padding-top: calc(0.75rem + 28px); /* align with copy after label */
}
.bsgi-steps li {
	display:       flex;
	gap:           20px;
	align-items:   flex-start;
	padding:       20px 0;
	border-bottom: 1px solid var(--bs-border-light);
}
.bsgi-steps li:first-child { border-top: 1px solid var(--bs-border-light); }
.bsgi-steps__num {
	font-family:    var(--bs-heading-font);
	font-style:     italic;
	font-weight:    700;
	font-size:      1.625rem;
	line-height:    1;
	color:          rgba(9, 58, 102, 0.22);
	flex-shrink:    0;
	width:          28px;
	padding-top:    4px;
}
.bsgi-steps__text {
	font-family: var(--bs-body-font);
	font-size:   0.9375rem;
	line-height: 1.65;
	color:       var(--bs-text);
}


/* ==========================================================================
   6 · WHICH EDITION TO GIVE — 3 cards with icons
   ========================================================================== */
.bsgi-editions {
	background:  var(--bs-cream);
	padding:     104px 0;
	border-top:  1px solid var(--bs-border-light);
}

/* Framing line above the grid */
.bsgi-editions__framing {
	font-family:   var(--bs-body-font);
	font-size:     1rem;
	font-style:    italic;
	line-height:   1.7;
	color:         var(--bs-text-muted);
	max-width:     640px;
	margin-bottom: 48px;
}

.bsgi-editions__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
	margin-bottom:         32px;
}

/* Card */
.bsgi-edition-card {
	background:     var(--bs-white);
	border:         1px solid var(--bs-border-light);
	border-radius:  4px;
	padding:        36px 32px 32px;
	display:        flex;
	flex-direction: column;
}

/* Icon */
.bsgi-edition-card__icon-wrap {
	margin-bottom: 24px;
}
.bsgi-edition-card__icon {
	display:    block;
	width:      clamp(96px, 10vw, 128px);
	height:     clamp(96px, 10vw, 128px);
	object-fit: contain;
}

.bsgi-edition-card__name {
	font-family:   var(--bs-heading-font);
	font-weight:   400;
	font-style:    italic;
	font-size:     1.75rem;
	line-height:   1.15;
	color:         var(--bs-navy);
	margin-bottom: 8px;
}
.bsgi-edition-card__tagline {
	font-family:   var(--bs-body-font);
	font-size:     0.8125rem;
	font-weight:   600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:         var(--bs-pink-dark);
	margin-bottom: 16px;
}
.bsgi-edition-card__desc {
	font-family:   var(--bs-body-font);
	font-size:     0.9375rem;
	line-height:   1.7;
	color:         var(--bs-text);
	flex:          1; /* push CTA to bottom */
	margin-bottom: 28px;
}
.bsgi-edition-card__cta {
	align-self: flex-start;
	font-size:  0.8125rem !important;
}

/* Complete Edition note — sits above the closing italic line */
.bsgi-editions__complete-note {
	font-family:   var(--bs-body-font);
	font-size:     1rem;
	color:         var(--bs-navy);
	text-align:    left;
	text-wrap:     balance;
	max-width:     42em;
	margin-top:    2rem;
	margin-bottom: 0.5rem;
}

/* Note below cards */
.bsgi-editions__note {
	font-family: var(--bs-body-font);
	font-size:   0.9375rem;
	font-style:  italic;
	color:       var(--bs-text-muted);
	text-align:  left;
}


/* ==========================================================================
   7 · CLOSING CTA — blue-grey accent, occasions list
   ========================================================================== */
.bsgi-close {
	background:  #ccd8e2;
	padding:     112px 0;
	border-top:  1px solid rgba(9, 58, 102, 0.1);
	text-align:  center;
}
.bsgi-close__inner {
	max-width: 640px;
	margin:    0 auto;
}
.bsgi-close__occasions {
	font-family:    var(--bs-heading-font);
	font-style:     italic;
	font-weight:    400;
	font-size:      clamp(1.75rem, 3.5vw, 3rem);
	line-height:    1.4;
	letter-spacing: -0.01em;
	color:          var(--bs-navy);
	margin-bottom:  44px;
}
.bsgi-close__kicker {
	font-family:   var(--bs-body-font);
	font-size:     1.0625rem;
	font-style:    italic;
	line-height:   1.7;
	color:         rgba(46, 74, 94, 0.75);
	margin-bottom: 36px;
}
.bsgi-close__rule {
	width:      40px;
	height:     2px;
	background: var(--bs-pink);
	margin:     0 auto 36px;
}
.bsgi-close__ctas {
	display:         flex;
	flex-wrap:       wrap;
	gap:             14px;
	justify-content: center;
}
.bsgi-close .bsh-btn--ghost {
	border-color: rgba(9, 58, 102, 0.45);
	color:        var(--bs-navy);
}
.bsgi-close .bsh-btn--ghost:hover {
	background:   rgba(9, 58, 102, 0.06);
	border-color: var(--bs-navy);
}

/* Desktop-only line break in occasions */
.bsgi-br--desktop { display: inline; }


/* ==========================================================================
   RESPONSIVE — below 1024px
   ========================================================================== */
@media ( max-width: 1024px ) {

	.bsgi-give__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.bsgi-who__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.bsgi-who__art {
		position: static;
		order:    -1;
	}

	.bsgi-how__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.bsgi-steps {
		padding-top: 0;
	}

	.bsgi-editions__grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

}


/* ==========================================================================
   RESPONSIVE — below 768px
   ========================================================================== */
@media ( max-width: 768px ) {

	.bsgi-hero { padding: 64px 0 72px; }

	.bsgi-give  { padding: 64px 0 56px; }
	.bsgi-who   { padding: 64px 0 56px; }

	.bsgi-section,
	.bsgi-editions { padding: 64px 0 56px; }

	.bsgi-give__photo { height: clamp(240px, 60vw, 380px); }

	.bsgi-editions__grid { grid-template-columns: 1fr; }

	.bsgi-close { padding: 80px 0; }
	.bsgi-close__ctas { flex-direction: column; align-items: center; }
	.bsgi-close__ctas .bsh-btn { width: 100%; max-width: 320px; text-align: center; }

	.bsgi-br--desktop { display: none; }

}


/* ==========================================================================
   8 · BANNER PHOTO — cream, below closing CTA
   ========================================================================== */
.bsgi-banner {
	padding:    80px 0;
	border-top: 1px solid var(--bs-border-light);
}

.bsgi-banner__img {
	width:      100%;
	object-fit: cover;
	display:    block;
}

@media ( max-width: 768px ) {
	.bsgi-banner { padding: 56px 0; }
}