/* ============================================
   RSCJ Journals Gateway - Homepage Styles
   site.css
   ============================================ */

/* === Platform Default Overrides === */
/* Strip default widget borders added by Silverchair SCSS */
.pg_index .theme-homepage-layout [class*="widget-SelfServeContent"],
.pg_index .theme-homepage-layout [class*="widget-SelectableContentList"],
.pg_index .theme-homepage-layout [class*="widget-DynamicWidgetLayout"] {
  border: none !important;
  box-shadow: none !important;
  background: unset !important;
}

.pg_index .theme-homepage-layout [class*=home-row] .widget-SelfServeContent:not([class*=content-ad]) {
  background-color: unset;
}

/* Reset default row padding from platform inner wraps */

.pg_index .theme-homepage-layout .widget-dynamic-inner-wrap {
  padding: 0 !important;
}

/* === Row Spacing === */
.pg_index .theme-homepage-layout > div {
  margin-bottom: 0;
}

/* === Heading Font (Bitter per Figma design system) === */
.pg_index .theme-homepage-layout .ss-section-title,
.pg_index .theme-homepage-layout .ss-subsection-title {
  /*font-size: 1.375rem;*/
  font-family: 'Bitter', Georgia, serif;
}

/* ============================================
   ROW 1: Hero Banner
   ============================================ */
.pg_index .theme-homepage-layout .hero-row {
  margin-bottom: 0;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}

.pg_index .theme-homepage-layout .hero-row > .widget-dynamic-inner-wrap {
  max-width: 100%;
}

.pg_index .theme-homepage-layout .hero-row [class*="_home-hero-feature"] {
  padding: 0;
  max-width: 1100px;
}

.pg_index .theme-homepage-layout .ss-hero-banner {
  position: relative;
  display: flex;
  align-items: stretch;
  color: #001D2F;
  min-height: 300px;
}

.pg_index .theme-homepage-layout .ss-hero-content {
  flex: 0 0 50%;
  padding: 48px 40px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.pg_index .theme-homepage-layout .ss-hero-image {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  height: 440px;
}

.pg_index .theme-homepage-layout .ss-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================
   HERO LEFT BORDER — Desktop: vertical bars
   ============================================= */
.pg_index .theme-homepage-layout .hero__leftBorder {
  background-color: #a3d4e2;
  position: absolute;
  left: -4.25rem;
  top: 0;
  height: 19.375rem;
  width: 4.25rem;
  margin: 0;
  border: none;
  z-index: 1;
}

.pg_index .theme-homepage-layout .hero__leftBorder::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #48a9c5;
  width: 3rem;
  height: 15rem;
  top: 0;
  left: -3rem;
}

.pg_index .theme-homepage-layout .hero__leftBorder::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #147098;
  width: 1.25rem;
  height: 15rem;
  top: 0;
  left: 0;
}

/* =============================================
   HERO RIGHT BORDER — Desktop: vertical bars
   Pins to right edge of hero parent.
   Matches the override currently in client SCSS.
   ============================================= */
.pg_index .theme-homepage-layout .hero__rightBorder {
  display: block;
  position: absolute;
  bottom: 0;
  top: auto;
  right: -42px !important;
  height: 100%;
  width: 42px;
  background-color: #48a9c5;
  z-index: 1;
}

.pg_index .theme-homepage-layout .hero__rightBorder::before {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(72, 169, 197, 0.5);
  width: 24px;
  height: 100%;
  bottom: 0;
  top: auto;
  right: 100%;
}

.pg_index .theme-homepage-layout .hero__rightBorder::after {
  content: none;
  display: none;
}

/* ============================================
   HERO — Mobile (≤992px)
   ============================================ */
@media (max-width: 992px) {
  /* Remove desktop max-width constraint */
  .pg_index .theme-homepage-layout .hero-row [class*="_home-hero-feature"] {
    max-width: none;
    padding: 0 !important;
  }

  /* Stack banner vertically */
  .pg_index .theme-homepage-layout .ss-hero-banner {
    flex-direction: column;
    min-height: auto;
  }

  /* Content fills full width */
  .pg_index .theme-homepage-layout .ss-hero-content {
    flex: none;
    width: 100%;
    padding: 32px 24px;
  }

  /* Image fills full width */
  .pg_index .theme-homepage-layout .ss-hero-image {
    flex: none;
    width: 100%;
    height: 250px;
  }

  /* Title smaller on mobile */
  .pg_index .theme-homepage-layout .ss-hero-title {
    font-size: 2.75rem;
  }

  /* Left border becomes horizontal bars at top */
  .pg_index .theme-homepage-layout .hero__leftBorder {
    position: relative;
    left: 0;
    top: auto;
    width: 100%;
    height: 20px;
    background-color: #147098;
    border-top: 20px solid #48a9c5;
    border-bottom: 20px solid #a3d4e2;
    margin-bottom: -1.25rem;
  }

  .pg_index .theme-homepage-layout .hero__leftBorder::before,
  .pg_index .theme-homepage-layout .hero__leftBorder::after {
    display: none;
  }

  /* Hide right border on mobile */
  .pg_index .theme-homepage-layout .hero__rightBorder {
    display: none;
  }
}

.pg_index .theme-homepage-layout .ss-hero-content {
  box-sizing: border-box;
  flex: 0 0 50%;
  padding: 48px 40px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.pg_index .theme-homepage-layout .ss-hero-title {
  font-family: 'Bitter', Georgia, serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.55px;
  margin: 0 0 16px 0;
  color: #001D2F;
}

.pg_index .theme-homepage-layout .ss-hero-description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 24px 0;
  color: #001D2F;
  max-width: 560px;
}

.pg_index .theme-homepage-layout .ss-hero-search {
  display: flex;
  max-width: 400px;
  border: 1px solid #DDDDDD;
}

.pg_index .theme-homepage-layout .ss-hero-search-input {
  flex: 1;
  padding: 10px 16px;
  border: none;
  font-size: 1rem;
  outline: none;
  background: #FFFFFF;
  color: #001D2F;
}

.pg_index .theme-homepage-layout .ss-hero-search-btn {
  padding: 10px 14px;
  background: #FFFFFF;
  border: none;
  border-left: 1px solid #DDDDDD;
  cursor: pointer;
  color: #004976;
  display: flex;
  align-items: center;
}

/* ============================================
   ROW 2: Our Journals
   ============================================ */
.pg_index .theme-homepage-layout .home-row2.our-journals-row {
  padding: 64px 80px;
}

.pg_index .theme-homepage-layout .ss-our-journals .ss-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 24px 0;
  color: #001D2F;
}

.pg_index .theme-homepage-layout .ss-journals-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.pg_index .theme-homepage-layout .ss-journal-card {
  text-align: center;
}

.pg_index .theme-homepage-layout .ss-journal-card-header {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* RSCJ-354: was 'left' (invalid for flex), normalized */
}

.pg_index .theme-homepage-layout .ss-journal-card-name {
  display: block;
  line-height: 1.3;
}

.pg_index .theme-homepage-layout .ss-journal-card-covers {
  position: relative;
  display: flex;
  justify-content: flex-start; /* RSCJ-354: was 'center'; align covers under journal name */
  gap: 4px;
  margin-bottom: 8px;
}

.pg_index .theme-homepage-layout .ss-journal-cover-main {
  width: 100%;
  max-width: 120px;
  height: auto;
  border: 1px solid #DDDDDD;
}

.pg_index .theme-homepage-layout .ss-journal-cover-secondary {
  width: 70%;
  max-width: 80px;
  height: auto;
  border: 1px solid #DDDDDD;
}

.pg_index .theme-homepage-layout .ss-journal-card-title a {
  font-size: 1rem;
  text-decoration: underline;
}

.pg_index .theme-homepage-layout .ss-journal-card-title a:hover {
  color: #001D2F;
  text-decoration: underline;
}

.pg_index .theme-homepage-layout .ss-journals-view-all {
  margin-top: 16px;
}

/* ============================================
   ROW 3: Featured Articles (with ad sidebar)
   ============================================ */
.pg_index .theme-homepage-layout .featured-articles-row {
 /* display: flex;
  gap: 24px; */
  padding: 64px 80px;
}

.pg_index .theme-homepage-layout .home-featured-articles-main {
  flex: 1;
  min-width: 0;
}

.pg_index .theme-homepage-layout .widget-SelectableContentList .widget-dynamic-heading {
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList {
    border: unset;
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content {
    padding: unset;
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap {
    display: grid;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap .widget-dynamic-entry {
    border: 2px solid #BDBDBD; /* RSCJ-354: was 1px solid #d9d9d9 */
    border-radius: .25rem;
}

/* RSCJ-354: card hover border per AC ('#F6FBFE on hover state') */
.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap .widget-dynamic-entry:hover {
    border-color: #F6FBFE;
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap .widget-dynamic-entry .widget-dynamic-journal-image-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap .widget-dynamic-entry .widget-dynamic-journal-image-wrap img {
    width: 100%;
}

.pg_index .theme-homepage-layout .home-card-layout .widget-SelectableContentList .widget-dynamic-content.advanced-view .widget-dynamic-entry-wrap .widget-dynamic-entry .widget-dynamic-content-wrap {
    width: unset;
    padding: 1rem;
}

.pg_index .theme-homepage-layout .home-featured-articles-ads {
  /*width: 300px;*/
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Ad slot styles */
.pg_index .theme-homepage-layout .ss-ad-slot {
  text-align: center;
}

.pg_index .theme-homepage-layout .ss-ad-label {
  font-size: 0.7rem;
  color: #54585A;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.pg_index .theme-homepage-layout .ss-ad-placeholder img {
  max-width: 100%;
  height: auto;
  border: 1px solid #DDDDDD;
}

/* ============================================
   ROW 4: About Our Publications
   ============================================ */
/* .pg_index .theme-homepage-layout .home-row4.about-publications-row {
  padding: 0 80px 0 80px;
} */

.pg_index .theme-homepage-layout .ss-about-publications .ss-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.pg_index .theme-homepage-layout .ss-about-publications p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 12px 0;
  max-width: 700px;
}

/* ============================================
   ROW 5: Open Access
   ============================================ */
/* .pg_index .theme-homepage-layout .home-row5.open-access-row {
  padding: 0 80px;
} */

.pg_index .theme-homepage-layout .ss-open-access .ss-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.pg_index .theme-homepage-layout .ss-open-access p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 12px 0;
  max-width: 700px;
}

/* ============================================
   ROW 6: RSC News + Featured Collections
   ============================================ */
.pg_index .theme-homepage-layout .ss-subsection-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.pg_index .theme-homepage-layout .ss-news-list,
.pg_index .theme-homepage-layout .ss-collections-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.pg_index .theme-homepage-layout .ss-news-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #DDDDDD;
}

.pg_index .theme-homepage-layout .ss-news-thumb img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
}

.pg_index .theme-homepage-layout .ss-news-content {
  flex: 1;
  min-width: 0;
}

.pg_index .theme-homepage-layout .ss-news-link {
  font-size: 1rem;
  font-weight: 600;
  color: #004976;
  text-decoration: underline;
}

.pg_index .theme-homepage-layout .ss-news-excerpt {
  font-size: 1rem;
  color: #54585A;
  margin: 4px 0 0 0;
}

.pg_index .theme-homepage-layout .ss-collection-item {
  padding: 12px 0;
  border-bottom: 1px solid #DDDDDD;
}

.pg_index .theme-homepage-layout .ss-collection-link {
  font-size: 1rem;
  font-weight: 600;
  color: #004976;
  text-decoration: underline;
}

.pg_index .theme-homepage-layout .ss-collection-excerpt {
  font-size: 1rem;
  color: #54585A;
  margin: 4px 0 0 0;
}

/* ============================================
   ROW 7: Product Cards (Books, Databases, OA)
   ============================================ */
.pg_index .theme-homepage-layout .home-row7.products-row {
  background-color: #F4F4F4;
  padding: 64px 80px 64px 80px;
  }

/* .pg_index .theme-homepage-layout .home-row7.products-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  background-color: #F4F4F4;
  padding: 80px;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + 24px);
  padding-right: calc(50vw - 50% + 24px);
}

.pg_index .theme-homepage-layout .ss-product-card {
  color: #001D2F;
  background-color: #FFFFFF;
  border-radius: 8px;
  border-top: 4px solid #DDDDDD;
  overflow: hidden;
}

.pg_index .theme-homepage-layout .ss-product-card-image {
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.pg_index .theme-homepage-layout .ss-product-card-image img {
  width: 100%;
  height: 235px;
  object-fit: cover;
  display: block;
}

.pg_index .theme-homepage-layout .ss-product-card-title {
  font-family: 'Bitter', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px 0;
  color: #001D2F;
}

.pg_index .theme-homepage-layout .ss-product-card-description {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  color: #001D2F;
}

.pg_index .theme-homepage-layout .ss-product-card-body {
  padding: 24px;
}  */

/* ============================================
   ROW 8: Librarian Information
   ============================================ */
.pg_index .theme-homepage-layout .home-row8.librarian-info-row {
  padding: 64px 80px;
}

.pg_index .theme-homepage-layout .ss-librarian-info .ss-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.pg_index .theme-homepage-layout .ss-librarian-info p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px 0;
  max-width: 700px;
}

/* ============================================
   ROW 9: Become a Member
   ============================================ */
.pg_index .theme-homepage-layout .home-row9.become-member-row,
.pg_index .theme-homepage-layout .home-row10.Bottom-notice {
    padding: 0 80px 64px 80px;
}

.pg_index .theme-homepage-layout .ss-become-member .ss-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.pg_index .theme-homepage-layout .ss-become-member p {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px 0;
  max-width: 700px;
}

/* ============================================
   Shared Components
   ============================================ */

/* Section titles (used by Block title attribute) */
.pg_index .theme-homepage-layout > div[class*="row"]::before {
  display: none;
}

.pg_index .theme-homepage-layout > div[title]::before {
  content: attr(title);
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #001D2F;
}

/* Buttons */
.pg_index .theme-homepage-layout .ss-btn,
.pg_index .theme-homepage-layout .button {
  width: fit-content;
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pg_index .theme-homepage-layout .ss-btn-primary,
.pg_index .theme-homepage-layout .button {
  background-color: #004976;
  color: #FFFFFF;
  border: 2px solid #004976;
}

.pg_index .theme-homepage-layout .ss-btn-primary:hover,
.pg_index .theme-homepage-layout .button:hover {
  background-color: #001D2F;
  border-color: #001D2F;
  color: #FFFFFF; 
}

.pg_index .theme-homepage-layout .ss-btn-outline {
  background-color: transparent;
  color: #004976;
  border: 2px solid #004976;
}

.pg_index .theme-homepage-layout .ss-btn-outline:hover {
  color: #001D2F;
  border: 2px solid #001D2F;
}

/* Links */
.pg_index .theme-homepage-layout .widget-dynamic-browse a:link {
  font-size: 1rem;
  font-weight: 600;
  color: #004976;
  text-decoration: underline;
}

.pg_index .theme-homepage-layout .widget-dynamic-browse a:hover {
  color:#001D2F;
  text-decoration: underline;
}

.pg_index .theme-homepage-layout .ss-link {
  color: #004976;
  text-decoration: underline;
  font-weight: 600;
  font-size: 1rem;
}

.pg_index .theme-homepage-layout .ss-link:hover {
  color: #001D2F;
}

/* CTA button groups */
.pg_index .theme-homepage-layout .ss-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE: Tablet (768px and below)
   ============================================ */
@media (max-width: 768px) {
  /* --- Hero: stack vertically --- */
  .pg_index .theme-homepage-layout .ss-hero-banner,
  .pg_index .theme-homepage-layout .ss-hero-banner.ss-hero-journal {
    flex-direction: column;
  }

  .pg_index .theme-homepage-layout .ss-hero-content {
    flex: none;
    width: 100%;
    padding: 32px 24px;
  }

  .pg_index .theme-homepage-layout .ss-hero-image {
    flex: none;
    width: 100%;
    height: 250px;
  }

  .pg_index .theme-homepage-layout .ss-hero-title {
    font-size: 2rem;
  }

  .pg_index .theme-homepage-layout .ss-hero-search {
    max-width: 100%;
  }

  .pg_index .theme-homepage-layout .ss-hero-stat-value {
    font-size: 1.75rem;
  }

  /* --- About section (CS): stack --- */
  .pg_index .theme-homepage-layout .ss-about-journal {
    flex-direction: column;
    gap: 24px;
  }

  /* --- Journals grid: 2 columns --- */
  .pg_index .theme-homepage-layout .ss-journals-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* --- All two-column platform grids: stack --- */
  .pg_index .theme-homepage-layout .featured-articles-row .widget-dynamic-inner-wrap,
  .pg_index .theme-homepage-layout .news-collections-row .widget-dynamic-inner-wrap,
  .pg_index .theme-homepage-layout .current-issue-row .widget-dynamic-inner-wrap {
    display: block !important;
  }

  /* --- Product cards: stack --- */
  .pg_index .theme-homepage-layout .products-row .widget-dynamic-inner-wrap {
    display: block !important;
  }

  .pg_index .theme-homepage-layout .products-row .widget-dynamic-inner-wrap > div + div {
    margin-top: 24px;
  }

  /* --- Reduce row padding --- */
  .pg_index .theme-homepage-layout [class*="-row"]:not(.hero-row) {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .pg_index .theme-homepage-layout .hero-row {
    padding: 0 !important;
  }
}

/* ============================================
   RESPONSIVE: Small tablet (between 768px-1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .pg_index .theme-homepage-layout .ss-journals-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pg_index .theme-homepage-layout [class*="-row"]:not(.hero-row) {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

    .pg_viewlarge .table-wrap td>.content-image
    {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    }