/**

 * Premium destination / ways-to-travel hub.

 */



.dest-hub {

  font-family: var(--font-body);

}



.dest-hub__hero .page-hero__content { max-width: 44rem; }

.dest-hub__hero .breadcrumbs,

.dest-hub__hero .breadcrumbs a { color: rgba(255, 255, 255, .78); }



.dest-hub__section {

  padding-block: clamp(3.25rem, 7vw, 5.25rem);

}

.dest-hub__section--cream {

  background: #fff;

}



.dest-hub__kicker {

  color:var(--swt-accent-text, var(--clay, var(--swt-palette-8a3a1c, #8a3a1c)));

  font-family: var(--font-body);

  font-size: .68rem;

  font-weight: 600;

  letter-spacing: .14em;

  margin: 0 0 .85rem;

  text-transform: uppercase;

}

.dest-hub__head h2,

.dest-hub__overview h2 {

  font-family: var(--font-display) !important;
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);

  font-weight: 500 !important;

  letter-spacing: -.02em;

  line-height: 1.12;

  margin: 0;

  max-width: 16ch;

}

.dest-hub__overview {

  max-width: 42rem;

}

.dest-hub__prose {

  color: var(--muted, var(--swt-palette-756b60, #756b60));

  font-family: var(--font-body);

  font-size: 1.05rem;

  font-weight: 400;

  line-height: 1.65;

  margin-top: 1.15rem;

}

.dest-hub__prose p { margin: 0 0 1rem; }

.dest-hub__notice {

  background: #fff;

  border-left: 3px solid var(--clay, var(--swt-palette-8a3a1c, #8a3a1c));

  border-radius: 0 .85rem .85rem 0;

  margin-top: 1.5rem;

  padding: 1rem 1.15rem;

}

.dest-hub__notice p {

  color: var(--espresso, var(--swt-palette-2c241b, #2c241b));

  font-family: var(--font-body);

  font-weight: 500;

  margin: 0;

}



.dest-hub__cards {

  align-items: stretch;

  display: grid;

  gap: 1.25rem;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  justify-content: start;

  margin-top: clamp(1.75rem, 3vw, 2.5rem);

}

.dest-hub-card {

  background: #fff;

  border: 1px solid var(--swt-palette-2c241b-a80, rgba(44, 36, 27, .08));

  border-radius: 1.15rem;

  display: flex;

  flex-direction: column;

  height: 100%;

  min-width: 0;

  overflow: hidden;

  transition: transform 180ms ease, box-shadow 180ms ease;

}

.dest-hub-card:hover {

  box-shadow: 0 18px 40px var(--swt-palette-2c241b-a100, rgba(44, 36, 27, .1));

  transform: translateY(-2px);

}

.dest-hub-card--text {

  border-top: 3px solid var(--clay, var(--swt-palette-8a3a1c, #8a3a1c));

  padding: 1.35rem 1.35rem 1.5rem;

}

.dest-hub-card__media {

  aspect-ratio: 16 / 10;

  background: var(--espresso, var(--swt-palette-2c241b, #2c241b));

  display: block;

  flex: 0 0 auto;

  overflow: hidden;

  position: relative;

  width: 100%;

}

.dest-hub-card__media img,

.dest-hub-card__media .image-fallback {

  display: block;

  height: 100%;

  inset: 0;

  max-height: none;

  object-fit: cover;

  position: absolute;

  transition: transform 360ms ease;

  width: 100%;

}

.dest-hub-card:hover .dest-hub-card__media img { transform: scale(1.04); }

.dest-hub-card__body {

  display: flex;

  flex: 1 1 auto;

  flex-direction: column;

  font-family: var(--font-body);
  padding: 1.15rem 1.25rem 1.35rem;

}

.dest-hub-card__meta {

  color:var(--swt-accent-text, var(--clay, var(--swt-palette-8a3a1c, #8a3a1c)));

  display: block;

  font-family: var(--font-body);
  font-size: .66rem;

  font-weight: 600;

  letter-spacing: .12em;

  margin-bottom: .45rem;

  text-transform: uppercase;

}

.dest-hub-card h3,

.dest-hub-card__body h3,

.dest-hub-card h3 a,

.dest-hub-card__body h3 a {

  color: inherit;

  font-family: var(--font-display) !important;
  font-size: 1.35rem;

  font-weight: 500 !important;

  letter-spacing: -.02em;

  line-height: 1.25;

  margin: 0;

  text-decoration: none;

}

.dest-hub-card h3 a:hover,

.dest-hub-card__body h3 a:hover {

  color:var(--swt-accent-text, var(--clay, var(--swt-palette-8a3a1c, #8a3a1c)));

}

.dest-hub-card p,

.dest-hub-card__body p {

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  color: var(--muted, var(--swt-palette-756b60, #756b60));

  display: -webkit-box;

  font-family: var(--font-body) !important;
  font-size: .95rem;

  font-weight: 400;

  line-height: 1.5;

  margin: .65rem 0 0;

  overflow: hidden;

}



.dest-hub__cta .callout {

  margin: 0;

}

.dest-hub__cta .callout .btn {

  border-radius: 999px;

  font-family: var(--font-body);

  font-weight: 600;

  letter-spacing: 0;

  text-transform: none;

}



@media (max-width: 1100px) {

  .dest-hub__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 700px) {

  .dest-hub__cards { grid-template-columns: minmax(0, 1fr); }

}