/* ==========================================================
   ModFarm Book Cards — unified (mfb-*) design language only
   ========================================================== */

/* Design tokens (tweak as needed) */
:root{
  --mfb-gap: 10px;

  /* Card + media */
  --mfb-card-bg: #fff;
  --mfb-card-fg: #222;
  --mfb-card-pad: 0px;
  --mfb-shadow-none: none;
  --mfb-shadow-sm: 0 1px 6px rgba(0,0,0,.08);
  --mfb-shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --mfb-shadow-lg: 0 10px 30px rgba(0,0,0,.18);

  --mfb-emboss-bg: #f3f6f9;
  --mfb-emboss-inset: inset 0 2px 6px rgba(255,255,255,.35),
                      inset 0 -6px 12px rgba(0,0,0,.06);

  /* Buttons */
  --mfb-btn-bg: #f2b100;
  --mfb-btn-fg: #111;
  --mfb-btn-border: #f2b100;

  /* Typography */
  --mfb-title-size: 1rem;
  --mfb-series-size: .95rem;

  /* Media */
  --mfb-image-aspect: 2/3;
}

/* Wrapper + grid */
.mfb-wrapper{ display:block; margin:20px 0; }
.mfb-grid{
  --mfb-cols: 4; /* render.php overrides inline */
  max-width: 1100px;
  margin-inline: auto;
  display:flex !important;
  flex-wrap:wrap !important;
  gap: var(--mfb-gap);
}
.mfb-item{
  box-sizing:border-box;
  padding-inline:5px;
  margin: 0 0 40px 0;
  text-align:center;
  flex: 0 0 calc((100% - (var(--mfb-gap) * (var(--mfb-cols) - 1))) / var(--mfb-cols));
}

/* Card */
.mfb-card{
  display:flex; flex-direction:column;
  /*background: var(--mfb-card-bg);*/
  /*color: var(--mfb-card-fg);*/
  box-shadow: var(--mfb-shadow-none);
  padding: var(--mfb-card-pad);
  border-radius: 0; /* square-first */
  overflow:hidden;  /* ensures shared corners when joined */
}


/* Effects (apply to .mfb-media when joined, else per-part) */
.mfb-effect--flat .mfb-card{ box-shadow: var(--mfb-shadow-none); }
.mfb-effect--shadow-sm.mfb-cta--joined .mfb-media{ box-shadow: var(--mfb-shadow-sm); }
.mfb-effect--shadow-md.mfb-cta--joined .mfb-media{ box-shadow: var(--mfb-shadow-md); }
.mfb-effect--shadow-lg.mfb-cta--joined .mfb-media{ box-shadow: var(--mfb-shadow-lg); }
.mfb-effect--emboss.mfb-cta--joined .mfb-media{
  background: var(--mfb-emboss-bg);
  box-shadow: var(--mfb-shadow-md), var(--mfb-emboss-inset);
}
.mfb-effect--shadow-sm.mfb-cta--gap .mfb-image,
.mfb-effect--shadow-sm.mfb-cta--gap .mfb-button{ box-shadow: var(--mfb-shadow-sm); }
.mfb-effect--shadow-md.mfb-cta--gap .mfb-image,
.mfb-effect--shadow-md.mfb-cta--gap .mfb-button{ box-shadow: var(--mfb-shadow-md); }
.mfb-effect--shadow-lg.mfb-cta--gap .mfb-image,
.mfb-effect--shadow-lg.mfb-cta--gap .mfb-button{ box-shadow: var(--mfb-shadow-lg); }
.mfb-effect--emboss.mfb-cta--gap .mfb-image,
.mfb-effect--emboss.mfb-cta--gap .mfb-button{
  background: var(--mfb-emboss-bg);
  box-shadow: var(--mfb-shadow-sm), var(--mfb-emboss-inset);
}

/* Media */
.mfb-media{ position:relative; display:block; width:100%; }
.mfb-image{
  display:block; width:100%;
  aspect-ratio: var(--mfb-image-aspect);
  overflow:hidden;
  border-radius: 0; /* square-first */
}
.mfb-image img{ display:block; width:100%; height:100%; object-fit: fill; }

/* Cover shape (opt-in rounded) */
.mfb-cover--rounded .mfb-image{ border-radius: 16px; }
.mfb-cta--joined.mfb-cover--rounded .mfb-image{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Primary button (book link) */
.mfb-button{
  display:block; 
  width:100% !important;
  text-align:center; text-decoration:none;
  font-weight:600; font-size:18px;
  padding:18px 0 !important; margin:0;
  background: var(--mfb-btn-bg);
  color: var(--mfb-btn-fg);
  border-radius: 0; /* square-first */
}
.mfb-button--rounded .mfb-button{ border-radius:16px; }
.mfb-button--pill .mfb-button{ border-radius:9999px; }

/* CTA spacing */
.mfb-cta--gap .mfb-button{ margin-top: 10px; }
.mfb-cta--joined .mfb-button{ margin-top: 0; border-top-left-radius:0; border-top-right-radius:0; }

/* Sample CTA row */
.mfb-audio{ margin-top:0px; }

.mfb-audio-cta::before{
  content:"\25B6\FE0E"; font-weight:700; margin-right:8px;
}

/* === Audio reveal UX === */
.mfb-audio-reveal{ display:block; }
.mfb-audio-reveal > summary{
  list-style:none; cursor:pointer; /* turn off default marker */
}
.mfb-audio-reveal > summary::-webkit-details-marker{ display:none; }

/* Make <summary> look exactly like our buttons (already has .mfb-button, .mfb-audio-cta) */
.mfb-audio .mfb-button.mfb-audio-cta{
  width:99% !important; margin-top:10px;
  background: var(--mfb-sample-bg, transparent);
  color: var(--mfb-sample-fg, #222);
  border:1px solid var(--mfb-sample-border, #222);
  border-radius:0; /* square-first */
  display:block;
}
.mfb-sample--rounded .mfb-audio .mfb-button.mfb-audio-cta{ border-radius:16px; }
.mfb-sample--pill    .mfb-audio .mfb-button.mfb-audio-cta{ border-radius:9999px; }

/* Panel spacing and fluid media */
.mfb-audio-panel{ margin-top:0px; }
.mfb-audio-panel .wp-audio-shortcode,
.mfb-audio-panel .mejs-container,
.mfb-audio-panel audio{ width:100% !important; max-width:100%; }
.mfb-audio-panel iframe{ width: 100%; max-width:99%; border:0; }

.mfb-audio--align-center { text-align: center; }
.mfb-audio--align-right  { text-align: right;  }
.mfb-audio--align-center .mfb-button.mfb-audio-cta,
.mfb-audio--align-right  .mfb-button.mfb-audio-cta {
  width: auto !important;
  display: inline-block;
  min-width: 12rem;
}

/* Titles/series */
.mfb-title{
  display:block; margin-top:10px; font-size: var(--mfb-title-size);
  font-weight:600; text-align:center;
}
.mfb-series{
  display:block; margin-top:5px; font-size: var(--mfb-series-size);
  opacity:.85; font-style:italic; text-align:center;
}

/* ===== ModFarm: Archive/Multi-tax pagination ===== */
.mfb-pagination { 
  margin: 24px 0 8px; 
}

.mfb-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mfb-pagination .page-numbers li { list-style: none; }

/* Buttons */
.mfb-pagination .page-numbers a,
.mfb-pagination .page-numbers span {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--mfb-border, #ddd);
  border-radius: 9999px;            /* pill by default */
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  background: var(--mfb-surface, #fff);
  color: var(--mfb-text, #222);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Hover/Focus */
.mfb-pagination .page-numbers a:hover,
.mfb-pagination .page-numbers a:focus {
  border-color: var(--mfb-accent, #111);
  color: var(--mfb-accent, #111);
  outline: none;
}

/* Current page */
.mfb-pagination .page-numbers .current {
  background: var(--mfb-accent, #111);
  border-color: var(--mfb-accent, #111);
  color: var(--mfb-on-accent, #fff);
  cursor: default;
}

/* Dots (…) */
.mfb-pagination .page-numbers .dots {
  border-color: transparent;
  background: transparent;
  min-width: auto;
  padding: 0 6px;
  color: var(--mfb-text-muted, #666);
}

/* If you prefer square/rounded to match block settings: hook to wrapper tokens */
.mfb-wrapper.mfb-button--square .mfb-pagination .page-numbers a,
.mfb-wrapper.mfb-button--square .mfb-pagination .page-numbers span { border-radius: 6px; }

.mfb-wrapper.mfb-button--rounded .mfb-pagination .page-numbers a,
.mfb-wrapper.mfb-button--rounded .mfb-pagination .page-numbers span { border-radius: 12px; }

.mfb-wrapper.mfb-button--pill .mfb-pagination .page-numbers a,
.mfb-wrapper.mfb-button--pill .mfb-pagination .page-numbers span { border-radius: 9999px; }

/* Small screens */
@media (max-width: 480px) {
  .mfb-pagination .page-numbers a,
  .mfb-pagination .page-numbers span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.95rem;
  }
}


/* Responsive clamps (frontend) */
@media (max-width:1100px){ .mfb-grid{ --mfb-cols: min(var(--mfb-cols), 3); } }
@media (max-width:800px){  .mfb-grid{ --mfb-cols: 2 !important; } }
@media (max-width:520px){  .mfb-grid{ --mfb-cols: 2 !important; } }

/* Editor parity */
.block-editor-page .editor-styles-wrapper .mfb-grid{
  max-width:1100px; display:flex !important; flex-wrap:wrap !important; gap: var(--mfb-gap);
}
.block-editor-page .editor-styles-wrapper .mfb-grid .mfb-item{
  width:auto !important;
  flex: 0 0 calc((100% - (var(--mfb-gap) * (var(--mfb-cols) - 1))) / var(--mfb-cols));
} 


.block-editor-page .editor-styles-wrapper .mfb-card img{ border-radius:0 !important; }
@media (max-width:1100px){
  .block-editor-page .editor-styles-wrapper .mfb-grid{ --mfb-cols: min(var(--mfb-cols), 3); }
}
@media (max-width:800px){
  .block-editor-page .editor-styles-wrapper .mfb-grid{ --mfb-cols: 2 !important; }
  
  /* Center rows so the last orphan sits centered */
.mfb-grid{ justify-content: center; }
.block-editor-page .editor-styles-wrapper .mfb-grid{ justify-content: center; }
}
@media (max-width:520px){
  .block-editor-page .editor-styles-wrapper .mfb-grid{ --mfb-cols: 2 !important; }
}