/* Components for the Free Study Materials page. Reads tokens from
   sitm-pagekit.css and the footer wash from .sitm-band-fade in sitm-pages.css. */

.sitm-scope .fm-intro { padding: clamp(34px, 4.5vw, 60px) 0 clamp(20px, 2.4vw, 30px); }
.sitm-scope .fm-intro h1 { margin: 0 0 12px; }
.sitm-scope .fm-intro__lead {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--sitm-body-ink);
}

/* Featured card, holding the single free product. */
.sitm-scope .fm-featured {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: center;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--sitm-radius-card);
  background: var(--sitm-mint);
  box-shadow: var(--sitm-shadow-card);
  border: 2px solid var(--sitm-teal);
  margin-bottom: clamp(30px, 3.6vw, 46px);
}
.sitm-scope .fm-featured__cover {
  aspect-ratio: 4 / 5;
  border-radius: var(--sitm-radius-sm);
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), transparent 36%),
    radial-gradient(circle at 78% 70%, rgba(243,183,64,.32), transparent 42%),
    var(--sitm-gradient);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sitm-scope .fm-featured__body { display: grid; gap: 12px; justify-items: start; }
.sitm-scope .fm-featured__title {
  font-family: var(--sitm-font-body);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.14;
  color: var(--sitm-ink);
  margin: 0;
}
.sitm-scope .fm-featured__blurb { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sitm-body-ink); }
.sitm-scope .fm-featured__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sitm-scope .fm-featured__note { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--sitm-teal-deep); }

/* Category tablist. Scrolls sideways rather than wrapping. */
.sitm-scope .fm-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 8px;
  margin-bottom: 22px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.sitm-scope .fm-tabs::-webkit-scrollbar { height: 4px; }
.sitm-scope .fm-tabs::-webkit-scrollbar-thumb { background: #cfe3de; border-radius: 999px; }
/* Centered explicitly: a button centers its own text, a span does not, so the
   "soon" pills sat against the top of the pill. */
.sitm-scope .fm-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--sitm-font-body);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--sitm-border);
  background: #fff;
  color: var(--sitm-body-ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sitm-scope .fm-tab:hover { border-color: var(--sitm-teal); color: var(--sitm-teal-deep); }
.sitm-scope .fm-tab[aria-selected="true"] {
  background: var(--sitm-ink);
  border-color: var(--sitm-ink);
  color: #fff;
}
.sitm-scope .fm-tab--soon {
  border-style: dashed;
  border-color: #cfe3de;
  background: rgba(255,255,255,.62);
  color: #7a8499;
  cursor: default;
}

/* Item grid and its cards. */
.sitm-scope .fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 18px;
}
.sitm-scope .fm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--sitm-radius-sm);
  border: 1px solid var(--sitm-border);
  background: #fff;
  box-shadow: 0 8px 24px rgba(16,49,72,.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sitm-scope .fm-card__cover {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: var(--sitm-teal-light);
  display: grid;
  place-items: center;
  color: var(--sitm-teal-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sitm-scope .fm-card__title {
  margin: 0;
  font-family: var(--sitm-font-body);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: var(--sitm-ink);
}
.sitm-scope .fm-card__blurb { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sitm-body-ink); }
.sitm-scope .fm-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sitm-scope .fm-card__meta {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sitm-teal-deep);
}
.sitm-scope .fm-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--sitm-gold);
  color: var(--sitm-ink);
}
.sitm-scope .fm-flag--claimed { background: var(--sitm-ink); color: #fff; }

/* Locked card. Stays visible and takes the click through to the email band. */
.sitm-scope .fm-card--locked {
  background: rgba(255,255,255,.66);
  border-style: dashed;
  border-color: #cfe3de;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.sitm-scope .fm-card--locked:hover,
.sitm-scope .fm-card--locked:focus-visible {
  border-color: var(--sitm-teal);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16,49,72,.13);
}
.sitm-scope .fm-card--locked .fm-card__cover { background: #eef3f2; color: #7a8499; }
.sitm-scope .fm-card--locked .fm-card__title { color: var(--sitm-body-ink); }
.sitm-scope .fm-card--locked .fm-card__blurb { opacity: .78; }
.sitm-scope .fm-lock {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sitm-border);
  display: grid;
  place-items: center;
  color: var(--sitm-navy);
}
.sitm-scope .fm-card__lockline {
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--sitm-teal-deep);
}
/* The second line under a topic that has been spent: the way out, one weight
   quieter than the line saying when the next one comes. */
.sitm-scope .fm-card__lockline--sub {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6b7590;
}

/* Unlocked but with no file behind it yet. Reads as unfinished rather than as broken. */
.sitm-scope .fm-card--soon {
  background: rgba(255,255,255,.66);
  border-style: dashed;
  border-color: #cfe3de;
}
.sitm-scope .fm-card--soon .fm-card__cover { background: #eef3f2; color: #7a8499; }
.sitm-scope .fm-card--soon .fm-card__blurb { opacity: .78; }
.sitm-scope .fm-flag--soon { background: #eef3f2; color: #7a8499; }
.sitm-scope .fm-card__soonline {
  font-size: 13px;
  font-weight: 800;
  color: #7a8499;
}

.sitm-scope .fm-more { text-align: center; margin-top: 24px; }

/* Loading placeholders shown while the catalog resolves. */
.sitm-scope .fm-skeleton { animation: fmSkel 1.4s ease infinite; }
.sitm-scope .fm-skeleton .fm-card__cover { background: #edf2f1; }
.sitm-scope .fm-skeleton .fm-bar { height: 12px; border-radius: 4px; background: #edf2f1; }
.sitm-scope .fm-skeleton .fm-bar--short { width: 68%; }
@keyframes fmSkel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sitm-scope .fm-skeleton { animation: none; }
  .sitm-scope .fm-card { transition: none; }
}

/* Search and subject filters. Sit under the category tabs and narrow the same grid. */
.sitm-scope .fm-filters { margin: 0 0 20px; }
.sitm-scope .fm-filters__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: 12px;
  align-items: center;
}
.sitm-scope .fm-search { position: relative; }
.sitm-scope .fm-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sitm-teal-deep);
  pointer-events: none;
}
.sitm-scope .fm-search__input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px 0 44px;
  font-family: var(--sitm-font-body);
  font-size: 16px;
  color: var(--sitm-ink);
  background: #fff;
  border: 1px solid #cfe3de;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
}
.sitm-scope .fm-search__input:focus { border-color: var(--sitm-teal); box-shadow: 0 0 0 3px rgba(97,189,183,.22); }
.sitm-scope .fm-select { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sitm-scope .fm-select__label {
  flex: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sitm-teal-deep);
}
.sitm-scope .fm-select__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  font-family: var(--sitm-font-body);
  font-size: 16px;
  color: var(--sitm-ink);
  background: #fff;
  border: 1px solid #cfe3de;
  border-radius: 999px;
  outline: none;
}
.sitm-scope .fm-select__input:focus { border-color: var(--sitm-teal); box-shadow: 0 0 0 3px rgba(97,189,183,.22); }
.sitm-scope .fm-filters__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 26px;
  margin-top: 10px;
}
.sitm-scope .fm-count {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--sitm-body-ink);
}
.sitm-scope .fm-clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sitm-font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--sitm-teal-deep);
  text-decoration: underline;
  cursor: pointer;
}
.sitm-scope .fm-clear[hidden] { display: none; }
.sitm-scope .fm-empty .sitm-btn { margin-top: 16px; }

.sitm-scope .fm-empty {
  border: 1px dashed #cfe3de;
  border-radius: var(--sitm-radius-sm);
  background: rgba(255,255,255,.62);
  padding: clamp(34px, 5vw, 52px) 22px;
  text-align: center;
}
.sitm-scope .fm-empty__title {
  font-family: var(--sitm-font-body);
  font-weight: 800;
  font-size: 20px;
  color: var(--sitm-ink);
  margin: 0 0 8px;
}
.sitm-scope .fm-empty p { margin: 0; font-size: 15px; color: var(--sitm-body-ink); }

/* Email band that unlocks every gated item. */
.sitm-scope .fm-unlock {
  margin-top: clamp(34px, 4vw, 52px);
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--sitm-radius-card);
  background: var(--sitm-mint);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  transition: box-shadow .3s ease;
}
.sitm-scope .fm-unlock.is-flagged { box-shadow: 0 0 0 3px var(--sitm-teal); }
.sitm-scope .fm-unlock__cue {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--sitm-radius-sm);
  background: #fff;
  border-left: 3px solid var(--sitm-teal);
  font-weight: 800;
  color: var(--sitm-teal-deep);
}
.sitm-scope .fm-unlock__cue[hidden] { display: none; }
.sitm-scope .fm-unlock__title {
  font-family: var(--sitm-font-body);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--sitm-ink);
  margin: 0 0 8px;
}
.sitm-scope .fm-unlock p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sitm-body-ink); }
.sitm-scope .fm-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sitm-scope .fm-field { flex: 1; min-width: 210px; }
.sitm-scope .fm-input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--sitm-font-body);
  font-size: 16px;
  color: var(--sitm-ink);
  background: #fff;
  border: 1px solid #cfe3de;
  border-radius: 999px;
  outline: none;
}
.sitm-scope .fm-input:focus { border-color: var(--sitm-teal); box-shadow: 0 0 0 3px rgba(97,189,183,.22); }
.sitm-scope .fm-msg { margin: 8px 0 0; font-size: 14px; font-weight: 700; line-height: 1.45; }
.sitm-scope .fm-msg--ok { color: var(--sitm-teal-deep); }
.sitm-scope .fm-msg--bad { color: #b4304f; }
.sitm-scope .fm-msg--panel { margin: 16px 0 0; text-align: center; }

/* An explicit display beats the user agent rule for [hidden], so every
   element the script toggles restates it at higher specificity. */
.sitm-scope .fm-featured[hidden],
.sitm-scope .fm-form[hidden],
.sitm-scope .fm-in[hidden],
.sitm-scope .fm-msg[hidden] { display: none; }

.sitm-scope .fm-in { display: flex; gap: 14px; align-items: center; }
.sitm-scope .fm-in__mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 999px;
  background: var(--sitm-teal-btn);
  color: #fff;
  display: grid; place-items: center;
}

/* Idea box, rendered inside the gradient prefooter. */
.sitm-scope .fm-prefooter .sitm-prefooter__inner { justify-items: center; max-width: 760px; margin-inline: auto; }
.sitm-scope .fm-idea { width: 100%; display: grid; gap: 14px; justify-items: center; }
.sitm-scope .fm-idea__form { display: flex; gap: 12px; width: 100%; flex-wrap: wrap; align-items: flex-start; }
.sitm-scope .fm-textarea {
  flex: 1;
  min-width: 240px;
  min-height: 56px;
  padding: 14px 18px;
  font-family: var(--sitm-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sitm-ink);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  resize: vertical;
  outline: none;
}
.sitm-scope .fm-textarea:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.sitm-scope .fm-prefooter .fm-msg--ok { color: #fff; }
.sitm-scope .fm-prefooter .fm-msg--bad { color: #ffd9e2; }

@media (max-width: 900px) {
  .sitm-scope .fm-unlock { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr keeps an auto minimum, so the
     column cannot shrink below the widest option in the subject select. The
     longest subject name is wider than a 320px phone, which pushed the row past
     the viewport once subject data reached the catalog. */
  .sitm-scope .fm-filters__row { grid-template-columns: minmax(0, 1fr); }
  .sitm-scope .fm-select__label { min-width: 62px; }
}

/* Tablet through small laptop. Left to auto-fill the row lands two very wide
   cards here, which reads as a gap rather than a grid. */
@media (min-width: 701px) and (max-width: 1023px) {
  .sitm-scope .fm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Two columns down to the narrowest phone. One column turns eight items into
   a 7000px scroll, and the flag is allowed to wrap rather than clip. */
@media (max-width: 700px) {
  .sitm-scope .fm-featured { grid-template-columns: 1fr; justify-items: start; }
  .sitm-scope .fm-featured__cover { width: 168px; }
  .sitm-scope .fm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sitm-scope .fm-card { padding: 12px; gap: 8px; }
  .sitm-scope .fm-flag { padding: 4px 10px; line-height: 1.25; white-space: normal; }
  .sitm-scope .fm-card__foot { align-items: flex-start; flex-direction: column; }
}

/* Covers carrying a real first-page image. The image fills the tile and the
   flag chip keeps sitting on top of it, so the two cover shapes stay
   interchangeable. An image that fails to load drops the class and the
   placeholder rule underneath takes over. */
.sitm-scope .fm-card__cover--img,
.sitm-scope .fm-featured__cover--img {
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.sitm-scope .fm-card__cover--img > img,
.sitm-scope .fm-featured__cover--img > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.sitm-scope .fm-card__cover--img > .fm-flag { z-index: 1; }
.sitm-scope .fm-card__cover--img > .fm-lock { position: relative; z-index: 1; }