.experiences-header {
	width: 90%;
	max-width: 1250px;
	margin: auto;
	gap: 1.5rem;
	padding-top: 5rem;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.experiences-header p {
	line-height: 2.5rem;
	margin-bottom: 1.5rem;
}

.experiences-header p::before {
	content: ''; 
	width: 20%;
	height: 6px;
	background: #3498DB;
	display: block;
	margin-bottom: 1.5rem;
}

.experiences-col a {
	margin-top: 2rem;
	text-decoration: none;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 900px) {
	.experiences-header {
		flex-direction: column;
		text-align: center;
		gap: 2rem;
	}

	.experiences-header p {
		line-height: 1.6rem;
	}

	.experiences-header p::before {
		margin: 0 auto 1.5rem;
	}
}

/* ===============================
	STORIES SECTION
================================ */
#stories-section {
	padding: 5rem 0 3rem;
	max-width: 1250px;
	width: 90%;
	margin: auto;
}

.background {
	background: linear-gradient(135deg, #e4ecf2, #d5dfe7);
	border-radius: 5px;
	padding: 5rem clamp(2rem, 3vw, 5rem);
}

#stories-section h2 {
	text-align: center;
	margin-bottom: 1rem;
}

#stories-section p {
	text-align: center;
	margin-bottom: 2rem;
}

/* --------------------------------
	CAROUSEL
---------------------------------- */
.carousel {
	grid-auto-columns: calc((100% / 2) - 12px); /* 2 cards per slide by default */
}

.card {
	background: #fff;
	padding: 1.5rem 1.2rem 2rem;
}

.card img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 7 / 4;
}

.card h3 {
	margin: 1rem 0;
}

.card a {
	text-decoration: none;
	color: #3498DB;
	font-weight: bold;
	display: inline-block; /* needed for transition */
	transition: transform 0.2s ease;
	font-size: 1.2rem;
}

.card a::after {
	content: " →"; /* Unicode arrow */
	font-weight: bold;
}

.card a:hover {
	transform: translateX(5px);
}

/* --------------------------------
	L & R ARROW ICONS
---------------------------------- */
.carousel-container i {
	color: #000;
	font-size: 1.8rem;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	#stories-section {
		padding-top: 4rem;
	}

	.carousel { /* show 1 card at a time for smaller screen */
		grid-auto-columns: calc(100% - 12px);
	}
}

/* ===============================
	PHOTOS SECTION
================================ */
#pictures-section {
	padding: 3rem 0 10rem;
	width: 90%;
	max-width: 1250px;
	margin: auto;
}

#pictures-section h2 {
	text-align: center;
	margin-bottom: 1rem;
}

#pictures-section p {
	text-align: center;
	margin: 0 2rem 2rem;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
	gap: 2rem;
}

.picture {
	position: relative; /* creates positioning context for children */
	display: inline-block; 	/* default display is block which takes 100% of containers width regardless of img size. inline-block shrink-raps to size of img inside */
							/* so positioning is also relative to image and not block */
}

.picture img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 7 / 6;
	transition: transform 0.3s ease-in-out;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.05); /* very faint border */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* soft shadow */
}

.picture img:hover {
	transform: scale(1.03);
}

/* --------------------------------
	OVERLAY ON TOP OF PICTURES
---------------------------------- */
.picture i {
	position: absolute;	/* positioning is relative to nearest positioned ancestor (.picture's position: relative) */
	top: 15px;			/* distance from top edge of the image */
	right: 10px;		/* distance from right edge of the image */
	font-size: 1.3rem;
	color: #fff;
	pointer-events: none; /* ensures the <a> is still clickable */

	/* circle around icon */
	background: rgba(0, 0, 0, 0.7); /* dark semi-transparent circle */
	border-radius: 50%;
	padding: 8px; /* space around the icon */
}

.picture span {
	position: absolute;
	bottom: 1.5rem;	/* distance from bottom */
	left: 50%;		/* center in .picture */
	transform: translateX(-50%);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	text-shadow:/* text-shadow: offset-x offset-y blur-radius color, multiple stacks create stronger glow */
		0 0 5px rgba(0,0,0,0.8),
		0 0 10px rgba(0,0,0,0.7),
		0 0 15px rgba(0,0,0,0.6);
	pointer-events: none; /* keep <a> clickable */
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	.grid-container {
		grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
		gap: 1rem;
	}
}