/*
 * Author: Carolina Rodriguez 
 * Blue Team - Robert Breutzmann, Miguel Fernandez, Carolina Rodriguez, Sara White
 * Primary Author/Owner - Carolina Rodriguez
 * CSD 460 - Capstone Project - Marina Website Project
 * Landing Page styles. 
 */

/* ==========================================================================
   Landing page layout
   ========================================================================== */

.landing-main {
	margin: 0;
	padding: 0;
	max-width: none;
}

/* The salmon watermark moved to site.css when it became the backdrop for
   every page rather than just this one. Nothing to do here any more. */

/* ==========================================================================
   Hero section — landing-page-specific hero children.
   Base layout and image come from .hero-band + #landingHero in site.css.
   ========================================================================== */

.hero-description,
.hero-tagline {
	color: var(--color-text-inverse);
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	font-weight: 700;
	line-height: 1.35;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 1),
		0 0 10px rgba(0, 0, 0, 0.9);
}

.hero-description {
	margin: 0;
}

.hero-tagline {
	margin: 0.4rem 0 0;
}

.hero-cta {
	margin-top: 2.5rem;
}

/* ==========================================================================
   Shared landing page content
   ========================================================================== */

.section-container {
	max-width: var(--content-narrow);
	margin: 0 auto;
}

/* ==========================================================================
   Benefits section
   ========================================================================== */

.benefits-section {
	background: transparent;
	padding: 4rem 1.5rem;
}

.benefits-section h2 {
	margin: 0 0 2.5rem;
	color: var(--color-text-heading);
	font-family: var(--font-heading);
	font-size: 2rem;
	text-align: center;
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.benefit-card {
	background: color-mix(in srgb, var(--color-bg-card) 50%, transparent);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 1.5rem;
	box-shadow:
		0 6px 14px
		color-mix(
			in srgb,
			var(--color-charcoal-navy) 10%,
			transparent
		);
}

.benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1.25rem;
	background: var(--color-cta-secondary-bg);
	color: var(--color-cta-secondary-text);
	border-radius: var(--radius-control);
	font-size: 1.1rem;
}

.benefit-card h3 {
	margin: 0 0 0.75rem;
	color: var(--color-text-heading);
	font-family: var(--font-heading);
	font-size: 1.1rem;
}

.benefit-card p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

/* ==========================================================================
   Slip pricing card with the reservation call to action (issue #349).
   One wide card, same look as the benefit cards, so visitors can see what a
   slip costs before signing in.
   ========================================================================== */

.reservation-section {
	background: transparent;
	color: var(--color-text-body);
	text-align: center;
	padding: 0 1.5rem 4rem;
}

.pricing-card {
	padding: 2rem 1.5rem;
}

.pricing-card h2 {
	margin: 0 0 0.75rem;
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--color-text-heading);
}

/* .benefit-card p is small and muted for the short blurbs above; the
   pricing card's text is the point of it, so it reads at body size. */
.pricing-card p {
	max-width: 560px;
	margin: 0 auto 1.5rem;
	color: var(--color-text-body);
	font-size: 0.95rem;
	line-height: 1.5;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.pricing-tier {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 1.25rem 1rem;
	background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-ocean-blue);
	border-radius: var(--radius-inner);
}

.pricing-tier__size {
	color: var(--color-text-heading);
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
}

.pricing-tier__name {
	padding: 0.1rem 0.6rem;
	background: var(--color-cta-secondary-bg);
	color: var(--color-cta-secondary-text);
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pricing-tier__fits {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.pricing-tier__price {
	margin-top: 0.35rem;
	color: var(--color-text-body);
	font-size: 0.95rem;
}

.pricing-tier__price strong {
	color: var(--color-deep-marine);
	font-size: 1.35rem;
}

.pricing-card .pricing-card__extra {
	margin-bottom: 0.5rem;
}

.pricing-card__extra-label {
	margin-right: 0.35rem;
	font-weight: 700;
}

.pricing-card .pricing-card__terms {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

/* The call to action sits under the prices, set off by a rule. */
.pricing-card__cta {
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--color-border) 25%, transparent);
}

.pricing-card__cta h3 {
	margin: 0 0 0.5rem;
	font-size: 1.4rem;
}

/* ==========================================================================
   Moffat Bay Lodge — one wide card, same look as the benefit cards
   ========================================================================== */

.lodge-section {
	background: transparent;
	padding: 0 1.5rem 4rem;
}

/* Photo on the left (a third of the card), text on the right; stacks on narrow screens */
.lodge-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 2rem;
	align-items: center;
	padding: 1.5rem;
}

.lodge-card__figure {
	margin: 0;
}

.lodge-card__image {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius-inner);
}

.lodge-card__caption {
	margin-top: 0.35rem;
	color: var(--color-text-muted);
	font-size: 0.7rem;
	font-style: italic;
	opacity: 0.7;
	text-align: right;
}

.lodge-card h2 {
	margin: 0 0 0.75rem;
	color: var(--color-text-heading);
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

.lodge-card p {
	margin: 0 0 1.5rem;
	color: var(--color-text-body);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Centered under the (left-aligned) text */
.lodge-card .btn-action {
	display: flex;
	width: fit-content;
	margin: 0 auto;
}

/* ==========================================================================
   Responsive layout
   ========================================================================== */

@media (max-width: 56rem) {
	.benefits-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
	}

	.pricing-card {
		max-width: 520px;
		margin: 0 auto;
	}

	.pricing-grid {
		grid-template-columns: 1fr;
	}

	.lodge-card {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
		text-align: center;
	}

	.lodge-card__figure {
		width: 66%;
		margin: 0 auto;
	}

	.lodge-card__caption {
		text-align: center;
	}
}

@media (max-width: 40rem) {

	#landingHero {
		min-height: 360px;
		padding: 3rem 1.25rem;
	}

	#landingHero h1 {
		font-size: 2.4rem;
	}

	.benefits-section,
	.reservation-section,
	.lodge-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}