/* =========================================
   THE ARCHIVAL LEDGER (TABULAR BRUTALISM)
========================================= */

.page-hero-press {
  background-image: 
    linear-gradient(to top, var(--color-curtain-black) 0%, transparent 40%),
    url('../assets/images/backgrounds/press-release.webp');

  background-position: center 10%;
}

.press-ledger-section {
  position: relative;
  width: 100%;
  
  background-color: var(--color-bg);
  z-index: 10;
  
  margin-top: 70px;
}

.ledger-container {
  width: 92%;
  max-width: var(--container-width-lg);
  margin: 0 auto;
  
  background-color: var(--color-surface-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base);
}

body[data-theme="light"] .ledger-container {
  box-shadow: 0 8px 24px rgba(26, 10, 14, 0.08);
}

/* --- THE GRID DEFINITION --- */
.ledger-header, 
.ledger-row {
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
}

/* --- THE HEADER ROW --- */
.ledger-header {
  position: sticky;
  top: 80px;
  z-index: 5;
  background-color: var(--color-surface-primary); /* Prevents rows from showing through the header */
  
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border-bottom: 2px solid var(--color-border-strong);
  
  font-family: var(--font-body);
  color: var(--color-antique-gold);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* --- THE DATA ROWS --- */
.ledger-row {
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 1fr;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  
  border-bottom: 1px solid var(--color-border-subtle);
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease;
  cursor: pointer;
}

.ledger-row:hover {
  background-color: var(--color-surface-elevated);
  border-bottom-color: var(--color-antique-gold);
}

/* --- ROW TYPOGRAPHY --- */
.ledger-col {
  display: flex;
  align-items: center;
}

.date-col {
  font-family: var(--font-heading);
  color: var(--color-text-secondary);
  font-size: 1.5rem;
}

.pub-col {
  font-family: var(--font-heading);
  color: var(--color-antique-gold);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.title-col {
  position: relative;
  overflow: hidden;
  width: 100%;
  
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-size: 1.8rem;
}

.title-col.is-overflowing {
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.title-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

.row-element {
  font-family: var(--font-body);
  font-size: 1.4rem;
}

/* --- THE HOVER ACTION (ARROW) --- */
.action-col {
  justify-content: flex-end; /* Pushes the arrow to the far right edge */
  font-family: var(--font-heading);
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow slides right and turns gold on hover */
.ledger-row:hover .action-col {
  color: var(--color-antique-gold);
  transform: translateX(10px);
}

/* =========================================
   LEDGER SORTING UI
========================================= */

.sortable {
  cursor: pointer;
  user-select: none; /* Prevents text highlighting when clicking rapidly */
  transition: color 0.3s ease;
}

.sortable:hover {
  color: var(--color-antique-gold);
}

/* The Arrow Icon */
.sort-icon {
  display: inline-block;
  margin-left: 8px;
  font-family: sans-serif; /* Ensures the arrow renders cleanly */
  font-size: 1.2rem;
  opacity: 0; /* Hidden by default */
  transform: translateY(0) rotate(0deg);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sort-icon::after {
  content: '↓'; /* Default descending arrow */
}

/* Show a faint arrow on hover to indicate clickability */
.sortable:hover .sort-icon {
  opacity: 0.4;
}

/* Active State Physics */
.sortable.is-active {
  color: var(--color-text-primary);
}

.sortable.is-active .sort-icon {
  opacity: 1;
}

/* Flip the arrow when sorting Ascending */
.sortable.is-active.asc .sort-icon {
  transform: rotate(180deg);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
  /* Hide the Date column on tablets to save space */
  .ledger-header, 
  .ledger-row {
    grid-template-columns: 2fr 4fr 1fr; 
  }
  .date-col {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Transform into a stacked card format on phones */
  .ledger-header {
    display: none; /* Hide the structural header entirely on mobile */
  }
  
  .ledger-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xl) var(--space-md);
  }

  .title-col {
    font-size: 1.4rem;
    white-space: normal; /* Allow text to wrap on small screens */
  }
  
  .action-col {
    width: 100%;
    justify-content: flex-start; /* Move arrow to the left under the text */
    margin-top: var(--space-md);
  }
  
  .ledger-row:hover .action-col {
    transform: translateX(5px);
  }
}