/*
 * GPI Journal frontend stability layer v1.1
 * Scope: site directory, public journal shell, journal identity masthead.
 * Navigation order, URLs, and user flow are intentionally unchanged.
 */

/* ---------- Shared containment ---------- */
.pkp_page_index .pkp_structure_content,
.pkp_page_index .pkp_structure_main,
.jl-home-shell,
.jl-home-shell .gp-container,
.jl-home-layout,
.jl-home-main,
.jl-directory-toolbar,
.jl-list-section,
.jl-list,
.jl-item,
.jl-item-body,
.jl-item-actions,
.pkp_structure_content.gp-layout-journal-public,
.pkp_structure_content.gp-layout-journal-public > .gp-journal-tools,
.pkp_structure_content.gp-layout-journal-public > .pkp_structure_main,
.pkp_structure_content.gp-layout-journal-public > .pkp_structure_sidebar,
.pkp_structure_content.gp-layout-journal-public > .gp-journal-sidebar {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.pkp_page_index .pkp_structure_content,
.pkp_page_index .pkp_structure_main,
.jl-home-shell,
.jl-home-shell .gp-container,
.jl-home-layout,
.jl-home-main,
.jl-directory-toolbar,
.jl-list-section,
.jl-list {
  width: 100% !important;
  max-width: 100% !important;
}

/* Never split ordinary words into a vertical character column. */
.jl-directory-heading,
.jl-directory-heading > *,
.jl-item-body,
.jl-item-title,
.jl-item-title a,
.jl-item-desc,
.jl-results-summary,
.jl-panel,
.jl-panel *,
.gp-journal-masthead__name,
.gp-journal-masthead__meta,
.pkp_structure_content.gp-layout-journal-public > .pkp_structure_main,
.pkp_structure_content.gp-layout-journal-public > .pkp_structure_main * {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  writing-mode: horizontal-tb !important;
}

.jl-btn,
.jl-tool-btn,
.jl-reset-btn,
.jl-results-summary,
.gp-journal-masthead__meta {
  white-space: normal !important;
}

/* ---------- Header and Friday ISSN requirement ---------- */
.gp-header,
.gp-header .gp-container,
.gp-header .gp-brand,
.gp-header .gp-header-actions {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.gp-header .gp-container {
  width: 100% !important;
  max-width: var(--container-max, 1280px) !important;
}

.gp-header .gp-brand {
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.gp-header .gp-brand img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

.gp-header .gp-header-actions {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.gp-journal-masthead {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px 28px !important;
  width: 100% !important;
  max-width: var(--container-max, 1280px) !important;
  margin: 0 auto !important;
  padding: 10px clamp(14px, 2vw, 32px) !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.gp-journal-masthead__name {
  display: block !important;
  color: #172033 !important;
  font-size: clamp(.94rem, .86rem + .24vw, 1.08rem) !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
}

.gp-journal-masthead__meta {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.gp-journal-masthead__label {
  color: #64748b !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.gp-journal-masthead__value {
  color: #172033 !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .02em !important;
}

/* ---------- Narrow desktop / tablet landscape ---------- */
@media (max-width: 1240px) and (min-width: 992px) {
  /* Keep the directory main column readable instead of squeezing three columns. */
  .jl-home-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 240px) !important;
    grid-template-areas:
      "main left"
      "main right" !important;
    gap: 14px !important;
    align-items: start !important;
  }

  .jl-home-main {
    grid-area: main !important;
    display: block !important;
  }

  .jl-home-sidebar-left { grid-area: left !important; }
  .jl-home-sidebar-right { grid-area: right !important; }

  .jl-item,
  .jl-home-layout.is-compact .jl-item,
  .jl-home-layout.hide-covers .jl-item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb body"
      "actions actions" !important;
    gap: 12px !important;
  }

  .jl-item-thumb { grid-area: thumb !important; }
  .jl-item-body { grid-area: body !important; }
  .jl-item-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Journal pages: main content full width first, tools remain available below. */
  .pkp_structure_content.gp-layout-journal-public,
  .pkp_structure_content.pkp_has_sidebar.gp-layout-journal-public,
  .pkp_structure_content.has_sidebar.gp-layout-journal-public {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 270px) !important;
    grid-template-areas:
      "main main"
      "tools sidebar" !important;
    gap: 14px !important;
  }

  .pkp_structure_content.gp-layout-journal-public > .pkp_structure_main {
    grid-area: main !important;
  }

  .pkp_structure_content.gp-layout-journal-public > .gp-journal-tools {
    grid-area: tools !important;
  }

  .pkp_structure_content.gp-layout-journal-public > .pkp_structure_sidebar,
  .pkp_structure_content.gp-layout-journal-public > .gp-journal-sidebar {
    grid-area: sidebar !important;
  }
}

@media (max-width: 991.98px) and (min-width: 768px) {
  .pkp_page_index .pkp_structure_content,
  .pkp_page_index .pkp_structure_main {
    display: block !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .jl-home-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "main"
      "left"
      "right" !important;
    gap: 12px !important;
  }

  .jl-home-main { grid-area: main !important; display: block !important; }
  .jl-home-sidebar-left { grid-area: left !important; }
  .jl-home-sidebar-right { grid-area: right !important; }

  .pkp_structure_content.gp-layout-journal-public,
  .pkp_structure_content.pkp_has_sidebar.gp-layout-journal-public,
  .pkp_structure_content.has_sidebar.gp-layout-journal-public {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "main main"
      "tools sidebar" !important;
    gap: 12px !important;
  }
}

@media (max-width: 880px) {
  .gp-journal-masthead {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .gp-journal-masthead__meta {
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }
}

/* ---------- Mobile final authority ---------- */
@media (max-width: 767.98px) {
  html,
  body,
  .pkp_structure_page,
  .pkp_page_index,
  .pkp_page_index .pkp_structure_content,
  .pkp_page_index .pkp_structure_main,
  .jl-home-shell,
  .jl-home-shell .gp-container,
  .jl-home-layout,
  .jl-home-main,
  .jl-directory-toolbar,
  .jl-list-section,
  .jl-list {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pkp_page_index .pkp_structure_content,
  .pkp_page_index .pkp_structure_main {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  .jl-home-shell {
    padding: 10px 0 84px !important;
    overflow: visible !important;
  }

  .jl-home-shell .gp-container {
    margin: 0 auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .jl-home-layout,
  .jl-home-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .jl-directory-toolbar,
  .jl-list-section,
  .jl-insight-strip,
  .jl-insight-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .jl-directory-toolbar,
  .jl-insight-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .jl-directory-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .jl-results-summary {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .jl-search-wrap,
  .jl-search-wrap input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .jl-item,
  .jl-home-layout.is-compact .jl-item,
  .jl-home-layout.hide-covers .jl-item {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb body"
      "actions actions" !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .jl-item-thumb {
    grid-area: thumb !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  .jl-item-thumb img,
  .jl-item-thumb-placeholder,
  .jl-home-layout.is-compact .jl-item-thumb img,
  .jl-home-layout.is-compact .jl-item-thumb-placeholder {
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    height: 86px !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  .jl-item-body {
    grid-area: body !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .jl-item-title,
  .jl-item-title a,
  .jl-item-desc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .jl-item-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .jl-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 6px 8px !important;
    text-align: center !important;
  }

  .gp-popular-journals-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Header controls may shrink, but never overlap. */
  .gp-header .gp-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .gp-header .gp-brand {
    flex: 1 1 auto !important;
    max-width: calc(100% - 148px) !important;
  }

  .gp-header .gp-header-actions {
    flex: 0 0 auto !important;
    max-width: 140px !important;
    gap: 6px !important;
  }

  .gp-journal-masthead {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    max-width: 100% !important;
    padding: 8px 10px !important;
  }

  .gp-journal-masthead__name,
  .gp-journal-masthead__meta {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .gp-journal-masthead__meta {
    justify-content: flex-start !important;
    white-space: nowrap !important;
  }

  /* Public journal main content stacks; panels are opened by the bottom tool bar. */
  .pkp_structure_content.gp-layout-journal-public,
  .pkp_structure_content.pkp_has_sidebar.gp-layout-journal-public,
  .pkp_structure_content.has_sidebar.gp-layout-journal-public {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  .pkp_structure_content.gp-layout-journal-public > .pkp_structure_main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  /* Both mobile tool bars must remain visible. */
  .jl-mobile-tools-bar,
  body.gp_public_journal .gp-mobile-tools-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 10090 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 16px 42px rgba(15,23,42,.22) !important;
  }

  .jl-mobile-tools-toggle,
  .gp-mobile-tools-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #cf3a32 !important;
    color: #fff !important;
    font: inherit !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  body.gp_public_journal .gp-mobile-tools-bar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .gp-mobile-tools-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(48px, 1fr)) !important;
    gap: 4px !important;
  }

  .gp-mobile-tools-tabs button {
    min-height: 38px !important;
    padding: 0 8px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
  }

  .gp-mobile-tools-tabs button.is-active {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #b91c1c !important;
  }

  .jl-mobile-tools-backdrop,
  .gp-mobile-tools-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10070 !important;
    display: none !important;
    background: rgba(15,23,42,.4) !important;
  }

  body.jl-tools-open .jl-mobile-tools-backdrop,
  body.gp-tools-open .gp-mobile-tools-backdrop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .jl-home-sidebar-left,
  .jl-home-sidebar-right {
    display: none !important;
  }

  body.jl-tools-open .jl-home-sidebar-left {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 74px !important;
    z-index: 10080 !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, 620px) !important;
    overflow: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.jl-tools-open .jl-home-sidebar-left .jl-panel {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 7px !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.28) !important;
  }

  .pkp_structure_content.gp-layout-journal-public > .gp-journal-tools,
  .pkp_structure_content.gp-layout-journal-public > .pkp_structure_sidebar,
  .pkp_structure_content.gp-layout-journal-public > .gp-journal-sidebar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 74px !important;
    top: auto !important;
    z-index: 10080 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 640px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.24) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 96px)) !important;
  }

  body.gp-tools-open.gp-tools-tab-menu .pkp_structure_content.gp-layout-journal-public > .gp-journal-tools,
  body.gp-tools-open.gp-tools-tab-links .pkp_structure_content.gp-layout-journal-public > .pkp_structure_sidebar,
  body.gp-tools-open.gp-tools-tab-links .pkp_structure_content.gp-layout-journal-public > .gp-journal-sidebar {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 420px) {
  .jl-item,
  .jl-home-layout.is-compact .jl-item,
  .jl-home-layout.hide-covers .jl-item {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .jl-item-thumb,
  .jl-item-thumb img,
  .jl-item-thumb-placeholder,
  .jl-home-layout.is-compact .jl-item-thumb,
  .jl-home-layout.is-compact .jl-item-thumb img,
  .jl-home-layout.is-compact .jl-item-thumb-placeholder {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  .jl-item-thumb img,
  .jl-item-thumb-placeholder {
    height: 76px !important;
  }

  .jl-item-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gp-header .gp-brand {
    max-width: calc(100% - 126px) !important;
  }

  .gp-header .gp-header-actions {
    max-width: 118px !important;
  }
}