/* =========================================================
   EDMO x EDUCAUSE — "Cocktails are on us!" landing page
   ========================================================= */

.edmo-cocktails {
	--cx-purple-deep: #1c0733;
	--cx-purple: #3b1160;
	--cx-purple-glow: #6b2b9e;
	--cx-gold: #e6c46a;
	--cx-gold-light: #f7e3a1;
	--cx-white: #ffffff;
	--cx-muted: rgba(255, 255, 255, 0.82);

	--cx-font-script: "Great Vibes", "Brush Script MT", cursive;
	--cx-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

	font-family: var(--cx-font-body);
	color: var(--cx-white);
	background: var(--cx-purple-deep);
}


/* =========================================================
   HERO
   ========================================================= */

.cocktails-hero {
	position: relative;
	overflow: hidden;

	padding: clamp(24px, 4vw, 56px) 20px clamp(40px, 5vw, 72px);

	background:
		radial-gradient(
			60% 50% at 30% 55%,
			rgba(230, 196, 106, 0.22) 0%,
			transparent 70%
		),
		radial-gradient(
			70% 60% at 70% 20%,
			var(--cx-purple-glow) 0%,
			transparent 65%
		),
		linear-gradient(
			180deg,
			var(--cx-purple) 0%,
			var(--cx-purple-deep) 100%
		);
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.cocktails-hero__inner {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}


/* =========================================================
   TOP BRANDING
   ========================================================= */

t {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: clamp(28px, 4vw, 48px);
}

.cocktails-hero__brand img {
	display: block;
	width: 110px;
	height: auto;
}

.cocktails-hero__partner {
	display: block;
	height: 34px;
	width: auto;
}


/* =========================================================
   MAIN HERO GRID
   DESKTOP:
   CONTENT = LEFT
   IMAGE   = RIGHT
   ========================================================= */

.cocktails-hero__grid {
	display: grid;

	grid-template-columns: 46% 54%;

	gap: 20px;

	align-items: center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.cocktails-hero__copy {
	grid-column: 1;
	grid-row: 1;

	align-self: center;

	width: 100%;
	max-width: 520px;

	text-align: left;
}


/* =========================================================
   COCKTAIL IMAGE
   ========================================================= */

.cocktails-hero__art {
	grid-column: 2;
	grid-row: 1;

	align-self: center;

	width: 100%;
	max-width: 650px;

	margin: 0;
	padding: 0;
}

.cocktails-hero__art img {
	display: block;

	width: 100%;
	height: auto;

	max-width: 650px;

	margin: 0 auto;

	filter: drop-shadow(
		0 30px 40px rgba(0, 0, 0, 0.55)
	);
}


/* =========================================================
   HEADLINE
   ========================================================= */

.cocktails-title {
	margin: 0 0 18px;

	font-family: var(--cx-font-script);
	font-weight: 400;

	font-size: clamp(56px, 7.5vw, 104px);

	line-height: 0.95;

	background:
		linear-gradient(
			180deg,
			var(--cx-gold-light) 0%,
			var(--cx-gold) 55%,
			#c9a24a 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;

	text-shadow: none;

	filter:
		drop-shadow(
			0 6px 18px rgba(230, 196, 106, 0.28)
		);
}

.cocktails-title__line {
	display: block;
}


/* =========================================================
   SUBHEADING
   ========================================================= */

.cocktails-subhead {
	max-width: 30ch;

	margin: 0 0 20px;

	font-size: clamp(16px, 1.6vw, 20px);

	font-weight: 500;

	line-height: 1.45;

	color: var(--cx-white);
}


/* =========================================================
   INVITE BADGE
   ========================================================= */

.cocktails-badge {
	display: inline-block;

	padding: 8px 22px;

	border: 1.5px solid var(--cx-gold);

	border-radius: 999px;

	font-size: 14px;

	font-style: italic;

	font-weight: 500;

	color: var(--cx-gold-light);

	background: rgba(230, 196, 106, 0.08);
}


/* =========================================================
   EVENT DETAILS
   ========================================================= */

.cocktails-details {
	list-style: none;

	margin: clamp(28px, 4vw, 44px) 0 0;

	padding: 0;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	width: fit-content;

	gap: 18px;

	text-align: left;
}


/* Individual detail */

.cocktails-details__item {
	display: flex;

	align-items: flex-start;

	gap: 14px;

	font-size: 17px;

	line-height: 1.4;
}


/* Detail text */

.cocktails-details__item span,
.cocktails-details address,
.cocktails-details address a {
	color: var(--cx-white);
}


/* =========================================================
   ICONS
   ========================================================= */

.cocktails-details__icon {
	flex: 0 0 auto;

	width: 26px;
	height: 26px;

	margin-top: 2px;

	padding: 4px;

	border-radius: 6px;

	background: rgba(255, 255, 255, 0.12);

	color: var(--cx-white);
}


/* =========================================================
   ADDRESS
   ========================================================= */

.cocktails-details address {
	font-style: normal;
}

.cocktails-details address a {
	color: var(--cx-white);

	text-decoration: none;
}

.cocktails-details address a:hover,
.cocktails-details address a:focus-visible {
	text-decoration: underline;

	text-underline-offset: 3px;
}

.cocktails-details strong {
	font-weight: 600;
}


/* =========================================================
   RSVP
   ========================================================= */

.cocktails-rsvp {
	display: flex;

	flex-direction: row;

	align-items: center;

	justify-content: flex-start;

	gap: 28px;

	margin-top: clamp(28px, 4vw, 44px);
}


/* QR */

.cocktails-rsvp__qr {
	display: inline-flex;

	flex-direction: column;

	align-items: center;

	gap: 8px;

	color: var(--cx-muted);

	font-size: 13px;

	text-decoration: none;
}

.cocktails-rsvp__qr img {
	display: block;

	width: 110px;
	height: 110px;

	padding: 8px;

	border-radius: 10px;

	background: var(--cx-white);
}


/* =========================================================
   RSVP BUTTON
   ========================================================= */

.cocktails-rsvp__btn {
	display: inline-block;

	padding: 14px 36px;

	border-radius: 999px;

	background:
		linear-gradient(
			180deg,
			var(--cx-gold-light),
			var(--cx-gold)
		);

	color: var(--cx-purple-deep);

	font-weight: 600;

	font-size: 15px;

	text-decoration: none;

	box-shadow:
		0 10px 30px rgba(230, 196, 106, 0.3);

	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
}

.cocktails-rsvp__btn:hover,
.cocktails-rsvp__btn:focus-visible {
	transform: translateY(-2px);

	box-shadow:
		0 14px 34px rgba(230, 196, 106, 0.42);

	color: var(--cx-purple-deep);
}


/* =========================================================
   FOCUS STATES
   ========================================================= */

.cocktails-rsvp__btn:focus-visible,
.cocktails-rsvp__qr:focus-visible,
.cocktails-hero__brand:focus-visible {
	outline: 2px solid var(--cx-gold-light);

	outline-offset: 4px;
}


/* =========================================================
   WEBSITE TEXT
   ========================================================= */

.cocktails-hero__site {
	margin: clamp(32px, 5vw, 56px) 0 0;

	text-align: left;

	font-size: 13px;

	letter-spacing: 0.02em;

	color: var(--cx-muted);
}


/* =========================================================
   TABLET
   901px - 1100px
   ========================================================= */

@media (max-width: 1100px) and (min-width: 901px) {

	.cocktails-hero {
		padding-left: 30px;
		padding-right: 30px;
	}

	.cocktails-hero__grid {
		grid-template-columns: 48% 52%;

		gap: 10px;
	}

	.cocktails-hero__copy {
		max-width: 480px;
	}

	.cocktails-title {
		font-size: clamp(56px, 7vw, 82px);
	}

	.cocktails-hero__art {
		max-width: 560px;
	}
}


/* =========================================================
   TABLET / MOBILE
   BELOW 900px

   CONTENT
      ↓
   IMAGE
   ========================================================= */

@media (max-width: 900px) {

	.cocktails-hero {
		padding:
			32px
			20px
			56px;
	}


	/* -----------------------------------------
	   Change grid to single column
	   ----------------------------------------- */

	.cocktails-hero__grid {
		display: grid;

		grid-template-columns: 1fr;

		gap: 40px;
	}


	/* -----------------------------------------
	   CONTENT FIRST
	   ----------------------------------------- */

	.cocktails-hero__copy {
		grid-column: 1;
		grid-row: 1;

		width: 100%;
		max-width: 600px;

		margin: 0 auto;

		text-align: center;
	}


	/* -----------------------------------------
	   IMAGE SECOND
	   ----------------------------------------- */

	.cocktails-hero__art {
		grid-column: 1;
		grid-row: 2;

		width: 100%;
		max-width: 520px;

		margin: 0 auto;
	}


	.cocktails-hero__art img {
		width: 100%;
		max-width: 520px;

		margin: 0 auto;
	}


	/* -----------------------------------------
	   CENTER SUBHEADING
	   ----------------------------------------- */

	.cocktails-subhead {
		margin-left: auto;
		margin-right: auto;
	}


	/* -----------------------------------------
	   CENTER EVENT DETAILS
	   ----------------------------------------- */

	.cocktails-details {
		margin-left: auto;
		margin-right: auto;

		text-align: left;
	}


	/* -----------------------------------------
	   CENTER RSVP
	   ----------------------------------------- */

	.cocktails-rsvp {
		justify-content: center;
	}
}


/* =========================================================
   MOBILE
   BELOW 520px
   ========================================================= */

@media (max-width: 520px) {

	.cocktails-hero {
		padding:
			24px
			18px
			48px;
	}


	/* -----------------------------------------
	   BRANDING
	   ----------------------------------------- */

	.cocktails-hero__brand img {
		width: 88px;
	}

	.cocktails-hero__partner {
		height: 26px;
	}


	/* -----------------------------------------
	   GRID
	   ----------------------------------------- */

	.cocktails-hero__grid {
		gap: 32px;
	}


	/* -----------------------------------------
	   TITLE
	   ----------------------------------------- */

	.cocktails-title {
		font-size: clamp(
			48px,
			14vw,
			72px
		);

		line-height: 0.95;
	}


	/* -----------------------------------------
	   SUBHEADING
	   ----------------------------------------- */

	.cocktails-subhead {
		font-size: 15px;

		max-width: 32ch;
	}


	/* -----------------------------------------
	   BADGE
	   ----------------------------------------- */

	.cocktails-badge {
		padding: 7px 18px;

		font-size: 13px;
	}


	/* -----------------------------------------
	   DETAILS
	   ----------------------------------------- */

	.cocktails-details {
		width: 100%;

		max-width: 320px;

		gap: 16px;
	}

	.cocktails-details__item {
		font-size: 15px;

		gap: 12px;
	}

	.cocktails-details__icon {
		width: 24px;
		height: 24px;
	}


	/* -----------------------------------------
	   RSVP
	   ----------------------------------------- */

	.cocktails-rsvp {
		flex-direction: row;

		align-items: center;

		justify-content: center;

		gap: 16px;
	}


	.cocktails-rsvp__qr img {
		width: 90px;
		height: 90px;
	}


	.cocktails-rsvp__btn {
		padding: 12px 24px;

		font-size: 14px;
	}


	/* -----------------------------------------
	   IMAGE
	   ----------------------------------------- */

	.cocktails-hero__art {
		max-width: 400px;
	}


	.cocktails-hero__art img {
		max-width: 400px;
	}


	/* -----------------------------------------
	   WEBSITE
	   ----------------------------------------- */

	.cocktails-hero__site {
		text-align: center;

		margin-top: 36px;
	}
}


/* =========================================================
   VERY SMALL PHONES
   BELOW 380px
   ========================================================= */

@media (max-width: 380px) {

	.cocktails-title {
		font-size: 46px;
	}

	.cocktails-rsvp {
		gap: 10px;
	}

	.cocktails-rsvp__qr img {
		width: 82px;
		height: 82px;
	}

	.cocktails-rsvp__btn {
		padding: 11px 18px;

		font-size: 13px;
	}

	.cocktails-details__item {
		font-size: 14px;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.cocktails-rsvp__btn {
		transition: none;
	}
}