/* Layout for the content pages (destinations, activities, wildlife,
   accommodation, local community, boat, how to book).

   Why this file exists: assets/index-qqD1G3lT.css is a purged Tailwind build,
   so it only contains the utility classes the original snapshot happened to
   use. grid-cols-3, md:grid-cols-2, py-16 and friends are simply not in it.
   Rather than gamble on which utilities survived the purge, every layout rule
   the new pages need lives here under a tc- prefix, written against the site's
   own palette and type. Nothing here overrides an existing rule. */

:root {
  --tc-blue: #0f1f63;
  --tc-green: #00ccb3;
  --tc-ink: #1f2937;
  --tc-muted: #5b6472;
  --tc-line: #e5e7eb;
  --tc-tint: #f6f8fb;
}

/* The site header is position:fixed, so every page body clears it the same way
   the snapshot pages do with pt-32. */
.tc-page {
  padding-top: 6.5rem;
  color: var(--tc-ink);
  font-family: avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.tc-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.tc-wrap--narrow {
  max-width: 48rem;
}

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

/* Photo, scrim and text are stacked in a single grid cell rather than
   absolutely positioned. That way the hero is as tall as the *taller* of the
   photo and the text: on a phone a long title and lede would otherwise
   overflow a fixed-height banner and get clipped by overflow:hidden. */
.tc-hero {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--tc-blue);
  color: #fff;
  margin-bottom: 2.5rem;
}

.tc-hero > * {
  grid-column: 1;
  grid-row: 1;
}

.tc-hero__media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(220px, 38vw, 420px);
  object-fit: cover;
}

.tc-hero__scrim {
  background: linear-gradient(
    to top,
    rgba(15, 31, 99, 0.94) 0%,
    rgba(15, 31, 99, 0.72) 45%,
    rgba(15, 31, 99, 0.34) 100%
  );
}

/* Pages with no matching photo in the library get the same shape, painted
   rather than photographed, so nothing ever renders as a broken image. */
.tc-hero--plain {
  background: linear-gradient(135deg, #0f1f63 0%, #16307f 55%, #0b1746 100%);
}

.tc-hero--plain .tc-hero__body {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.tc-hero__body {
  position: relative;
  align-self: end;
  padding: 1.75rem;
}

.tc-hero__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-green);
  margin-bottom: 0.5rem;
}

.tc-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.tc-hero__lede {
  margin: 0.75rem 0 0;
  max-width: 46rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* --- Section nav bar ----------------------------------------------------- */

.tc-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tc-bar a {
  flex: 0 0 auto;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--tc-blue);
  text-decoration: none;
  background: #fff;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.tc-bar a:hover {
  border-color: var(--tc-green);
  color: var(--tc-blue);
  background: #f0fdfb;
}

.tc-bar a[aria-current="page"] {
  background: var(--tc-blue);
  border-color: var(--tc-blue);
  color: #fff;
}

/* --- Breadcrumb ---------------------------------------------------------- */

.tc-crumbs {
  font-size: 0.8125rem;
  color: var(--tc-muted);
  margin-bottom: 1.25rem;
}

.tc-crumbs a {
  color: var(--tc-blue);
  text-decoration: none;
}

.tc-crumbs a:hover {
  text-decoration: underline;
}

.tc-crumbs span[aria-current] {
  color: var(--tc-muted);
}

/* --- Sections ------------------------------------------------------------ */

.tc-section {
  margin-bottom: 3rem;
}

.tc-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tc-blue);
  margin: 0 0 0.75rem;
}

.tc-section__lede {
  margin: 0 0 1.5rem;
  max-width: 46rem;
  line-height: 1.7;
  color: var(--tc-muted);
}

.tc-body p {
  line-height: 1.75;
  margin: 0 0 1rem;
}

/* --- Card grids ---------------------------------------------------------- */

.tc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .tc-grid--2,
  .tc-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .tc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tc-line);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

a.tc-card:hover {
  border-color: var(--tc-green);
  box-shadow: 0 10px 24px rgba(15, 31, 99, 0.1);
  transform: translateY(-2px);
}

.tc-card__media {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: var(--tc-tint);
}

.tc-card__body {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.tc-card__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-green);
}

.tc-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tc-blue);
  margin: 0;
}

.tc-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tc-muted);
}

.tc-card__more {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tc-blue);
}

a.tc-card:hover .tc-card__more {
  color: var(--tc-green);
}

/* --- Meta chips ---------------------------------------------------------- */

.tc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.tc-chips li {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--tc-tint);
  border: 1px solid var(--tc-line);
  color: var(--tc-muted);
}

.tc-chips strong {
  color: var(--tc-blue);
  font-weight: 600;
}

/* --- Key facts ----------------------------------------------------------- */

.tc-facts {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--tc-line);
  border: 1px solid var(--tc-line);
  border-radius: 0.75rem;
  overflow: hidden;
  margin: 0;
}

@media (min-width: 640px) {
  .tc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tc-facts > div {
  background: #fff;
  padding: 1rem 1.15rem;
}

.tc-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tc-green);
  margin-bottom: 0.3rem;
}

.tc-facts dd {
  margin: 0;
  line-height: 1.6;
  color: var(--tc-ink);
}

/* --- Lists --------------------------------------------------------------- */

.tc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.tc-list li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.7;
}

.tc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--tc-green);
}

/* --- Callout / notes ----------------------------------------------------- */

.tc-note {
  border-left: 3px solid var(--tc-green);
  background: var(--tc-tint);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.15rem 1.25rem;
}

.tc-note h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-blue);
}

.tc-quote {
  border-radius: 0.75rem;
  background: var(--tc-blue);
  color: #fff;
  padding: 1.5rem 1.75rem;
  line-height: 1.7;
  font-size: 1.0625rem;
}

.tc-quote strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-green);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* --- Alternating feature blocks ------------------------------------------ */

.tc-alt {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--tc-line);
}

.tc-alt:first-child {
  border-top: 0;
}

@media (min-width: 800px) {
  .tc-alt {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .tc-alt--flip > *:first-child {
    order: 2;
  }
}

.tc-alt h3 {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tc-blue);
}

.tc-alt p {
  margin: 0;
  line-height: 1.75;
  color: var(--tc-muted);
}

.tc-alt__detail {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--tc-tint);
  border: 1px solid var(--tc-line);
  color: var(--tc-blue);
}

.tc-alt img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* --- FAQ ----------------------------------------------------------------- */

.tc-faq {
  border: 1px solid var(--tc-line);
  border-radius: 0.75rem;
  overflow: hidden;
}

.tc-faq > div {
  padding: 1.15rem 1.25rem;
  border-top: 1px solid var(--tc-line);
}

.tc-faq > div:first-child {
  border-top: 0;
}

.tc-faq h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tc-blue);
}

.tc-faq p {
  margin: 0;
  line-height: 1.7;
  color: var(--tc-muted);
}

/* --- Booking CTA --------------------------------------------------------- */

.tc-cta {
  margin: 3rem 0 4rem;
  border-radius: 0.75rem;
  background: var(--tc-blue);
  color: #fff;
  padding: 2rem 1.75rem;
  text-align: center;
}

.tc-cta h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.tc-cta p {
  margin: 0 auto 1.5rem;
  max-width: 38rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.tc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.tc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: opacity 0.15s;
}

.tc-btn:hover {
  opacity: 0.9;
}

.tc-btn--primary {
  background: var(--tc-green);
  color: #04283a;
}

.tc-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.tc-btn--wa {
  background: #25d366;
  color: #fff;
}

/* --- Article (blog posts) ------------------------------------------------ */

.tc-article h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--tc-blue);
  margin: 2rem 0 0.75rem;
}

.tc-article p {
  line-height: 1.8;
  margin: 0 0 1.1rem;
}

/* --- Explore hub --------------------------------------------------------- */

.tc-hub {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-bottom: 3rem;
}

@media (min-width: 700px) {
  .tc-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1050px) {
  .tc-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A feature block with no photo beside it should use the full width rather
   than leave an empty column. */
@media (min-width: 800px) {
  .tc-alt--solo {
    grid-template-columns: 1fr;
  }
}

/* --- Related links (scripts/lib/related.mjs) ------------------------------
   Cruises, places, wildlife and stays tied to the page, one card per group,
   each with an icon for the kind of page it leads to. Also used on the cruise
   and blog snapshot pages, which load this file for it. Same type as the
   homepage: Poppins at regular weight, navy at 600 only for headings. */

.tc-related {
  margin-top: 2.5rem;
  color: #334155;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

.tc-related .tc-section__title {
  margin: 0 0 1.25rem;
  color: var(--tc-blue);
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.tc-related__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.tc-related__group {
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 31, 99, 0.05);
}

.tc-related__group h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  color: var(--tc-blue);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.tc-related__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #e6f7f5;
  color: #0b6b5f;
}

.tc-related__icon svg {
  width: 1rem;
  height: 1rem;
}

.tc-related__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-related__group li {
  margin: 0;
  padding: 0.4rem 0;
  border-top: 1px solid #f1f5f9;
}

.tc-related__group li:first-child {
  border-top: 0;
  padding-top: 0;
}

.tc-related__group a {
  color: #334155;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tc-related__group a:hover {
  color: var(--tc-blue);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.tc-related__group a:focus-visible {
  outline: 2px solid var(--tc-blue);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.tc-related__note {
  margin: 0.1rem 0 0;
  color: var(--tc-muted);
  font-size: 0.8125rem;
}

/* On the snapshot pages the block sits outside .tc-wrap: same width and
   gutters as the trip pages around it. */
.tc-related--page {
  max-width: 72rem;
  margin: 3.5rem auto 4rem;
  padding: 0 1.25rem;
}

@media (min-width: 768px) {
  .tc-related--page {
    padding: 0 2rem;
  }
}


/* --- Written blocks on snapshot pages (scripts/build-snapshot-extras.mjs) --
   The charter and gallery pages are snapshots without .tc-page/.tc-wrap. */

.tc-page-extra {
  max-width: 72rem;
  margin: 3rem auto 3.5rem;
  padding: 0 1.5rem;
  color: var(--tc-ink);
  font-family: avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.tc-page-extra__sub {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tc-blue);
}

.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tc-table th,
.tc-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--tc-line);
  text-align: left;
}

.tc-table th {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tc-muted);
}

.tc-table td:nth-child(n + 2),
.tc-table th:nth-child(n + 2) {
  text-align: right;
  white-space: nowrap;
}

.tc-table__note {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--tc-muted);
}