/* Gift cards (14.0). Direction A's chrome and tokens, Option A's shared
   location pieces (l-btn, l-h2, --l-wrap, --l-tear, the FAQ) from
   location.css; everything here is gc- prefixed and scoped to
   body.acs-gift-cards. Mobile first; desktop from 1024. */

body.acs-gift-cards .gc *,
body.acs-gift-cards .gc *::before,
body.acs-gift-cards .gc *::after {
	box-sizing: border-box;
}

body.acs-gift-cards .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sections space themselves here, not by Direction A's gap */
body.acs-gift-cards main > section + section {
	margin-top: 0;
}

body.acs-gift-cards .gc .l-btn {
	margin-top: 0;
	justify-content: center;
}

/* ---------- 14.1 Hero ---------- */

body.acs-gift-cards .gc-hero {
	position: relative;
	margin-top: -0.5rem; /* tucked under the logo row */
	padding: 4.5rem var(--acs-gutter) calc(var(--l-tear) + 3rem); /* the title clears the hanging logo */
	overflow: hidden;
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-gift-cards .gc-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	z-index: 2;
	height: var(--l-tear);
	background: url("../directions/a/media/masks/hero-top.png") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-gift-cards .gc-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	height: var(--l-tear);
	background: url("../directions/a/media/masks/hero-bottom.png") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-gift-cards .gc-hero__inner {
	display: grid;
	gap: 2.5rem;
	max-width: var(--l-wrap);
	margin-inline: auto;
}

body.acs-gift-cards .gc-hero__copy {
	text-align: center;
}

body.acs-gift-cards .gc-hero__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem);
	line-height: 1.05;
	color: var(--acs-white);
	text-wrap: balance;
}

body.acs-gift-cards .gc-hero__body {
	max-width: 32rem;
	margin: 1rem auto 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.55;
}

body.acs-gift-cards .gc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* Two cards fanned: the back one up and to the right */
body.acs-gift-cards .gc-hero__cards {
	position: relative;
	width: min(100%, 20rem); /* smaller cards (designer) */
	aspect-ratio: 1 / 0.86;
	margin-inline: auto;
}

body.acs-gift-cards .gc-hero__card {
	position: absolute;
	width: 82%;
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}

body.acs-gift-cards .gc-hero__card--back {
	top: 0;
	right: 0;
	rotate: 9deg;
	opacity: 0.96;
}

body.acs-gift-cards .gc-hero__card--front {
	left: 0;
	bottom: 0;
	rotate: -7deg;
}

/* ---------- 14.2 Buy (+ 14.3 balance line) ---------- */

/* One white panel torn on all four sides (the paper's tears). It is widened by the tears' average
   depth each side so the red lines up with the steps above. The pseudos
   tear top and bottom; the side tears are background layers stretched to
   the panel's full height (tall on phones, where one tile ran out). */
body.acs-gift-cards .gc-buy {
	width: calc(min(var(--l-wrap), 100% - 2 * var(--acs-gutter)) + 2 * 0.64 * var(--l-tear));
	margin: 0 auto 4rem;
}

body.acs-gift-cards .gc-buy__panel {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 2rem;
	padding: calc(var(--l-tear) + 2.5rem) calc(var(--l-tear) + 1.25rem);
	background:
		url("../directions/a/media/masks/offer-left.png") left top / var(--l-tear) 100% no-repeat,
		url("../directions/a/media/masks/offer-right.png") right -4px top / var(--l-tear) 100% no-repeat, /* its outer columns are transparent */
		var(--acs-white);
	color: var(--acs-ink);
	text-align: center;
}

body.acs-gift-cards .gc-buy__panel::before,
body.acs-gift-cards .gc-buy__panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-gift-cards .gc-buy__panel::before {
	top: -3px; /* the strip's outer rows are transparent */
	background-image: url("../directions/a/media/masks/offer-top.png");
}

body.acs-gift-cards .gc-buy__panel::after {
	bottom: -3px;
	background-image: url("../directions/a/media/masks/offer-bottom.png");
}

body.acs-gift-cards .gc-buy__media {
	display: flex;
	justify-content: center;
	width: 100%;
}

body.acs-gift-cards .gc-buy__card {
	width: min(100%, 20rem);
	height: auto;
	rotate: -6deg;
	filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.28));
}

body.acs-gift-cards .gc-buy__copy {
	max-width: 32rem;
}

body.acs-gift-cards .gc-buy__title {
	color: var(--acs-ink);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}

/* The red line under Gift cards: Body L in the body face, bold, on one
   line, so the heading block reads as two lines, the H2 then this
   (designer, 2026-10-02) */
body.acs-gift-cards .gc-buy__sub {
	margin: 0.5rem 0 0;
	font-family: var(--acs-font-body);
	font-weight: 700;
	color: var(--acs-red);
}

body.acs-gift-cards .gc-buy__note {
	margin: 1rem 0 0;
	line-height: 1.6;
}

body.acs-gift-cards .gc-buy__copy .l-btn {
	margin-top: 1.5rem;
}

body.acs-gift-cards .gc-buy__fine {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--acs-ink-soft);
}

/* The balance line, set apart: a rule, an icon and bold type */
body.acs-gift-cards .gc-buy__balance {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--acs-line);
	font-weight: 700;
	line-height: 1.5;
}

body.acs-gift-cards .gc-buy__balance a {
	color: var(--acs-red);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

body.acs-gift-cards .gc-buy__balance a:hover {
	color: var(--acs-red-deep);
}

body.acs-gift-cards .gc-buy__balance-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--acs-red);
	color: var(--acs-white);
}

/* ---------- 14.4 How it works ---------- */

/* Straight on the paper, no boxes or outlines: a big tilted red numeral in
   the display face on a yellow brush mark, then the title and a line.
   Phones: number beside the copy. Desktop: three centred columns. */
body.acs-gift-cards .gc-steps {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin: 4rem auto 4rem;
}

body.acs-gift-cards .gc-steps__title {
	text-align: center;
}

body.acs-gift-cards .gc-steps__list {
	display: grid;
	gap: 2.25rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

body.acs-gift-cards .gc-step {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	align-items: start;
	column-gap: 1.25rem;
}

body.acs-gift-cards .gc-step__num {
	position: relative;
	justify-self: center;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-size: 3.75rem;
	line-height: 1;
	color: var(--acs-red);
	isolation: isolate; /* keeps the brush mark's -1 inside the numeral */
}

/* The brush mark sits behind the numeral. The numerals stand straight
   (designer, 2026-10-05; they leaned 6deg); the mark keeps the slight
   slope it had on the page (4deg on the leaning numeral, so -2deg). */
body.acs-gift-cards .gc-step__num::after {
	content: "";
	position: absolute;
	left: -12%;
	right: -12%;
	bottom: 0.08em;
	z-index: -1;
	height: 0.36em;
	border-radius: 999px 40% 999px 60%;
	background: var(--acs-yellow);
	rotate: -2deg;
}

body.acs-gift-cards .gc-step__title {
	margin: 0.375rem 0 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.15;
}

body.acs-gift-cards .gc-step__body {
	margin: 0.5rem 0 0;
	line-height: 1.55;
	color: var(--acs-ink-soft);
}


/* ---------- Locations, partners, press ---------- */

body.acs-gift-cards .gc-links {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin: 0 auto 4rem;
}

body.acs-gift-cards .gc-links__title {
	margin-bottom: 2rem;
	text-align: center;
}

body.acs-gift-cards .gc-links__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* As the location page's nearby cards: a full grey outline that turns red
   on hover, Hobo name, soft line, and a caps link with the circle arrow */
body.acs-gift-cards .gc-link a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem 1.75rem 1.75rem;
	border: 1.5px solid var(--acs-line);
	border-radius: 0.75rem;
	background: var(--acs-white);
	color: var(--acs-ink);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.acs-gift-cards .gc-link a:hover,
body.acs-gift-cards .gc-link a:focus-visible {
	border-color: var(--acs-red);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

body.acs-gift-cards .gc-link__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.1;
}

body.acs-gift-cards .gc-link__body {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--acs-ink-soft);
}

body.acs-gift-cards .gc-link__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.acs-gift-cards .gc-link a:hover .l-circle-arrow,
body.acs-gift-cards .gc-link a:focus-visible .l-circle-arrow {
	transform: translateX(4px);
	background: var(--acs-red-deep);
}

/* ================= Large phones and tablets ================= */

@media (min-width: 640px) {
	body.acs-gift-cards .gc-hero__actions .l-btn {
		min-width: 11rem;
	}
}

@media (min-width: 768px) {
	body.acs-gift-cards .gc-links__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* ================= Desktop ================= */

@media (min-width: 1024px) {
	body.acs-gift-cards .gc-hero {
		margin-top: 0;
		padding: 4.5rem var(--acs-gutter) calc(var(--l-tear) + 4.5rem);
	}

	body.acs-gift-cards .gc-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: center;
		gap: 4rem;
	}

	body.acs-gift-cards .gc-hero__copy {
		text-align: left;
	}

	body.acs-gift-cards .gc-hero__body {
		margin-left: 0;
	}

	body.acs-gift-cards .gc-hero__actions {
		justify-content: flex-start;
	}

	body.acs-gift-cards .gc-hero__cards {
		width: min(100%, 26rem);
		margin-right: 0;
	}

	body.acs-gift-cards .gc-steps {
		margin: 6rem auto 5rem;
	}

	/* Card left, copy right, centred on each other */
	body.acs-gift-cards .gc-buy {
		margin-bottom: 6rem;
	}

	body.acs-gift-cards .gc-links {
		margin-bottom: 6rem;
	}

	body.acs-gift-cards .gc-buy__panel {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
		justify-items: stretch;
		gap: 4rem;
		padding: calc(var(--l-tear) + 4rem) calc(var(--l-tear) + 3.5rem);
		text-align: left;
	}

	body.acs-gift-cards .gc-buy__card {
		width: min(100%, 30rem);
	}

	body.acs-gift-cards .gc-buy__copy {
		max-width: 34rem;
	}

	body.acs-gift-cards .gc-buy__balance {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}

	body.acs-gift-cards .gc-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 3.5rem;
		margin-top: 3.25rem;
	}

	body.acs-gift-cards .gc-step {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	body.acs-gift-cards .gc-step__num {
		font-size: 5rem;
	}

	body.acs-gift-cards .gc-step__title {
		margin-top: 1.25rem;
	}

	body.acs-gift-cards .gc-step__body {
		max-width: 20rem;
	}
}

/* ---------- Best seafood in town: Direction A's good-time section ---------- */

body.acs-gift-cards .a-goodtime {
	margin-bottom: 4rem;
}

@media (min-width: 1024px) {
	body.acs-gift-cards .a-goodtime {
		margin-bottom: 6rem;
	}
}

/* ---------- Gift cards: the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from the
   phone value at 375 to the desktop value at 1440, as on the home page (the
   good-time band, the footer and the logo follow from direction.css). Button
   labels and the link cards' foot links are UI labels and keep their sizes;
   the big step numbers are part of the steps' art and keep theirs. */
body.acs-gift-cards .gc-hero__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.acs-gift-cards .gc-hero__body {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.acs-gift-cards .l-h2,
body.acs-gift-cards .l-h2.gc-buy__title {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

body.acs-gift-cards .gc-link__title {
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
}

/* On the gift cards page itself the link cards' titles (Locations,
   Partners, Press) are H5, as on Our story (designer, 2026-10-07; they
   were H4). Scoped to this template: Social events borrows these cards
   and keeps H4. */
body.page-template-gift-cards .gc-link__title {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-gift-cards .gc-buy__sub {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-gift-cards .gc-step__title {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-gift-cards .l-faq__q {
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-gift-cards .gc-step__body,
body.acs-gift-cards .gc-buy__note,
body.acs-gift-cards .gc-buy__balance,
body.acs-gift-cards .gc-link__body,
body.acs-gift-cards .l-faq__a {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-gift-cards .gc-buy__fine {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

/* ---------- Hero: content centred in the red the eye sees (desktop) ----------
   The bottom padding carried the torn edge's height but the top did not,
   so the copy and cards sat 15 to 24px high on desktop (41 to 53px of red
   above, 83 to 88 below). The same total padding is split so the red above
   the cards and below them matches; the band keeps its height. Phones and
   tablets already matched (within 2.6px). */
@media (min-width: 1024px) {
	body.acs-gift-cards .gc-hero {
		padding-top: calc(var(--l-tear) * 0.61 + 4.17rem);
		padding-bottom: calc(var(--l-tear) * 0.39 + 4.83rem);
	}
}

/* The link cards' foot links: the circle arrow moves up Century Gothic's
   0.125em cap offset to the text's centre line (it sat 1.9px low) */
body.acs-gift-cards .gc-link__foot .l-circle-arrow {
	position: relative;
	top: -0.125em;
}

/* The two fanned cards centred on the red band (desktop). Measured on their
   visible pixels (rounded corners and the 9 / -7deg fan included), the pair
   sat 2.7 to 4.4px high at rest; it moves down 0.22rem. Their float now
   swings evenly either side of this rest pose (gift-cards.js: 10 and 8px of
   travel, 0.75deg either side of each card's fan angle), so the pair stays
   centred as it moves. */
@media (min-width: 1024px) {
	body.acs-gift-cards .gc-hero__cards {
		top: 0.22rem;
	}
}