/* The Sabbath School quarterly on the Escuela Sabática category page (includes/sabbath-school.php), and its own PDF
   viewer (sabbath-school.js). Uses the Advenz theme's colours and radius. */
.ss-panel { margin: 0 0 2.5rem; padding: 2rem; background: var(--wp--preset--color--sky, #eaf2fb); border-radius: 16px; }
.ss-head { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 2rem; align-items: start; }
.ss-cover { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.ss-cover img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 30px rgba(20, 52, 79, .22); transition: transform .15s ease; }
.ss-cover:hover img { transform: translateY(-2px); }
.ss-intro > * { margin-block: 0 .8rem; }
.ss-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--blue, #245d94); }
.ss-title { margin-top: 0 !important; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.ss-lead { font-size: 1.02rem; }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 0 !important; }
.ss-btn { display: inline-block; padding: .65rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; color: #fff; background: var(--wp--preset--color--blue, #245d94); border: 2px solid var(--wp--preset--color--blue, #245d94); transition: background-color .15s ease, color .15s ease; }
.ss-btn:hover, .ss-btn[aria-pressed="true"] { background: var(--wp--preset--color--blue-dark, #14344f); border-color: var(--wp--preset--color--blue-dark, #14344f); color: #fff; }
.ss-btn.is-ghost { background: transparent; color: var(--wp--preset--color--blue, #245d94); }
.ss-btn.is-ghost:hover { background: #fff; color: var(--wp--preset--color--blue, #245d94); }
.ss-btn.is-ghost[aria-pressed="true"] { background: var(--wp--preset--color--blue, #245d94); color: #fff; }
.ss-noscript { font-size: .9rem; color: var(--wp--preset--color--muted, #5b6b7a); }

/* The viewer */
.ss-viewer { margin-top: 1.5rem; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--line, #d9e3ee); border-radius: 12px; overflow: hidden; scroll-margin-top: 1rem; }
.ss-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; background: var(--wp--preset--color--blue-dark, #14344f); color: #fff; }
.ss-bar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .95rem; }
.ss-bar-nav { display: flex; align-items: center; gap: .25rem; flex: none; }
.ss-bar-where { min-width: 4.5rem; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ss-bar-btn { width: 2rem; height: 2rem; padding: 0; font: inherit; font-size: 1.1rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12); border: 0; border-radius: 6px; cursor: pointer; }
.ss-bar-btn:hover { background: rgba(255, 255, 255, .25); }
.ss-bar-close { margin-left: .4rem; }
.ss-status { margin: 0; padding: 1.2rem; text-align: center; color: var(--wp--preset--color--muted, #5b6b7a); }
.ss-scroller { height: min(82vh, 1100px); overflow: auto; padding: 12px; background: #e3e8ee; }
.ss-scroller:focus-visible { outline: 2px solid var(--wp--preset--color--blue, #245d94); outline-offset: -2px; }
.ss-page { margin: 0 auto 12px; background: #fff; box-shadow: 0 2px 8px rgba(20, 52, 79, .18); }
.ss-page canvas { display: block; }

/* The lessons */
.ss-subhead { margin: 2rem 0 .75rem; font-size: 1.15rem; }
.ss-lessons { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; }
.ss-lesson { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .7rem; padding: .55rem .8rem; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--line, #d9e3ee); border-radius: var(--wp--custom--radius, 10px); }
.ss-lesson.is-now { border-color: var(--wp--preset--color--blue, #245d94); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--blue, #245d94) 22%, transparent); }
.ss-n { display: grid; place-items: center; width: 2rem; height: 2rem; font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--blue-dark, #14344f); background: var(--wp--preset--color--sky, #eaf2fb); border-radius: 50%; font-variant-numeric: tabular-nums; }
.ss-lesson.is-now .ss-n { color: #fff; background: var(--wp--preset--color--blue, #245d94); }
.ss-what { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ss-name { font-weight: 600; }
.ss-what small { font-size: .8rem; color: var(--wp--preset--color--muted, #5b6b7a); }
.ss-lesson.is-now .ss-what small { color: var(--wp--preset--color--blue, #245d94); font-weight: 600; }
.ss-read { font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .8rem; cursor: pointer; color: var(--wp--preset--color--blue, #245d94); background: transparent; border: 1.5px solid currentColor; border-radius: 999px; }
.ss-read:hover, .ss-read[aria-pressed="true"] { color: #fff; background: var(--wp--preset--color--blue, #245d94); border-color: var(--wp--preset--color--blue, #245d94); }

@media (max-width: 760px) {
  .ss-panel { padding: 1.2rem; }
  .ss-head { grid-template-columns: 1fr; gap: 1.2rem; }
  .ss-cover { max-width: 150px; }
  .ss-lessons { grid-template-columns: 1fr; }
  .ss-bar-title { display: none; }
  .ss-bar { justify-content: center; }
  .ss-scroller { height: 75vh; padding: 8px; }
}