/* SYPN homepage body - Figma "Home Screen" desktop (3001:4461) and "Home Open"
   mobile (3046:3941). View: Views/Homepage.cshtml */

.sypn-home {
	font-family: var(--sypn-font);
	color: var(--sypn-ink);
}

.sypn-home h1,
.sypn-home h2,
.sypn-home h3 {
	margin: 0;
	font-weight: 700;
}

/* =========================================================
   Shared pieces
   ========================================================= */

/* .sypn-btn lives in site.css - the journey planner results page uses it too. */

/* 34px orange square with a forward arrow - the "read more" affordance */
.sypn-arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--sypn-radius-sm);
	background: var(--sypn-orange);
}

.sypn-arrow-btn img {
	width: 16px;
	height: 16px;
}

a.sypn-arrow-btn:hover,
a.sypn-arrow-btn:focus-visible {
	background: var(--sypn-orange-mid);
}

/* Section heading with the prev/next pair on the right */
.sypn-section-head {
	display: flex;
	align-items: flex-end;
	gap: var(--sypn-space-xxs);
}

.sypn-section-head h2 {
	flex: 1 0 0;
	min-width: 0;
	font-size: 48px;
	line-height: 56px;
}

.sypn-carousel-nav {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
}

.sypn-carousel-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border: 2px solid currentColor;
	border-radius: 4px;
	background: none;
	color: inherit;
	cursor: pointer;
}

.sypn-carousel-nav img {
	width: 16px;
	height: 16px;
}

.sypn-carousel-nav .sypn-carousel-next img {
	transform: rotate(180deg);
}

/* Horizontal track: --track-cols items are visible, any extras scroll. */
.sypn-track {
	--track-gap: var(--sypn-space-sm);
	--track-cols: 3;
	display: flex;
	gap: var(--track-gap);
	align-items: stretch;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sypn-track::-webkit-scrollbar {
	display: none;
}

.sypn-track > * {
	flex: 0 0 calc((100% - var(--track-gap) * (var(--track-cols) - 1)) / var(--track-cols));
	min-width: 0;
	scroll-snap-align: start;
}

/* Set by homepage.js when the track has nothing to scroll to */
.sypn-carousel-nav[hidden] {
	display: none;
}

/* =========================================================
   Diagonal band separator (Figma "Shape" 3001:4554 / 3001:4619)
   Band takes the colour of the section above, the right-hand panel takes the
   colour of the section below, and a masked wedge cuts the diagonal between.
   ========================================================= */

.sypn-notch {
	display: flex;
	justify-content: flex-end;
	height: var(--sypn-notch-height);
	overflow: hidden;
	background: var(--notch-band);
}

.sypn-notch-panel {
	position: relative;
	width: var(--sypn-notch-panel-width);
	height: 80px;
	background: var(--notch-panel);
}

.sypn-notch-panel::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 120px;
	height: 80px;
	background: var(--notch-band);
	-webkit-mask: url("../images/homepage/shape-notch.svg") no-repeat 0 0 / 120px 80px;
	mask: url("../images/homepage/shape-notch.svg") no-repeat 0 0 / 120px 80px;
}

.sypn-notch--white-to-dark {
	--notch-band: var(--sypn-white);
	--notch-panel: var(--sypn-ink);
}

.sypn-notch--dark-to-grey {
	--notch-band: var(--sypn-ink);
	--notch-panel: var(--sypn-steam);
}

/* =========================================================
   Hero
   ========================================================= */

.sypn-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sypn-space-sm);
	min-height: 562px;
	padding: 88px var(--sypn-gutter);
	overflow: hidden;
	background: var(--sypn-charcoal);
	color: var(--sypn-white);
}

.sypn-hero-media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sypn-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sypn-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.sypn-hero-content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-sm);
}

.sypn-hero h1 {
	font-size: 64px;
	line-height: 72px;
}

.sypn-hero p {
	max-width: 603px;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.sypn-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sypn-space-xs);
}

/* =========================================================
   Journey planner - overlaps the bottom of the hero
   ========================================================= */

.sypn-planner {
	position: relative;
	z-index: 2;
	margin: -110px var(--sypn-gutter) 0;
}

.sypn-planner-tabs {
	display: flex;
	width: 601px;
	max-width: 100%;
	border-radius: var(--sypn-radius-md) var(--sypn-radius-md) 0 0;
	overflow: hidden;
	background: var(--sypn-charcoal-25);
}

.sypn-planner-tab {
	flex: 1 0 0;
	padding: 12px 8px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: var(--sypn-charcoal-25);
	color: var(--sypn-grey);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	cursor: pointer;
}

.sypn-planner-tab[aria-selected="true"] {
	background: var(--sypn-white);
	border-bottom-color: var(--sypn-orange-75);
	color: var(--sypn-ink);
}

.sypn-planner-body {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--sypn-space-xs);
	background: var(--sypn-white);
	border-radius: 0 var(--sypn-radius-md) var(--sypn-radius-md) var(--sypn-radius-md);
}

.sypn-planner-fields {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
}

/* From/to sit together so the swap button can pin to the seam between them */
.sypn-field-pair {
	position: relative;
	display: flex;
	flex: 1 0 0;
	min-width: 0;
}

.sypn-field {
	/* Anchors the suggestion listbox to this field rather than the whole pair */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 0;
	min-width: 0;
	height: 68px;
	padding: 12px 16px;
	border: 2px solid var(--sypn-grey-25);
	background: var(--sypn-white);
}

.sypn-field + .sypn-field {
	margin-left: -2px;
}

/* Set when Plan is pressed on a location that was typed but never picked from the suggestions,
   so it has no coordinates to plan from. z-index because the next field's border overlaps this
   one by 2px and would otherwise cover the red edge. */
.sypn-field.is-invalid {
	border-color: var(--sypn-error-dark);
	z-index: 1;
}

/* The swap button straddles the seam, so "Going to" is indented to clear it.
   flex-basis sizes the content box, so the two fields only come out equal - and
   the seam only lands on the pair's 50% - if their padding totals match. */
.sypn-field-pair .sypn-field:first-child {
	border-radius: 4px 0 0 4px;
	padding-right: 32px;
}

.sypn-field-pair .sypn-field + .sypn-field {
	padding-left: 32px;
}

.sypn-field--when {
	border-radius: 0 4px 4px 0;
	margin-left: -2px;
}

.sypn-field label {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sypn-ink);
}

.sypn-field input {
	border: 0;
	padding: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-ink);
}

.sypn-field input::placeholder {
	color: var(--sypn-grey);
	opacity: 1;
}

/* =========================================================
   Location suggestions
   Built by homepage.js. A native <datalist> cannot carry the
   mode icon, so the listbox is ours to draw.
   ========================================================= */

.sypn-suggest {
	position: absolute;
	top: 100%;
	/* Pulled out by the field's 2px border so the edges line up */
	left: -2px;
	right: -2px;
	z-index: 20;
	max-height: 320px;
	margin: 2px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	border: 2px solid var(--sypn-grey-25);
	border-radius: 0 0 4px 4px;
	background: var(--sypn-white);
	box-shadow: 0 8px 16px rgba(27, 27, 28, 0.12);
}

.sypn-suggest-option {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	padding: 12px 16px;
	cursor: pointer;
}

.sypn-suggest-option + .sypn-suggest-option {
	border-top: 1px solid var(--sypn-charcoal-25);
}

.sypn-suggest-option:hover,
.sypn-suggest-option.is-active {
	background: var(--sypn-charcoal-25);
}

.sypn-suggest-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.sypn-suggest-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sypn-suggest-name {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sypn-ink);
}

.sypn-suggest-meta {
	font-size: 14px;
	line-height: 20px;
	color: var(--sypn-grey);
}

/* "Use my current location" - Figma "Home Screen - depatures - Live location"
   (3354:13084). Its own box below the field, on the field's edges, not part of the
   suggestion list - it is offered before there is anything to suggest. */
.sypn-locate {
	position: absolute;
	top: 100%;
	/* Pulled out by the field's 2px border so the edges line up */
	left: -2px;
	right: -2px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
	min-height: 68px;
	margin-top: 8px;
	padding: 12px 16px;
	border: 2px solid var(--sypn-grey-25);
	border-radius: 4px;
	background: var(--sypn-white);
	color: var(--sypn-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-align: left;
	cursor: pointer;
}

.sypn-locate[hidden] {
	display: none;
}

.sypn-locate img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

/* =========================================================
   Date and time
   Figma: collapsed summary in the planner row, expanding to
   the panel at "input" (3354:9641).
   ========================================================= */

.sypn-field--when {
	flex-direction: row;
	align-items: center;
	flex: 0 0 auto;
	padding-right: 6px;
}

/* Open, the field and the panel read as one card, so the seam between them goes */
.sypn-field--when.is-open {
	border-bottom-color: transparent;
	border-radius: 0 4px 0 0;
	z-index: 21;
}

.sypn-when-summary {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-md);
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.sypn-when-part {
	display: flex;
	flex-direction: column;
}

.sypn-when-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--sypn-ink);
}

.sypn-when-value {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-grey);
	/* "15 July" and "19:57" are the widest the two ever get; reserving the room
	   stops the planner row reflowing every time the value changes */
	min-width: 7ch;
}

.sypn-when-panel {
	position: absolute;
	top: 100%;
	/* Pulled out by the field's 2px border so the edges line up */
	left: -2px;
	right: -2px;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xxs);
	padding: var(--sypn-space-xxs) var(--sypn-space-xs) 12px;
	border: 2px solid var(--sypn-grey-25);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	background: var(--sypn-white);
	box-shadow: 0 8px 16px rgba(27, 27, 28, 0.12);
}

.sypn-when-input {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
	height: 68px;
	padding: 12px;
	border: 1px solid var(--sypn-lighter);
	border-radius: 4px;
	cursor: pointer;
}

.sypn-when-input > img {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.sypn-when-input input {
	flex: 1 0 0;
	min-width: 0;
	font-weight: 600;
	cursor: pointer;
}

/* The chevron is the affordance the design gives these, so the browser's own
   picker button would be a second one saying the same thing */
.sypn-when-input input::-webkit-calendar-picker-indicator {
	display: none;
}

.sypn-when-chevron {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

/* Segmented control: the dark track is the container, the selected half is a white pill */
.sypn-when-mode {
	display: flex;
	padding: 4px;
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-ink);
}

.sypn-when-mode-option {
	flex: 1 0 0;
	min-width: 0;
	height: 39px;
	padding: 0 var(--sypn-space-xs);
	border: 0;
	border-radius: var(--sypn-radius-md);
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--sypn-white);
	cursor: pointer;
}

.sypn-when-mode-option.is-selected {
	background: var(--sypn-white);
	color: var(--sypn-ink-900);
}

.sypn-swap {
	position: absolute;
	left: calc(50% - 20px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--sypn-radius-sm);
	background: var(--sypn-orange-mid);
	cursor: pointer;
}

.sypn-swap img {
	width: 21px;
	height: 21px;
	/* swap_vert is a vertical pair; Figma rotates it AND flips it so the
	   left-pointing arrow sits on top and the right-pointing one below */
	transform: rotate(90deg) scaleY(-1);
}

.sypn-planner-actions {
	display: flex;
	gap: var(--sypn-space-xs);
	flex-shrink: 0;
}

.sypn-planner-actions .sypn-btn {
	height: 68px;
}

/* =========================================================
   Live departures tab
   ========================================================= */

/* One field spanning the panel, unlike the journey tab's from/to pair */
.sypn-field--stop {
	border-radius: 4px;
	flex: 1 0 0;
}

.sypn-departures-map {
	flex-shrink: 0;
	text-decoration: underline;
}

.sypn-departures {
	margin: var(--sypn-space-xs) var(--sypn-gutter) 0;
	background: var(--sypn-white);
	border: 1px solid var(--sypn-charcoal);
	border-radius: var(--sypn-radius-md);
	overflow: hidden;
}

.sypn-departures-head {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-xs) var(--sypn-space-sm);
	border-bottom: 1px solid var(--sypn-steam);
}

.sypn-departures-head h2 {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	color: var(--sypn-ink);
}

.sypn-departures-updated {
	font-size: 16px;
	color: var(--sypn-grey);
}

.sypn-departures-refresh {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
	flex-shrink: 0;
	padding: 12px 16px;
	border: 2px solid var(--sypn-charcoal);
	border-radius: var(--sypn-radius-sm);
	background: var(--sypn-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: var(--sypn-ink);
	cursor: pointer;
}

.sypn-departure {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-xs) var(--sypn-space-sm);
	border-bottom: 1px solid var(--sypn-steam);
}

.sypn-departure:last-child {
	border-bottom: 0;
}

/* The coloured spine is the row's status at a glance */
.sypn-departure::before {
	content: "";
	flex-shrink: 0;
	align-self: stretch;
	width: 4px;
	min-height: 48px;
	border-radius: 12px;
	background: var(--sypn-success);
}

.sypn-departure--delayed::before {
	background: var(--sypn-warning);
}

.sypn-departure--cancelled {
	background: rgba(220, 38, 38, 0.06);
}

.sypn-departure--cancelled::before {
	background: var(--sypn-error);
}

.sypn-departure-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sypn-charcoal-25);
}

.sypn-departure-icon img {
	width: 22px;
	height: 22px;
}

.sypn-departure-when {
	flex-shrink: 0;
	width: 150px;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	color: var(--sypn-ink);
}

.sypn-departure-aimed {
	display: block;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--sypn-grey);
	text-decoration: line-through;
}

.sypn-departure-where {
	flex: 1 0 0;
	min-width: 0;
}

.sypn-departure-line {
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--sypn-ink);
}

.sypn-departure-operator {
	display: block;
	font-size: 16px;
	line-height: 24px;
	color: var(--sypn-grey);
}

.sypn-departure-mins {
	flex-shrink: 0;
	/* wide enough for three digits - "108 Min(s)" must not wrap */
	width: 130px;
	white-space: nowrap;
	text-align: right;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	color: var(--sypn-ink);
}

.sypn-departure-pill {
	flex-shrink: 0;
	min-width: 92px;
	padding: 2px 8px;
	border: 1px solid var(--sypn-success);
	border-radius: 32px;
	background: var(--sypn-success-light);
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--sypn-ink);
}

.sypn-departure--delayed .sypn-departure-pill {
	border-color: var(--sypn-warning);
	background: var(--sypn-warning-light);
}

.sypn-departure--cancelled .sypn-departure-pill {
	border-color: var(--sypn-error-dark);
	background: var(--sypn-error);
	color: var(--sypn-white);
}

.sypn-departure--cancelled .sypn-departure-when,
.sypn-departure--cancelled .sypn-departure-line {
	color: var(--sypn-grey);
	text-decoration: line-through;
}

.sypn-departure--cancelled .sypn-departure-icon {
	opacity: 0.4;
}

.sypn-departures-empty {
	padding: var(--sypn-space-sm);
	font-size: 16px;
	color: var(--sypn-grey);
}

/* =========================================================
   Three highlighted service cards
   ========================================================= */

.sypn-quicklinks {
	background: var(--sypn-white);
	padding: var(--sypn-space-sm) var(--sypn-gutter);
}

.sypn-quicklinks-grid {
	display: flex;
	gap: var(--sypn-space-xs);
	align-items: stretch;
}

.sypn-service-card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-sm);
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-ink);
	color: var(--sypn-white);
	text-decoration: none;
}

.sypn-service-card:hover .sypn-arrow-btn,
.sypn-service-card:focus-visible .sypn-arrow-btn {
	background: var(--sypn-orange-mid);
}

.sypn-service-card:hover,
.sypn-service-card:focus-visible {
	color: var(--sypn-white);
}

/* Icon and title are a tight pair (4px), separate from the 16px card rhythm */
.sypn-service-heading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
}

.sypn-service-card img.sypn-service-icon {
	width: 36px;
	height: 36px;
}

.sypn-service-card h2 {
	font-size: 24px;
	line-height: 32px;
}

.sypn-service-card p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

/* Pin the arrow to the bottom so it lines up across cards of differing copy */
.sypn-service-card .sypn-arrow-btn {
	margin-top: auto;
}

/* =========================================================
   How can we help?
   ========================================================= */

.sypn-help {
	background: var(--sypn-white);
	padding: var(--sypn-space-lg) var(--sypn-gutter);
}

.sypn-help h2 {
	font-size: 32px;
	line-height: 40px;
	margin-bottom: var(--sypn-space-md);
}

.sypn-help-grid {
	display: flex;
	gap: var(--sypn-space-sm);
	align-items: stretch;
}

.sypn-help-card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--sypn-space-sm) var(--sypn-space-xs);
	border: 1px solid var(--sypn-steam);
	border-radius: var(--sypn-radius-lg);
	background: var(--sypn-white);
	color: #000;
	text-align: center;
	text-decoration: none;
}

.sypn-help-card:hover,
.sypn-help-card:focus-visible {
	color: #000;
	border-color: var(--sypn-orange);
}

.sypn-help-card img {
	width: 88px;
	height: 88px;
}

.sypn-help-card span {
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

/* =========================================================
   Campaign banner
   ========================================================= */

.sypn-campaign {
	background: var(--sypn-white);
	padding: 0 var(--sypn-gutter);
}

.sypn-campaign-inner {
	display: flex;
	border-radius: var(--sypn-space-xxs) var(--sypn-space-xxs) var(--sypn-space-xxs) 0;
	overflow: hidden;
}

.sypn-campaign-copy {
	flex: 0 0 51.7%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sypn-space-sm);
	padding: var(--sypn-space-sm);
	background: var(--sypn-orange);
	color: var(--sypn-ink);
}

.sypn-campaign-copy h2 {
	font-size: 48px;
	line-height: 56px;
}

.sypn-campaign-copy p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

.sypn-campaign-copy p + p {
	margin-top: var(--sypn-space-xs);
}

.sypn-campaign-copy .sypn-btn {
	align-self: flex-start;
}

.sypn-campaign-media {
	flex: 1 0 0;
	min-width: 0;
}

.sypn-campaign-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The banner's own step-down, same wedge as the band separators */
.sypn-campaign .sypn-notch {
	--notch-band: var(--sypn-orange);
	--notch-panel: var(--sypn-white);
	width: 69.65%;
}

.sypn-campaign .sypn-notch-panel {
	width: calc(100% - 101px);
}

/* =========================================================
   Travel information (dark band)
   ========================================================= */

.sypn-travel {
	background: var(--sypn-ink);
	color: var(--sypn-white);
	padding: var(--sypn-space-xl) var(--sypn-gutter);
}

.sypn-travel .sypn-section-head {
	margin-bottom: var(--sypn-space-sm);
}

.sypn-media-card {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-sm);
	border: 1px solid var(--sypn-steam);
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-white);
	color: var(--sypn-ink);
	text-decoration: none;
}

.sypn-media-card:hover,
.sypn-media-card:focus-visible {
	color: var(--sypn-ink);
}

.sypn-media-card:hover .sypn-arrow-btn,
.sypn-media-card:focus-visible .sypn-arrow-btn {
	background: var(--sypn-orange-mid);
}

.sypn-media-card > img {
	width: 100%;
	aspect-ratio: 640 / 427;
	object-fit: cover;
	border-radius: var(--sypn-radius-md);
}

.sypn-media-card h3 {
	font-size: 24px;
	line-height: 32px;
	color: #000;
}

.sypn-media-card p {
	margin: 0;
	flex: 1 0 auto;
	font-size: 16px;
	line-height: 28px;
}

/* =========================================================
   News and updates (grey band)
   ========================================================= */

.sypn-news {
	background: var(--sypn-steam);
	padding: var(--sypn-space-lg) var(--sypn-gutter);
}

.sypn-news .sypn-section-head {
	margin-bottom: var(--sypn-space-sm);
}

.sypn-news-card {
	display: flex;
	flex-direction: column;
	gap: var(--sypn-space-xs);
	padding: var(--sypn-space-sm);
	border: 1px solid var(--sypn-steam);
	border-radius: var(--sypn-radius-md);
	background: var(--sypn-white);
	color: var(--sypn-ink);
	text-decoration: none;
}

.sypn-news-card:hover,
.sypn-news-card:focus-visible {
	color: var(--sypn-ink);
}

.sypn-news-head {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xs);
}

.sypn-news-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 64px;
	border-radius: var(--sypn-space-xxs);
	background: var(--sypn-ink);
	flex-shrink: 0;
}

.sypn-news-icon img {
	width: 32px;
	height: 32px;
}

.sypn-news-tag {
	padding: var(--sypn-space-xxs);
	border: 2px solid var(--sypn-ink-900);
	border-radius: var(--sypn-space-xxs);
	background: var(--sypn-white);
	color: var(--sypn-ink-900);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}

.sypn-news-card h3 {
	font-size: 20px;
	line-height: 28px;
	color: #000;
}

.sypn-news-when {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
	color: var(--sypn-grey);
}

.sypn-news-card > p:not(.sypn-news-when) {
	margin: 0;
	flex: 1 0 auto;
	font-size: 16px;
	line-height: 28px;
}

.sypn-news-more {
	display: flex;
	align-items: center;
	gap: var(--sypn-space-xxs);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: underline;
}

.sypn-news-more img {
	width: 16px;
	height: 16px;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991.98px) {
	.sypn-hero {
		min-height: 0;
		padding: 48px var(--sypn-gutter) var(--sypn-space-sm);
	}

	.sypn-hero h1 {
		font-size: 40px;
		line-height: 48px;
	}

	.sypn-planner {
		margin-top: 0;
		padding-bottom: var(--sypn-space-sm);
		background: var(--sypn-ink);
	}

	.sypn-planner-tabs {
		width: 100%;
	}

	.sypn-planner-body {
		flex-direction: column;
		align-items: stretch;
		border-radius: 0 0 var(--sypn-radius-md) var(--sypn-radius-md);
		padding: var(--sypn-space-sm);
	}

	.sypn-planner-fields {
		flex-direction: column;
		gap: var(--sypn-space-xs);
	}

	/* Swap button moves out to the right of the stacked from/to pair */
	.sypn-field-pair {
		flex-direction: column;
		gap: 9px;
		padding-right: 48px;
	}

	/* Swap button sits outside the stacked pair, so no seam to clear */
	.sypn-field,
	.sypn-field-pair .sypn-field:first-child,
	.sypn-field-pair .sypn-field + .sypn-field,
	.sypn-field--when {
		border-radius: 4px;
		margin-left: 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Taller than the plain fields - it holds the 52px "Now" button */
	.sypn-field--when {
		height: 76px;
	}

	.sypn-field + .sypn-field {
		margin-left: 0;
	}

	.sypn-swap {
		left: auto;
		right: 0;
	}

	.sypn-planner-actions {
		flex-direction: column;
	}

	.sypn-planner-actions .sypn-btn {
		height: 52px;
	}

	.sypn-planner-actions .sypn-btn--options {
		display: none;
	}

	.sypn-quicklinks-grid,
	.sypn-help-grid {
		flex-direction: column;
	}

	.sypn-help h2 {
		margin-bottom: var(--sypn-space-xs);
	}

	/* The six help links become full-width rows on mobile */
	.sypn-help-card {
		flex-direction: row;
		justify-content: flex-start;
		gap: var(--sypn-space-xs);
		padding: var(--sypn-space-xs);
		text-align: left;
	}

	.sypn-help-card img {
		width: 32px;
		height: 32px;
	}

	.sypn-campaign-inner {
		flex-direction: column;
	}

	.sypn-campaign-copy {
		flex: 0 0 auto;
	}

	.sypn-campaign-copy h2 {
		font-size: 32px;
		line-height: 40px;
	}

	.sypn-campaign .sypn-notch {
		width: 100%;
	}

	.sypn-section-head h2 {
		font-size: 32px;
		line-height: 40px;
	}

	.sypn-travel {
		padding: var(--sypn-space-lg) var(--sypn-gutter);
	}

	/* Mobile stacks the cards rather than scrolling them (Figma 3046:4075) */
	.sypn-track {
		flex-direction: column;
		overflow-x: visible;
	}

	.sypn-track > * {
		flex: 0 0 auto;
	}

	.sypn-carousel-nav {
		display: none;
	}

	/* The departures row has no room for five columns side by side */
	.sypn-departure {
		flex-wrap: wrap;
		padding: var(--sypn-space-xs);
	}

	.sypn-departure-when {
		width: auto;
	}

	.sypn-departure-where {
		flex: 1 0 100%;
		order: 1;
	}

	.sypn-departure-mins {
		width: auto;
		flex: 1 0 0;
	}

	.sypn-departures-head {
		flex-wrap: wrap;
		padding: var(--sypn-space-xs);
	}

	.sypn-departures-head h2 {
		flex: 1 0 100%;
		font-size: 20px;
		line-height: 28px;
	}
}