/* News Cards Component - Reusable Styles */
/* Jinan University - Professional News Card Component */

/* News Section Styling */
.news-section {
  padding: 4rem 0;
  background-color: var(--light-grey);
}

.news-section.bg-light {
  background-color: var(--light-grey);
}

.news-section.bg-white {
  background-color: var(--white);
}

/* News section without background */
.news-section.section {
  background-color: transparent;
}

/* Section Title with increased spacing */
.news-section .section-title {
  margin-bottom: 3.5rem; /* Increased from default 2.5rem */
}

/* Additional spacing for news cards grid */
.news-section .row {
  margin-top: 1rem; /* Extra space after title */
}

/* News Cards Grid */
.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Individual News Card */
.news-card {
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(var(--jinan-teal-rgb), 0.08), 0 1px 2px rgba(var(--jinan-teal-rgb), 0.04);
  border: 1px solid rgba(var(--jinan-teal-rgb), 0.06);
  transition: transform 280ms cubic-bezier(.2,.9,.3,1), box-shadow 280ms cubic-bezier(.2,.9,.3,1), border-color 280ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Card reveals a gold accent stripe from the start edge on hover.
   Replaces the generic translateY+shadow pattern with something brand-specific. */
.news-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--jinan-gold, var(--jinan-gold));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms cubic-bezier(.2,.9,.3,1);
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(var(--jinan-teal-rgb), 0.12), 0 4px 12px rgba(var(--jinan-teal-rgb), 0.06);
  border-color: rgba(var(--jinan-teal-rgb), 0.14);
}

.news-card:hover::before { transform: scaleY(1); }

/* Image zooms slightly inside its frame — adds depth without moving the card much */
.news-card .card-img-top { transition: transform 600ms cubic-bezier(.2,.9,.3,1); }
.news-card:hover .card-img-top { transform: scale(1.04); }

/* News Card Image Container */
.card-img-top-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .card-img-top {
  transform: scale(1.05);
}

/* News Card Body */
.news-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body.d-flex.flex-column {
  /* Trimmed top padding so the title sits closer to the image. */
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* News Card Title.
   Scoped to .card-body to defeat sp-base.bundle.min.css's generic
   `.card-title` rule, which has the same specificity (0,1,0) but
   loads AFTER page-home.bundle and was winning the cascade tie —
   pulling home-page cards back to font-size:1.1rem / no centering.
   `.card-body .card-title` is (0,2,1), so it wins everywhere
   regardless of bundle load order. */
.news-card-title,
.card-body .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-teal);
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  min-height: calc(1.4em * 2);
  max-height: calc(1.4em * 2);
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  align-content: center;
}

/* News Card Date.
   Bootstrap's .mb-2 utility adds `margin-bottom: 0.5rem !important`
   on the date <p>, which was winning over my plain 0.25rem rule.
   !important required to actually compress the date→body gap. */
.news-card-date,
.card-body .card-text.text-muted.small {
  color: var(--medium-grey);
  font-size: 0.875rem;
  margin-bottom: 0.25rem !important;
  font-weight: 500;
}

/* News Card Content */
/* sp-base.bundle.min.css has `.card.h-100 .card-body .card-text { flex: 1 }`
   which stretches BOTH the date <p> and the body <p> vertically — they
   share leftover card height, producing the ~80px void above the date
   that the tester kept seeing. Override with a higher-specificity
   selector (adds the .text-muted / .flex-grow-1 compound class) and
   !important to also beat Bootstrap utilities. Net behaviour:
     - Date takes content height (1 line)
     - Body takes content height capped at 3lh by max-height below
     - All content stacks compactly at top of card
     - Any unused card height accumulates at the bottom (mostly hidden
       because Bootstrap row equalises card heights to the tallest). */
.card.h-100 .card-body .card-text.text-muted,
.card.h-100 .card-body .card-text.flex-grow-1 {
  flex: 0 0 auto !important;
}

.news-card-content,
.card-body .card-text.flex-grow-1 {
  color: var(--dark-charcoal);
  line-height: 1.6;
  margin-bottom: 1rem;
  /* Keep Bootstrap's flex-grow: 1 (we tried fighting it but the
     combination of -webkit-box + flex-grow:0 + flex-shrink:1 in a
     flex-column parent collapsed the box to 0 height, completely
     hiding the body excerpt). max-height: 3lh below caps growth
     at 3 lines anyway, so flex-grow only fills space when the body
     is shorter than 3 lines — fine. The gap tester reported is
     killed via the button's `mt-auto` override (see below). */
  flex-grow: 1;
  /* Belt-and-braces clamp: max-height in `lh` units (= line-height
     ratio) so the box height is *exactly* 3 lines regardless of what
     .artxt/.card-rtl override line-height to. -webkit-line-clamp is
     kept as the truncation mechanism. mask-image fades the bottom
     edge so any sub-pixel intersection between line baseline and
     clip rect reads as a deliberate fade instead of half-glyphs. */
  max-height: 3lh;
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

/* News Card Button.
   Override Bootstrap's `mt-auto !important` (which was pushing the
   button to the bottom of the card and leaving a tall gap between
   body and button). We want the button to sit IMMEDIATELY beneath
   the body excerpt, with any leftover card height accumulating at
   the *bottom* of the card instead. */
.card-body .btn.mt-auto {
  margin-top: 0 !important;
}
.news-card-btn,
.btn.btn-outline-primary.align-self-start.mt-auto {
  background-color: transparent;
  border: 2px solid var(--dark-teal);
  color: var(--dark-teal);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.news-card-btn:hover,
.btn.btn-outline-primary.align-self-start.mt-auto:hover {
  background-color: var(--dark-teal);
  color: var(--white);
  transform: translateY(-1px);
}

/* See All News Button */
.see-all-news-btn {
  background-color: var(--dark-teal);
  border: none;
  color: var(--white);
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.see-all-news-btn:hover {
  background-color: var(--darker-teal);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.see-all-news-btn i {
  transition: transform 0.3s ease;
}

.see-all-news-btn:hover i {
  transform: translateX(5px);
}

/* RTL Support — per-card direction flip.
   When a news item's body is Arabic but the page is in EN (or vice versa),
   the parent .card gets dir="rtl" / class="card-rtl" so the whole card
   reads logically: text-align: start naturally flips, padding/margins
   on logical sides flow correctly, and the Read More button anchors to
   the card's leading edge (the right edge in RTL). */
.news-card-title.artxt,
.news-card-date.artxt,
.news-card-content.artxt,
.card.card-rtl .card-title,
.card.card-rtl .card-text,
.card.card-rtl .card-body {
  text-align: start;          /* logical — flips with dir="rtl" */
}

/* Arabic text needs slightly more breathing room than the old Latin
   font called for. The new wordmark/body fonts pack glyphs tighter,
   so titles felt crowded — open them up a touch. The clamp's max-height
   is bumped in lock-step so the second Arabic line doesn't get cut. */
.card.card-rtl .card-title,
.card-title.artxt {
  line-height: 1.55;
  letter-spacing: 0;
  word-spacing: 0.02em;
  max-height: calc(1.55em * 2);
}
.card.card-rtl .card-text,
.card-text.artxt {
  line-height: 1.85;
  word-spacing: 0.02em;
}

/* Push the Read More button to the leading edge in RTL cards.
   align-self-start in Bootstrap is `align-self: flex-start` which is a
   logical-physical mix; force it with margin-inline-start: 0 so the
   button hugs the start (left in LTR, right in RTL). */
.card.card-rtl .btn-outline-primary {
  align-self: flex-start;
  margin-inline-start: 0;
}

html[data-lang="ar"] .news-card-title,
html[data-lang="ar"] .news-card-date,
html[data-lang="ar"] .news-card-content {
  text-align: end;
  direction: rtl;
}

html[data-lang="ar"] .see-all-news-btn {
  flex-direction: row-reverse;
}

html[data-lang="ar"] .see-all-news-btn:hover i {
  transform: translateX(-5px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .news-section {
    padding: 3rem 0;
  }

  .news-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .card-img-top-container {
    height: 180px;
  }

  .news-card-body,
  .card-body.d-flex.flex-column {
    padding: 1.25rem;
  }

  .news-card-title,
  .card-title {
    font-size: 1.1rem;
  }

  .see-all-news-btn {
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .news-section {
    padding: 2rem 0;
  }

  .card-img-top-container {
    height: 160px;
  }

  .news-card-body,
  .card-body.d-flex.flex-column {
    padding: 1rem;
  }

  .news-card-title,
  .card-title {
    font-size: 1rem;
    -webkit-line-clamp: 3;
  }

  .news-card-content,
  .card-text.flex-grow-1 {
    -webkit-line-clamp: 2;
    margin-bottom: 1.1rem;
  }
}

/* Bootstrap Override for Consistency */
.card.h-100 {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
}

.card.h-100:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Loading State */
.news-loading {
  text-align: center;
  padding: 3rem 0;
  color: var(--medium-grey);
}

.news-loading .spinner-border {
  color: var(--dark-teal);
}

/* Empty State */
.news-empty {
  text-align: center;
  padding: 3rem 0;
  color: var(--medium-grey);
}

.news-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--light-grey);
}

.news-empty h4 {
  color: var(--dark-charcoal);
  margin-bottom: 0.5rem;
}