/*
 * "theme": "departures" (the travel guides, 2026-09-27: Tangier to Chefchaouen first). Loaded only on
 * its pages (inc/catalog.php).
 *
 * A station departures board: board ink #15191d / #1c2127, rule #2b3139, flap amber #ffbf3c, dim
 * #8b939c. On light grounds, signal blue #1f5aa6 (dark #173f73) for kickers, accents and links,
 * platform grey #f2f4f6 bands, ink #15191e. assets/js/catalog-departures.js flips the letters, runs
 * the Tangier clock and lights the rows a pick points to.
 */

.tgc--departures { color: #15191e; }
.tgc--departures .tgc-band--white { background: #fff; }
.tgc--departures .tgc-band--cream { background: #f2f4f6; }
.tgc--departures .tgc-kicker { color: #1f5aa6; }
.tgc--departures .tgc-title em { color: #1f5aa6; }
.tgc--departures .tgc-answer__text a,
.tgc--departures .tgc-lead a,
.tgc--departures .tgc-table a,
.tgc--departures .tgc-faq__a a { color: #1f5aa6; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tgc--departures .tgc-answer__text a:hover,
.tgc--departures .tgc-table a:hover { color: #173f73; }
.tgc--departures .tgc-fact { border-color: #e1e6eb; background: #f5f7f9; }
.tgc--departures .tgc-fact__icon { color: #1f5aa6; }
.tgc--departures .tgc-band--cream .tgc-fact { background: #fff; }
.tgc--departures .tgc-tablewrap { border-color: #e1e6eb; }
.tgc--departures .tgc-table thead th { border-color: #e1e6eb; background: #eef2f6; color: #1f5aa6; }
.tgc--departures .tgc-table tbody tr:hover { background: #f7f9fb; }
.tgc--departures .tgc-step__no { border-color: #1f5aa6; color: #1f5aa6; }
.tgc--departures .tgc-band--cream .tgc-step__no { box-shadow: 0 0 0 10px #f2f4f6; }
.tgc--departures .tgc-prose__icon { color: #1f5aa6; }
.tgc--departures .tgc-glance__icon { background: #eef2f6; color: #1f5aa6; }
.tgc--departures .tgc-link__arrow { border-color: #c9d5e3; color: #1f5aa6; }
.tgc--departures .tgc-link:hover .tgc-link__arrow { border-color: #1f5aa6; background: #1f5aa6; color: #fff; }
.tgc--departures .tgc-band--navy { background: #15191d; }
.tgc--departures .tgc-band--navy .tgc-kicker,
.tgc--departures .tgc-band--navy .tgc-title em { color: #ffbf3c; }
.tgc--departures .tgc-reason__icon { border-color: rgba(255, 191, 60, .45); color: #ffbf3c; }

/* ---------------------------------------------------------------- The departures hero */

.tgc-hero--board { padding: 36px 24px 72px; text-align: left; background-position: center 58%; }
.tgc-hero--board::before {
	background: linear-gradient(100deg, rgba(12, 15, 19, .95) 0%, rgba(12, 15, 19, .84) 46%, rgba(12, 15, 19, .62) 100%);
}
.tgc-hero--board .tgc-hero__inner { max-width: 1200px; }
.tgc-hero--board .tgc-hero__grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 48px; }
.tgc-hero--board .tgt-crumbs, .tgc-hero--board .tgt-crumbs ol { justify-content: flex-start; }
.tgc-hero--board .tgt-crumbs a:hover { color: #ffbf3c; }
.tgc-hero--board .tgc-kicker--light { color: #ffbf3c; }
.tgc-hero--board .tgc-kicker--light::after { display: none; }
.tgc-hero--board .tgc-hero__title { font-size: clamp(40px, 2.8vw + 20px, 64px); }
.tgc-hero--board .tgc-hero__title em { color: #ffbf3c; }
.tgc-hero--board .tgc-hero__lead { max-width: 540px; margin: 20px 0 0; font-size: 17.5px; }
.tgc-hero--board .tgc-hero__act { justify-content: flex-start; margin-top: 26px; }
.tgc-hero--board .tgc-btn--gold { background: #ffbf3c; color: #15191d; }
.tgc-hero--board .tgc-btn--gold:hover { background: #ffd173; color: #15191d; }
.tgc-hero--board .tgc-hero__trust { justify-content: flex-start; margin-top: 20px; }
.tgc-hero--board .tgc-hero__trust .tgc-ico { color: #ffbf3c; }

.tgc-board {
	position: relative; padding: 16px 16px 14px; border: 1px solid #2b3139; border-radius: 18px;
	background: #15191d; color: #e9edf1;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.tgc-board__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 4px 6px 12px; border-bottom: 1px solid #2b3139; }
.tgc-board__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: #ffbf3c; }
.tgc-board__title .tgc-ico { width: 16px; height: 16px; }
.tgc-board__route { margin: 0; font-size: 14.5px; color: #c5ccd3; }
.tgc-board__clock { margin: 0 0 0 auto; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #8b939c; }
.tgc-board__clock[hidden] { display: none; }
.tgc-board__clock strong { margin-left: 6px; font: 700 15px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .06em; color: #ffbf3c; }

.tgc-board__table { width: 100%; margin-top: 6px; border-collapse: separate; border-spacing: 0 6px; }
.tgc-board__table thead th { padding: 8px 10px 0; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #79828c; }
.tgc-board__row th, .tgc-board__row td {
	padding: 12px 10px; border-top: 1px solid #262c33; border-bottom: 1px solid #0f1216; background: #1c2127;
	text-align: left; vertical-align: middle; font-size: 14px; font-weight: 400; color: #dfe4e9;
	transition: background .25s ease, opacity .25s ease;
}
.tgc-board__row th { border-left: 3px solid transparent; border-radius: 10px 0 0 10px; }
.tgc-board__row td:last-child { border-radius: 0 10px 10px 0; font-size: 13px; color: #9aa3ad; }
.tgc-board__mode { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; }
.tgc-board__mode .tgc-ico { flex: none; width: 21px; height: 21px; color: #ffbf3c; }
.tgc-flap {
	position: relative; display: inline-block; padding: 5px 8px; border-radius: 6px;
	background: linear-gradient(180deg, #2a3038 0 50%, #22272e 50% 100%);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04);
	font: 700 14px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .02em; color: #ffbf3c; overflow-wrap: anywhere;
}
.tgc-flap::after { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(0, 0, 0, .55); }
.tgc-board__row.is-picked th, .tgc-board__row.is-picked td { background: #2b2616; border-top-color: #5c4a17; }
.tgc-board__row.is-picked th { border-left-color: #ffbf3c; }
.tgc-board.is-picking .tgc-board__row:not(.is-picked) th,
.tgc-board.is-picking .tgc-board__row:not(.is-picked) td { opacity: .45; }

.tgc-board__picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 6px 0; border-top: 1px solid #2b3139; }
.tgc-board__picks-label { margin-right: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8b939c; }
.tgc-board__pick {
	padding: 8px 14px; border: 1px solid #3a424c; border-radius: 999px; background: transparent; color: #e9edf1;
	font: 700 13px/1 'Trebuchet MS', 'Lucida Grande', sans-serif; cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.tgc-board__pick:hover { border-color: #ffbf3c; color: #ffbf3c; }
.tgc-board__pick:focus-visible { outline: 2px solid #ffbf3c; outline-offset: 2px; }
.tgc-board__pick[aria-pressed="true"] { border-color: #ffbf3c; background: #ffbf3c; color: #15191d; }
.tgc-board__verdict { min-height: 3.1em; margin: 12px 6px 2px; font-size: 14.5px; line-height: 1.6; color: #c5ccd3; }
.tgc-board__verdict a { font-weight: 700; color: #ffbf3c; text-decoration: underline; text-underline-offset: 3px; }
.tgc-board__verdict a:hover { color: #ffd173; }

@media (max-width: 1100px) {
	/* The board is wide: under 1100px it sits under the text, full width. */
	.tgc-hero--board .tgc-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.tgc-hero--board .tgc-hero__lead { max-width: 640px; }
}
@media (max-width: 640px) {
	.tgc-hero--board { padding: 28px 16px 56px; }
	.tgc-board { padding: 12px 10px 12px; }
	.tgc-board__clock { margin-left: 0; }
	.tgc-board__table thead { display: none; }
	.tgc-board__table, .tgc-board__table tbody { display: block; }
	.tgc-board__row { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; border-radius: 12px; overflow: hidden; }
	.tgc-board__row th, .tgc-board__row td { display: block; border-radius: 0; }
	.tgc-board__row th { grid-column: 1 / -1; border-radius: 0; border-bottom: 0; }
	.tgc-board__row td:last-child { grid-column: 1 / -1; border-radius: 0; }
	.tgc-board__row td { border-top: 0; }
	.tgc-board__row td::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #79828c; }
	/* Four rows at most on a phone (the cruise port's arrivals list the next six ships). */
	.tgc-board__row:nth-child(n+5) { display: none; }
	.tgc-flap { font-size: 13px; }
}
/* ---------------------------------------------------------------- The ship calls, month by month */

.tgc-calls { max-width: 1080px; margin: 0 auto; }
.tgc-calls__ask { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-align: center; text-transform: uppercase; color: #1f5aa6; }
.tgc-calls__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; }
.tgc-calls:not(.tgc-tabs--js) .tgc-calls__list,
.tgc-calls:not(.tgc-tabs--js) .tgc-calls__ask { display: none; }
.tgc-calls__tab {
	padding: 9px 14px; border: 1.5px solid #d5dde6; border-radius: 999px; background: #fff; color: #15191e;
	font: 700 14px/1 'Trebuchet MS', 'Lucida Grande', sans-serif; cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tgc-calls__tab span { margin-left: 3px; font-weight: 400; color: #6b7682; }
.tgc-calls__tab:hover { border-color: #1f5aa6; }
.tgc-calls__tab:focus-visible { outline: 2px solid #1f5aa6; outline-offset: 2px; }
.tgc-calls__tab[aria-selected="true"] { border-color: #15191d; background: #15191d; color: #ffbf3c; }
.tgc-calls__tab[aria-selected="true"] span { color: #c5ccd3; }
.tgc-calls__panel {
	padding: 22px 22px 18px; border: 1px solid #2b3139; border-radius: 18px; background: #15191d; color: #e9edf1;
	box-shadow: 0 24px 50px rgba(21, 25, 29, .18);
}
.tgc-calls__panel[hidden] { display: none; }
.tgc-calls__month {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px;
	margin: 0 0 6px; padding: 0 4px 14px; border-bottom: 1px solid #2b3139;
	font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 400; color: #fff;
}
.tgc-calls__month span { font: 700 12px/1 'Trebuchet MS', 'Lucida Grande', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #ffbf3c; }
.tgc-calls__table { width: 100%; border-collapse: collapse; }
.tgc-calls__table thead th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #79828c; }
.tgc-calls__table tbody th,
.tgc-calls__table tbody td { padding: 11px 12px; border-top: 1px solid #262c33; text-align: left; vertical-align: middle; font-size: 15px; font-weight: 400; color: #dfe4e9; }
.tgc-calls__table tbody th { font-weight: 700; color: #fff; }
.tgc-calls__table tbody tr:hover th,
.tgc-calls__table tbody tr:hover td { background: #1c2127; }
.tgc-calls__table tbody td:first-child,
.tgc-calls__table tbody td:last-child { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; color: #ffbf3c; white-space: nowrap; }
.tgc-calls__table tbody td:last-child small { margin-left: 6px; font-size: 12px; color: #8b939c; }
.tgc-calls__table tbody td:nth-child(3) { font-size: 14px; color: #9aa3ad; }
.tgc-calls__link { display: inline-flex; align-items: center; gap: 8px; margin: 16px 4px 2px; font-weight: 700; color: #ffbf3c; text-decoration: none; }
.tgc-calls__link .tgc-ico { width: 18px; height: 18px; }
.tgc-calls__link:hover { color: #ffd173; text-decoration: none; }

@media (max-width: 640px) {
	.tgc-calls__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
	.tgc-calls__tab { flex: none; }
	.tgc-calls__panel { padding: 16px 14px 14px; }
	.tgc-calls__month { font-size: 21px; }
	.tgc-calls__table thead { display: none; }
	.tgc-calls__table, .tgc-calls__table tbody { display: block; }
	.tgc-calls__table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ship ship" "date port" "line line"; gap: 4px 14px; padding: 12px 4px; border-top: 1px solid #262c33; }
	.tgc-calls__table tbody tr:first-child { border-top: 0; }
	.tgc-calls__table tbody th, .tgc-calls__table tbody td { padding: 0; border: 0; }
	.tgc-calls__table tbody tr:hover th, .tgc-calls__table tbody tr:hover td { background: none; }
	.tgc-calls__table tbody tr > :nth-child(1) { grid-area: date; }
	.tgc-calls__table tbody tr > :nth-child(2) { grid-area: ship; font-size: 16px; }
	.tgc-calls__table tbody tr > :nth-child(3) { grid-area: line; font-size: 13px; }
	.tgc-calls__table tbody tr > :nth-child(4) { grid-area: port; }
}

@media (prefers-reduced-motion: reduce) {
	.tgc-board__row th, .tgc-board__row td, .tgc-board__pick, .tgc-calls__tab { transition: none; }
}