/*
 * SFM Class Tiles — component styles
 * Every selector is scoped to .sfm-ct / .sfm-ct-* so nothing leaks into the theme.
 * Theme classes (btn, btn-primary, btn-lightblue, row, col-*, container) are reused for
 * consistency but only re-styled inside .sfm-ct.
 */

.sfm-ct {
  --sfm-ct-navy: #30347e;
  --sfm-ct-ink: #141412;
  --sfm-ct-muted: rgba(20, 20, 18, .72);
  --sfm-ct-card: #fff;
  --sfm-ct-media-bg: #e8ecf3;
  --sfm-ct-radius: 16px;
  --sfm-ct-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07);
  --sfm-ct-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 18px 40px rgba(16, 24, 40, .13);
  scroll-margin-top: 120px;
}

.sfm-ct__header { max-width: 760px; margin-bottom: 2rem; }
.sfm-ct__title { margin: 0 0 .75rem; }

.sfm-ct__grid { margin: 0; padding: 0; list-style: none; }

/* Tile */
.sfm-ct__tile {
  display: flex; flex-direction: column; height: 100%;
  background: var(--sfm-ct-card); color: var(--sfm-ct-ink);
  border-radius: var(--sfm-ct-radius); overflow: hidden;
  box-shadow: var(--sfm-ct-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sfm-ct__tile:hover { transform: translateY(-4px); box-shadow: var(--sfm-ct-shadow-hover); }

.sfm-ct__media {
  display: block; position: relative; width: 100%; aspect-ratio: 3 / 2;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--sfm-ct-media-bg); overflow: hidden; cursor: pointer;
}
.sfm-ct .sfm-ct__media img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .6s ease;
}
.sfm-ct__tile:hover .sfm-ct__media img { transform: scale(1.04); }

.sfm-ct__body { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.25rem 1.25rem 1.5rem; }

/* Group badge: sits on the image's top-left corner (deck slides 9–10).
   Change --sfm-ct-badge-bg to restyle it site-wide. */
.sfm-ct__badge {
  align-self: flex-start; display: inline-block;
  margin: 0 0 .25rem; padding: .4rem .7rem; border-radius: 4px;
  background: var(--sfm-ct-badge-bg, #30347e); color: var(--sfm-ct-badge-fg, #fff);
  font-size: .72rem; line-height: 1; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.sfm-ct__media-wrap, .sfm-ct-popup__media { position: relative; }
.sfm-ct__badge--overlay { position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0; pointer-events: none; }
.sfm-ct__name { margin: 0; font-size: 1.375rem; line-height: 1.25; }
.sfm-ct__hook { margin: 0; font-weight: 500; font-style: italic; color: var(--sfm-ct-navy, #30347e); }
.sfm-ct__desc {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--sfm-ct-muted);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.sfm-ct__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0;
  margin: .25rem 0 0; font-size: 14px; font-weight: 600;
}
.sfm-ct__meta > span + span::before {
  content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 .65rem;
  vertical-align: -1px; background: currentColor; opacity: .35;
}

.sfm-ct__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: auto; padding-top: 1rem; }
.sfm-ct__actions > .btn { width: 100%; min-width: 0; white-space: nowrap; padding-left: .75rem; padding-right: .75rem; }
.sfm-ct__actions > .btn:only-child { grid-column: 1 / -1; }

/* Learn More: outlined, as in the wireframe (slides 9–10) */
.sfm-ct .sfm-ct__more {
  background: transparent; color: var(--sfm-ct-navy); border: 2px solid var(--sfm-ct-navy);
}
.sfm-ct .sfm-ct__more:hover { background: var(--sfm-ct-navy); color: #fff; }

/* 4 per row (from 992px): compact tile, like the slide 9 wireframe */
@media (min-width: 992px) {
  .sfm-ct__grid > .col-lg-3 .sfm-ct__body { gap: .35rem; padding: .9rem .9rem 1rem; }
  .sfm-ct__grid > .col-lg-3 .sfm-ct__name { font-size: 1.1rem; }
  .sfm-ct__grid > .col-lg-3 .sfm-ct__hook { font-size: 14px; }
  .sfm-ct__grid > .col-lg-3 .sfm-ct__meta { font-size: 13px; margin-top: .1rem; }
  .sfm-ct__grid > .col-lg-3 .sfm-ct__actions { gap: .4rem; padding-top: .75rem; }
  .sfm-ct__grid > .col-lg-3 .sfm-ct__actions > .btn { padding: .55rem .35rem; font-size: 13.5px; }
  .sfm-ct__grid > .col-lg-3 .sfm-ct__badge--overlay { top: 10px; left: 10px; }
}

.sfm-ct__media:focus-visible,
.sfm-ct .btn:focus-visible,
.sfm-ct-dialog__close:focus-visible { outline: 3px solid var(--sfm-ct-navy); outline-offset: 3px; }

/* Learn More dialog (native <dialog>, sits in the browser top layer) */
.sfm-ct-dialog {
  --sfm-ct-navy: #30347e;
  width: 100%; max-width: min(920px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: 20px;
  overflow: auto; overscroll-behavior: contain;
  background: #fff; color: #141412;
}
.sfm-ct-dialog::backdrop { background: rgba(12, 16, 44, .6); backdrop-filter: blur(2px); }
.sfm-ct-dialog[open] { animation: sfmCtIn .25s ease; }
@keyframes sfmCtIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.sfm-ct-dialog__close {
  position: sticky; top: .75rem; float: right; z-index: 2; margin: .75rem .75rem -3.25rem 0;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #141412;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer;
}

.sfm-ct-popup { display: grid; }
.sfm-ct-popup__media { background: #e8ecf3; }
.sfm-ct-dialog .sfm-ct-popup__media img { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; }
.sfm-ct-popup__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem 1.25rem; }
.sfm-ct-popup__title { margin: 0; }
.sfm-ct-popup__text { margin-top: .5rem; line-height: 1.6; }
.sfm-ct-popup__text > :last-child { margin-bottom: 0; }
.sfm-ct-popup__actions {
  position: sticky; bottom: 0; margin: 1rem -1.25rem -1.5rem; padding: 1rem 1.25rem;
  background: #fff; border-top: 1px solid rgba(0, 0, 0, .06);
}
.sfm-ct-popup__actions > .btn { width: 100%; }

@media (min-width: 768px) {
  .sfm-ct-popup { grid-template-columns: 1fr 1fr; }
  /* The text column sets the height; the image fills its half (no height loop) */
  .sfm-ct-popup__media { min-height: 340px; }
  .sfm-ct-dialog .sfm-ct-popup__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .sfm-ct-popup__body { padding: 2.5rem 2.25rem; }
  .sfm-ct-popup__actions { position: static; margin: auto 0 0; padding: 1.25rem 0 0; border: 0; }
  .sfm-ct-popup__actions > .btn { width: auto; min-width: 12rem; }
}

/* Mobile: the pop-up becomes a bottom sheet */
@media (max-width: 767.98px) {
  .sfm-ct-dialog { max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .sfm-ct__name { font-size: 1.25rem; }
}

html.sfm-ct-lock { overflow: hidden; }

/* Page intro (layout: sfm-page-intro): compact title + intro, as on slide 9 */
.sfm-pi.component { padding-top: 32px; padding-bottom: 8px; }
@media (min-width: 992px) { .sfm-pi.component { padding-top: 48px; padding-bottom: 8px; } }
.sfm-pi .sfm-pi__title {
  margin: 0 0 .6rem; color: #30347e; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; font-weight: 700; text-wrap: balance;
}
.sfm-pi__intro { max-width: 70ch; margin: 0; line-height: 1.6; }
.sfm-pi__intro > :last-child { margin-bottom: 0; }

/* FareHarbor calendar (layout: sfm-fh-calendar) */
.sfm-cal.component { padding-top: 16px; padding-bottom: 16px; }
.sfm-cal .sfm-cal__title { margin: 0 0 .75rem; color: #30347e; text-transform: none; font-size: 1.5rem; }
.sfm-cal__embed { width: 100%; }
.sfm-cal__embed iframe { display: block; width: 100% !important; max-width: 100%; border: 0; }
.sfm-cal--calendar-small .sfm-cal__embed { max-width: 420px; }

/* Password form (layout: sfm-password-form, automatic) */
.sfm-pw.component { padding-top: 48px; padding-bottom: 64px; }
.sfm-pw .sfm-pw__title { margin: 0 0 1rem; color: #30347e; text-transform: none; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; }
.sfm-pw__form { max-width: 520px; }
.sfm-pw__form p { margin: 0 0 .75rem; }
.sfm-pw__form label { display: block; font-weight: 600; }
.sfm-pw__form input[type="password"] { display: block; width: 100%; max-width: 360px; margin-top: .35rem; padding: .7rem .9rem; border: 2px solid #30347e; border-radius: 8px; font: inherit; }
.sfm-pw__form input[type="submit"] { margin-top: .5rem; padding: .7rem 1.5rem; border: 0; border-radius: 999px; background: #30347e; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* Jump links (layout: sfm-jump-links) */
.sfm-jl { --sfm-jl-navy: #30347e; }
.sfm-jl.component { padding-top: 8px; padding-bottom: 8px; } /* beats the theme's .component spacing for this bar only */
.sfm-jl__list {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: 0; padding: 0; list-style: none;
}
.sfm-jl__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.25rem;
  border: 2px solid var(--sfm-jl-navy); border-radius: 999px;
  color: var(--sfm-jl-navy); background: transparent;
  font-size: 15px; font-weight: 600; line-height: 1.1; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.sfm-jl__link:hover, .sfm-jl__link:focus-visible { background: var(--sfm-jl-navy); color: #fff; text-decoration: none; }
.sfm-jl__link:focus-visible { outline: 3px solid var(--sfm-jl-navy); outline-offset: 3px; }
/* Pinned copy of the jump links (built by sfm-ct.js). The in-page bar never changes size, so nothing jumps. */
html { scroll-padding-top: calc(var(--sfm-head-h, 0px) + 72px); }
.sfm-jl__link.is-active { background: var(--sfm-jl-navy); color: #fff; }
.sfm-jl__sentinel { display: block; height: 0; }
.sfm-jl--pinned {
  position: fixed; left: 0; right: 0; top: var(--sfm-head-h, 0px); z-index: 1010;
  padding: 8px 0; background: #fff; box-shadow: 0 6px 12px -10px rgba(0,0,0,.35);
  transform: translateY(-110%); visibility: hidden; opacity: 0;
  transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
.sfm-jl--pinned.is-visible { transform: none; visibility: visible; opacity: 1; transition: transform .2s ease, opacity .2s ease; }
.sfm-jl--pinned .sfm-jl__list {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.sfm-jl--pinned .sfm-jl__list::-webkit-scrollbar { display: none; }
.sfm-jl--pinned .sfm-jl__list > li { flex: 0 0 auto; }
.sfm-jl--pinned .sfm-jl__link { min-height: 38px; padding: .4rem 1rem; font-size: 14px; }
.sfm-jl--pinned.is-scrollable .sfm-jl__list {
  padding-right: 2.5rem;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
          mask-image: linear-gradient(90deg, #000 82%, transparent);
}
@media (max-width: 767.98px) {
  /* In the page: all links wrap so every section is visible */
  .sfm-jl__link { min-height: 40px; padding: .45rem 1rem; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sfm-jl--pinned, .sfm-jl--pinned.is-visible { transition: none; } }
@media (prefers-reduced-motion: reduce) { .sfm-jl__link { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .sfm-ct__tile, .sfm-ct__media img, .sfm-ct-dialog[open] { transition: none; animation: none; }
  .sfm-ct__tile:hover, .sfm-ct__tile:hover .sfm-ct__media img { transform: none; }
}