/* ==========================================================================
   CHORPARITAS JOURNAL - PRODUCTION STYLESHEET (THAIJO / OJS 3.3)
   Exact Header Alignment & Pure-CSS Split Ribbon Theme
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS & SYSTEM VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --header-navy: #020167;
  --header-navy-dark: #01013d;

  --gold-primary: #ebc327;
  --gold-tint: #fffbeb;
  --gold-border: rgba(235, 195, 39, 0.35);

  --blue-ribbon-start: #0b2a6b;
  --blue-ribbon-mid: #082054;
  --blue-ribbon-end: #030d24;

  --btn-blue: #1e40af;
  --btn-blue-hover: #1d4ed8;

  --text-main: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;

  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-subtle: #f1f5f9;
  --border-subtle: #e2e8f0;
  --border-card: #cbd5e1;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 5px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 14px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px -4px rgba(15, 23, 42, 0.1);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;

  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY & RESET
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body,
#Options blockquote {
  font-family: 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--text-body) !important;
  background-color: var(--bg-page) !important;
  text-shadow: none !important;
  padding-bottom: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

.pkp_structure_page {
  padding-top: 0;
}

::selection {
  background: rgba(235, 195, 39, 0.3);
  color: var(--text-main);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. HEADER & EXACT LOGO/TITLE/MENU LAYOUT (ROW 1: TITLE, ROW 2: MENU)
   -------------------------------------------------------------------------- */
.container-fluid {
  display: block !important;
}

.navbar-default {
  background-color: var(--header-navy) !important;
  background: var(--header-navy) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  margin: 0 0 24px 0 !important;
  padding: 12px 24px 10px !important;
  height: auto !important;
  min-height: auto !important;
  text-shadow: none !important;
}

/* Top Mini User & Locale Bar */
#navigationUser {
  margin-bottom: 6px;
}

.navbar-default #navigationUser > li a {
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  padding: 6px 12px !important;
  text-shadow: none !important;
}

.navbar-default #navigationUser > li a:hover,
.navbar-default #navigationUser > li a:focus {
  color: var(--gold-primary) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-sm);
}

#navigationUser .badge {
  background-color: var(--gold-primary);
  color: #000;
  font-weight: 700;
  font-size: 11px;
}

/* Row 1: Logo & Title Area */
.navbar-header {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-height: 95px !important;
  margin-bottom: 8px !important;
}

.site-name {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 95px !important;
}

/* Left: Logo */
.navbar-brand-logo {
  float: left !important;
  display: inline-block !important;
  height: auto !important;
  padding: 2px 25px 2px 0 !important;
  margin: 0 !important;
}

.navbar-brand-logo img {
  height: 90px !important;
  max-height: 90px !important;
  width: auto !important;
  display: block !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: var(--transition);
}

.navbar-brand-logo img:hover {
  transform: scale(1.02);
}

/* Right: Stacked Title ("Chor Dok Peeb Review") */
.site-name::before {
  display: block !important;
  content: 'Chor Dok Peeb Review' !important;
  color: #ffffff !important;
  font-family: 'Inter', 'Sarabun', sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.3px !important;
  padding-top: 8px !important;
  margin-left: 290px !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Right: Stacked ISSN ("ISSN 3088–1781 (Online)") */
.site-name::after {
  display: block !important;
  content: 'ISSN 3088–1781 (Online)' !important;
  color: #ebc327 !important;
  font-family: 'Inter', 'Sarabun', sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.5px !important;
  margin-top: 6px !important;
  margin-left: 290px !important;
  white-space: nowrap !important;
  text-shadow: 0 0 6px rgba(235, 195, 39, 0.45) !important;
}

/* Row 2: Menu Bar Placed Fully Below Logo & Title */
#nav-menu {
  clear: both !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  padding-top: 6px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.navbar-default #main-navigation {
  float: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navbar-default #main-navigation > li {
  float: left !important;
}

.navbar-default #main-navigation > li a {
  padding: 10px 18px 10px 0 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  background: transparent !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  transition: var(--transition);
}

.navbar-default #main-navigation > li a:hover,
.navbar-default #main-navigation > li.open > a {
  color: var(--gold-primary) !important;
  background: transparent !important;
}

/* Dropdown Menus */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
  margin-top: 6px;
  min-width: 210px;
}

.dropdown-menu li > a {
  color: var(--text-main) !important;
  text-shadow: none !important;
  background: transparent !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 9px 14px !important;
  border-radius: var(--r-sm);
  transition: var(--transition);
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
  background-color: var(--gold-tint) !important;
  color: #92400e !important;
  transform: translateX(3px);
}

/* Search Box Aligned Right on Row 2 */
.navbar-form {
  float: right !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.form-control {
  color: var(--text-main) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--r-pill) 0 0 var(--r-pill) !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  height: 38px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 8px 14px !important;
  transition: var(--transition);
}

.form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--gold-primary) !important;
  box-shadow: none !important;
}

.pull-md-right form button {
  color: #1e293b !important;
  background-color: var(--gold-primary) !important;
  border: 1px solid var(--gold-primary) !important;
  border-radius: 0 var(--r-pill) var(--r-pill) 0 !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  height: 38px !important;
  padding: 0 16px !important;
  text-shadow: none !important;
  transition: var(--transition);
}

.pull-md-right form button:hover,
.pull-md-right form button:focus {
  background-color: #f0cc3d !important;
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   4. NATIVE SECTION HEADERS -> #EBC327 GOLD & SAPPHIRE SPLIT RIBBONS
   -------------------------------------------------------------------------- */
.galleys .page-header,
.sections .section .page-header,
.contact_section h3,
.pkp_page_archive .page-header,
.pkp_page_announcement .page-header,
.pkp_page_ethics .page-header,
.pkp_page_about .page-header,
.pkp_page_submissions .page-header,
.pkp_page_editorialTeam .page-header,
.pkp_page_privacy .page-header,
.pkp_page_contact .page-header,
.ribbon-banner-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 52px !important;
  margin: 28px 0 20px 0 !important;
  padding: 0 0 0 20px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16) !important;
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 55%,
      rgba(255, 255, 255, 0.08) 58%,
      rgba(255, 255, 255, 0.08) 63%,
      transparent 64%,
      transparent 76%,
      rgba(0, 0, 0, 0.28) 78%,
      rgba(0, 0, 0, 0.28) 84%,
      rgba(255, 255, 255, 0.06) 86%,
      transparent 90%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 45.8%,
      rgba(255, 255, 255, 0.45) 46.2%,
      rgba(0, 0, 0, 0.3) 46.7%,
      transparent 47.5%
    ),
    linear-gradient(
      135deg,
      #ebc327 0%,
      #e2bc21 46.2%,
      #0b2a6b 46.5%,
      #082054 65%,
      #051538 85%,
      #030d24 100%
    ) !important;
}

.galleys .page-header h2,
.sections .section .page-header h2,
.contact_section h3,
.galleys .page-header small,
.sections .section .page-header small,
.pkp_page_archive .page-header h1,
.pkp_page_announcement .page-header h1,
.pkp_page_ethics .page-header h1,
.pkp_page_about .page-header h1,
.pkp_page_submissions .page-header h1,
.pkp_page_editorialTeam .page-header h1,
.pkp_page_privacy .page-header h1,
.pkp_page_contact .page-header h1,
.ribbon-banner-header h2,
.ribbon-banner-header h3 {
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.3px !important;
  line-height: 52px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  z-index: 2 !important;
}

/* Home Section Current Issue Title */
.current_issue > .page-header {
  border: none !important;
  padding: 0 !important;
  margin: 20px 0 10px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}

.current_issue > .page-header h2 {
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  text-shadow: none !important;
  line-height: 1.4 !important;
}

/* Current Issue Top Ribbon Bar */
.current_issue_title.lead,
.current_issue .lead,
.current-issue-bar {
  position: relative;
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 10px 18px !important;
  margin: 0 0 20px 0 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  color: #ffffff !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 33.8%,
      rgba(255, 255, 255, 0.4) 34.2%,
      rgba(0, 0, 0, 0.25) 34.6%,
      transparent 35.5%
    ),
    linear-gradient(
      135deg,
      #ebc327 0%,
      #ebc327 34.2%,
      #0b2a6b 34.5%,
      #082054 65%,
      #041233 100%
    ) !important;
}

.current-issue-bar a,
.current_issue .lead a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   5. ISSUE VIEW & ARTICLE CARD ARCHITECTURE
   -------------------------------------------------------------------------- */
.issue-toc .heading {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
}

.heading .thumbnail,
.cover-image,
.media-left {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  margin-bottom: 0;
}

.issue-details p.published {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.issues .issue-summary .media-left {
  padding: 4px;
  margin-top: 5px;
  max-width: 180px;
  float: left;
}

.issues .issue-summary .media-left img {
  width: 100% !important;
  max-width: none !important;
}

.homepage-image {
  margin-bottom: 24px;
  text-align: center;
}

.homepage-image > img {
  border-radius: var(--r-md) !important;
  border: none !important;
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 100%;
}

.journal-description {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--gold-primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-xs);
  text-align: justify;
}

.journal-description > p {
  color: var(--text-body) !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin: 10px 0 !important;
}

.article-summary.media {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
  transition: var(--transition);
  display: block;
}

.article-summary.media:hover {
  border-color: var(--border-card);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.article-summary .media-heading {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.media-heading a,
.issue a,
.page_about a,
.pkp_block a {
  color: #1e3a8a !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: var(--transition);
}

.media-heading a:hover,
.issue a:hover,
.page_about a:hover,
.pkp_block a:hover {
  color: var(--gold-primary) !important;
}

.media-body p,
.media-body .authors,
.page_about p {
  color: var(--text-muted) !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 10px 0 !important;
  text-shadow: none !important;
}

.article-summary .pages {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  background: var(--bg-subtle) !important;
  padding: 3px 12px !important;
  border-radius: var(--r-pill) !important;
  float: left;
}

.article-summary .btn-group {
  float: right;
  margin-top: -2px;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   6. PDF ACTION BUTTONS
   -------------------------------------------------------------------------- */
.btn-group .btn-primary,
.current_issue .btn-primary,
.download .btn-primary,
.galley-link.btn-primary.pdf,
.galley-link.pdf {
  background-color: var(--btn-blue) !important;
  background: var(--btn-blue) !important;
  border: 1px solid var(--btn-blue) !important;
  border-radius: var(--r-pill) !important;
  color: #ffffff !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 5px 18px !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: var(--transition);
}

.btn-group .btn-primary:hover,
.current_issue .btn-primary:hover,
.download .btn-primary:hover,
.galley-link.btn-primary.pdf:hover,
.galley-link.pdf:hover,
.btn-group .btn-primary:focus,
.current_issue .btn-primary:focus,
.download .btn-primary:focus {
  background-color: var(--btn-blue-hover) !important;
  border-color: var(--btn-blue-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 64, 175, 0.25) !important;
}

.read-more,
.current_issue .read-more {
  background-color: var(--header-navy) !important;
  border-color: var(--header-navy) !important;
  border-radius: var(--r-pill) !important;
  color: #ffffff !important;
  padding: 8px 22px !important;
  font-weight: 600 !important;
  margin-top: 16px;
  transition: var(--transition);
}

.read-more:hover {
  background-color: var(--gold-primary) !important;
  border-color: var(--gold-primary) !important;
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   7. SIDEBAR & WIDGETS
   -------------------------------------------------------------------------- */
#sidebar {
  padding-left: 20px;
}

aside .pkp_block,
.panel {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  margin: 0 0 20px 0 !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
}

.pkp_block .title,
.panel-default > .panel-heading {
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  background-color: var(--bg-subtle) !important;
  border: none !important;
  border-bottom: 2px solid var(--gold-primary) !important;
  border-top-left-radius: var(--r-md) !important;
  border-top-right-radius: var(--r-md) !important;
  margin: -18px -20px 14px -20px !important;
  padding: 10px 18px !important;
  text-shadow: none !important;
}

#customblock-downloads a {
  display: block !important;
  width: 100%;
  padding: 7px 12px !important;
  font-size: 13.5px !important;
  color: #1e3a8a !important;
  text-decoration: none !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg-subtle) !important;
  border: 1px solid transparent !important;
  margin-bottom: 6px !important;
  transition: var(--transition);
}

#customblock-downloads a:hover {
  color: #92400e !important;
  background: var(--gold-tint) !important;
  border-color: var(--gold-border) !important;
  transform: translateX(3px);
}

#customblock-downloads hr {
  margin: 10px 0;
  border-top: 1px dashed var(--border-subtle);
}

.block_language ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}

.block_language ul li {
  border: none !important;
  padding: 0 !important;
}

.block_language ul li a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--text-body);
  text-decoration: none;
  transition: var(--transition);
}

.block_language ul li.current a,
.block_language ul li a:hover {
  background: var(--header-navy);
  color: var(--gold-primary);
}

#customblock-visitors .content {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

#customblock-visitors img {
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   8. BREADCRUMBS & FOOTER
   -------------------------------------------------------------------------- */
.breadcrumb {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  margin: 0 0 20px 0 !important;
  padding: 8px 16px !important;
  box-shadow: var(--shadow-xs);
}

.breadcrumb li a {
  font-size: 14px;
  color: var(--text-muted);
}

.breadcrumb .active {
  color: var(--text-main) !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

footer[role="contentinfo"] {
  background-color: #f1f5f9 !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-width: 1px 0 0 0 !important;
  margin: 60px 0 0 0 !important;
  padding: 36px 0 28px 0 !important;
  color: var(--text-muted) !important;
  font-family: 'Sarabun', 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  text-shadow: none !important;
}

footer[role="contentinfo"] p {
  margin-bottom: 4px;
}

footer[role="contentinfo"] strong {
  color: var(--text-main);
}

footer[role="contentinfo"] a {
  color: var(--btn-blue);
  text-decoration: none;
}

footer[role="contentinfo"] a:hover {
  color: var(--gold-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE DESIGN & ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #sidebar {
    padding-left: 15px;
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .site-name::before,
  .site-name::after {
    margin-left: 0 !important;
    white-space: normal !important;
  }

  .navbar-brand-logo {
    float: none !important;
    padding-right: 0 !important;
  }

  .navbar-brand-logo img {
    height: 60px !important;
    max-height: 60px !important;
  }

  .site-name::before {
    font-size: 20px !important;
    padding-top: 6px !important;
  }

  .site-name::after {
    font-size: 14px !important;
  }

  .galleys .page-header,
  .sections .section .page-header,
  .ribbon-banner-header {
    height: 46px !important;
  }

  .galleys .page-header h2,
  .sections .section .page-header h2,
  .ribbon-banner-header h2 {
    font-size: 16px !important;
    line-height: 46px !important;
  }

  .article-summary.media {
    padding: 16px;
  }

  .article-summary .pages {
    float: none;
    display: inline-block;
    margin-bottom: 8px;
  }

  .article-summary .btn-group {
    float: none;
    display: block;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}