/**
 * SCR Responsive & Advanced Widget Styles v1.4
 *
 * BUGS FIXED:
 * - Removed `:root { --scr-card-cols: var(--scr-tablet-cols); }` inside media queries.
 *   This was unreliable because the inline CSS from build_dynamic_css() is appended
 *   AFTER this stylesheet, so the global :root in inline CSS overrode the media-query
 *   scoped :root here. Result: variable overrides had no effect.
 * - Removed all grid-template-columns / aspect-ratio from this file.
 *   These are now set EXCLUSIVELY by build_dynamic_css() inline CSS (which loads
 *   after all stylesheets and uses explicit values, not variable references).
 * - This file now contains ONLY: advanced widget styles (scroll trigger, exit intent,
 *   sticky), theme-adaptive typography tokens, and structural helpers.
 *
 * @package SmartContentRecommender
 */

/* ============================================================
   Advanced widget CSS variables
   ============================================================ */
:root {
  --scr-scroll-z:   9990;
  --scr-exit-z:     9995;
  --scr-sticky-z:   9980;
  --scr-adv-bg:     #ffffff;
  --scr-adv-shadow: 0 8px 40px rgba(0,0,0,.18);
  --scr-adv-radius: 14px;
  --scr-adv-header: #f8fafc;
  --scr-adv-border: #e5e7eb;
  --scr-adv-close:  #6b7280;
}

/* ============================================================
   Theme-adaptive typography — inherit from active theme
   ============================================================ */
.scr-section__title,
.scr-card__title,
.scr-card__excerpt,
.scr-card__date,
.scr-card__cat {
  font-family: inherit;
}

/* ============================================================
   SCROLL TRIGGER WIDGET
   ============================================================ */
.scr-scroll-trigger {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: min(360px, calc(100vw - 2rem));
  background: var(--scr-adv-bg);
  border: 1px solid var(--scr-adv-border);
  border-radius: var(--scr-adv-radius);
  box-shadow: var(--scr-adv-shadow);
  z-index: var(--scr-scroll-z);
  overflow: hidden;
  transform: translateY(30px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  font-family: var(--scr-font, -apple-system, sans-serif);
}
.scr-scroll-trigger.scr-adv--visible {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   EXIT INTENT OVERLAY + POPUP
   ============================================================ */
.scr-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: var(--scr-exit-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity .25s ease;
}
.scr-exit-overlay.scr-adv--visible { opacity: 1; }

.scr-exit-popup {
  position: relative;
  background: var(--scr-adv-bg);
  border-radius: var(--scr-adv-radius);
  box-shadow: var(--scr-adv-shadow);
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem;
  transform: scale(.92);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  font-family: var(--scr-font, -apple-system, sans-serif);
}
.scr-exit-overlay.scr-adv--visible .scr-exit-popup { transform: scale(1); }

.scr-exit-popup__close {
  position: absolute;
  top: .875rem;
  right: .875rem;
  width: 30px; height: 30px;
  border: none;
  background: var(--scr-adv-header);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--scr-adv-close);
  transition: background .2s;
}
.scr-exit-popup__close:hover { background: var(--scr-adv-border); }
.scr-exit-popup__header { margin-bottom: 1rem; padding-right: 2rem; }
.scr-exit-popup__title  { font-size: 1.3rem; font-weight: 700; margin: 0 0 .35rem; color: var(--scr-text, #111827); font-family: inherit; }
.scr-exit-popup__sub    { font-size: .88rem; color: var(--scr-text-muted, #6b7280); margin: 0; font-family: inherit; }

/* ============================================================
   STICKY FLOATING WIDGET
   ============================================================ */
.scr-sticky-widget {
  position: fixed;
  z-index: var(--scr-sticky-z);
  width: min(300px, calc(100vw - 1rem));
  font-family: var(--scr-font, -apple-system, sans-serif);
  opacity: 0;
  transition: opacity .3s ease;
}
.scr-sticky-widget.scr-adv--visible { opacity: 1; }

.scr-sticky-widget--bottom-right { bottom: 0; right: 1.25rem; }
.scr-sticky-widget--bottom-left  { bottom: 0; left: 1.25rem; }
.scr-sticky-widget--top-right    { top: 6rem; right: 0; }
.scr-sticky-widget--top-left     { top: 6rem; left: 0; }

.scr-sticky-widget__tab {
  background: var(--scr-primary, #2563eb);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: var(--scr-adv-radius) var(--scr-adv-radius) 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  user-select: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .2s;
}
.scr-sticky-widget__tab:hover { background: var(--scr-primary-dark, #1d4ed8); }
.scr-sticky-widget__arrow { font-size: .65rem; transition: transform .25s; }
.scr-sticky-widget--open .scr-sticky-widget__arrow { transform: rotate(180deg); }

.scr-sticky-widget__panel {
  background: var(--scr-adv-bg);
  border: 1px solid var(--scr-adv-border);
  border-top: none;
  border-radius: 0 0 var(--scr-adv-radius) var(--scr-adv-radius);
  box-shadow: var(--scr-adv-shadow);
  max-height: 70vh;
  overflow-y: auto;
}
.scr-sticky-widget__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--scr-adv-header);
  border-bottom: 1px solid var(--scr-adv-border);
  font-size: .85rem;
  font-weight: 600;
}
.scr-sticky-widget__body { padding: .75rem; }

.scr-sticky-widget--top-right .scr-sticky-widget__tab,
.scr-sticky-widget--top-left  .scr-sticky-widget__tab {
  border-radius: 0 0 var(--scr-adv-radius) var(--scr-adv-radius);
}
.scr-sticky-widget--top-right .scr-sticky-widget__panel,
.scr-sticky-widget--top-left  .scr-sticky-widget__panel {
  border-radius: var(--scr-adv-radius) var(--scr-adv-radius) 0 0;
  border-top: 1px solid var(--scr-adv-border);
  border-bottom: none;
}

/* ============================================================
   Shared advanced widget close button
   ============================================================ */
.scr-adv-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--scr-adv-header);
  border-bottom: 1px solid var(--scr-adv-border);
  font-weight: 600;
  font-size: .88rem;
}
.scr-adv-widget__title  { color: var(--scr-text, #111827); }
.scr-adv-widget__body   { padding: .875rem; }
.scr-adv-widget__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--scr-adv-close);
  font-size: 1rem;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.scr-adv-widget__close:hover {
  background: var(--scr-adv-border);
  color: var(--scr-text, #111827);
}

/* ============================================================
   Slider layout — mobile: smaller auto-columns
   ============================================================ */
@media (max-width: 768px) {
  .scr-cards--slider { grid-auto-columns: minmax(160px, 220px); }
  .scr-scroll-trigger { right: .5rem; bottom: .5rem; width: calc(100vw - 1rem); }
}

/* ============================================================
   Dark mode — advanced widgets
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --scr-adv-bg:     #1f2937;
    --scr-adv-header: #111827;
    --scr-adv-border: #374151;
    --scr-adv-close:  #9ca3af;
    --scr-adv-shadow: 0 8px 40px rgba(0,0,0,.5);
  }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .scr-scroll-trigger,
  .scr-exit-overlay,
  .scr-sticky-widget { display: none !important; }
}