/* ============================================================
   THE FAME ASCO MUMBAI — UI/UX Micro-Enhancements v1
   BBC-style editorial refinements
   ============================================================
   HOW TO USE:
   Upload this file to: /assets/css/
   Add ONE line in includes/header.php AFTER style.css:
   <link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/refinements.css">
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. HERO SECTION — Hierarchy & Contrast Improvements
────────────────────────────────────────────────────────── */

/* Deeper gradient for better text legibility on hero */
.hero-content {
  background: linear-gradient(
    to top,
    hsla(222, 47%, 4%, 0.97) 0%,
    hsla(222, 47%, 4%, 0.82) 45%,
    hsla(222, 47%, 4%, 0.35) 75%,
    transparent 100%
  ) !important;
  padding: 64px 32px 32px !important;
}

/* Hero headline — larger, tighter leading, stronger presence */
.hero-content h1 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 14px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Hero excerpt — slightly more visible */
.hero-content p {
  font-size: 0.95rem !important;
  color: rgba(240, 237, 232, 0.82) !important;
  line-height: 1.65 !important;
  max-width: 520px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Category tag — add micro backdrop blur for legibility */
.hero-content .category-tag {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 12px !important;
  display: inline-block;
}

/* Hero meta — refined spacing */
.hero-meta {
  margin-top: 14px !important;
  gap: 20px !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.3px;
}

/* Side hero cards — tighter overlay text */
.hero-side-body h3 {
  font-size: 0.88rem !important;
  line-height: 1.38 !important;
  letter-spacing: -0.1px;
}

/* ──────────────────────────────────────────────────────────
   2. ARTICLE CARDS — Spacing, Hierarchy & Hover
────────────────────────────────────────────────────────── */

/* Card — refined shadow and border */
.article-card {
  border-radius: 5px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.12) !important;
  transition:
    transform 0.28s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),
    border-color 0.28s ease !important;
}

/* Card hover — professional lift with directional shadow */
.article-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.22),
    0 4px 8px rgba(0,0,0,0.14) !important;
}

/* Card image — consistent 16:9 ratio */
.card-img-wrap {
  height: 190px !important;
  overflow: hidden;
}

/* Image zoom on hover — smoother */
.card-img-wrap img {
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
  transform-origin: center center;
}
.article-card:hover .card-img-wrap img {
  transform: scale(1.07) !important;
}

/* Card body — refined padding */
.card-body {
  padding: 16px 18px 18px !important;
}

/* Category label — refined */
.card-cat-label {
  font-size: 0.62rem !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 8px !important;
  display: block;
}

/* Card title — sharper hierarchy */
.card-body h3 {
  font-size: 1rem !important;
  line-height: 1.42 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.15px;
  /* Smooth color transition on hover */
  transition: color 0.2s ease !important;
}

/* Card excerpt */
.card-body p {
  font-size: 0.82rem !important;
  line-height: 1.58 !important;
  margin-bottom: 12px !important;
}

/* Card meta — author • date on one clean line */
.card-meta {
  font-size: 0.71rem !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  align-items: center !important;
  gap: 6px !important;
  color: #888 !important;
}
.card-meta-dot {
  color: var(--gold);
  font-size: 0.4rem !important;
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────
   3. CATEGORY SECTION HEADERS — Editorial Style
────────────────────────────────────────────────────────── */

/* Section heading — more editorial authority */
.section-heading h2,
.category-section-header h2 {
  font-size: 1.35rem !important;
  letter-spacing: -0.2px !important;
  line-height: 1.2 !important;
}

/* Red accent underline — make it more precise */
.section-heading {
  padding-bottom: 14px !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  position: relative;
}
.section-heading::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

/* Parallax section headers */
.category-section-header {
  padding-bottom: 16px !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.category-section-header h2 {
  position: relative;
}
.category-section-header h2::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gold);
}

/* Section spacing — breathe between sections */
.section-block    { padding: 48px 0 !important; }
.top-stories      { padding: 48px 0 !important; }
.category-parallax{ padding: 64px 0 !important; }
.category-flat    { padding: 48px 0 !important; }

/* ──────────────────────────────────────────────────────────
   4. TYPOGRAPHY HIERARCHY — Standardised Scale
────────────────────────────────────────────────────────── */

/* Article page title — strong editorial presence */
.article-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.6px !important;
  margin-bottom: 18px !important;
}

/* Article excerpt block */
.article-excerpt-block {
  font-size: 1.08rem !important;
  line-height: 1.72 !important;
  border-left-width: 3px !important;
  padding-left: 18px !important;
  margin-bottom: 28px !important;
  color: rgba(240,237,232,0.72) !important;
}

/* Article prose — readable body */
.article-prose {
  font-size: 1.05rem !important;
  line-height: 1.88 !important;
  letter-spacing: 0.01em;
}
.article-prose p {
  margin-bottom: 1.4em !important;
}

/* Article meta bar — clean typographic hierarchy */
.article-meta-bar .meta-inner {
  font-size: 0.8rem !important;
  gap: 20px !important;
  letter-spacing: 0.2px;
}

/* ──────────────────────────────────────────────────────────
   5. NAVIGATION — Micro Interactions
────────────────────────────────────────────────────────── */

/* Nav links — smoother hover with subtle background */
.nav-list li a {
  transition:
    color 0.2s ease,
    background 0.2s ease !important;
  padding: 14px 15px !important;
}

/* Underline indicator — use transform for smooth animation */
.nav-list li a::after {
  transition:
    left 0.25s cubic-bezier(0.4,0,0.2,1),
    right 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  height: 2px !important;
}

/* Top bar links — subtle hover */
.top-bar-right a {
  border-radius: 3px;
  transition: color 0.18s ease, background 0.18s ease !important;
}

/* Search input — focus ring */
.site-search-input:focus {
  box-shadow: 0 0 0 2px rgba(212,175,106,0.25) !important;
  outline: none !important;
}

/* Search button hover */
.site-search-btn {
  transition: background 0.18s ease, transform 0.15s ease !important;
}
.site-search-btn:hover {
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   6. BUTTONS — Consistent Micro Interactions
────────────────────────────────────────────────────────── */

/* Primary button — smooth lift */
.btn-primary {
  transition:
    background 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(212,175,106,0.28) !important;
}
.btn-primary:active {
  transform: translateY(0) !important;
}

/* Category tag — subtle hover */
.category-tag, .cat-badge {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.category-tag:hover, .cat-badge:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* View all links */
.view-all, .section-heading a {
  transition: opacity 0.18s ease, letter-spacing 0.18s ease !important;
}
.view-all:hover, .section-heading a:hover {
  opacity: 0.75;
  letter-spacing: 0.5px;
}

/* ──────────────────────────────────────────────────────────
   7. FOOTER — Structure & Clarity
────────────────────────────────────────────────────────── */

/* More vertical breathing room */
.site-footer {
  padding: 72px 0 0 !important;
  margin-top: 80px !important;
}

/* Footer grid columns — better proportions */
.footer-grid {
  gap: 52px !important;
  padding-bottom: 60px !important;
}

/* Footer links — refined hover */
.footer-links a {
  transition:
    color 0.18s ease,
    padding-left 0.18s ease !important;
  padding-left: 0 !important;
  line-height: 1.6;
}
.footer-links a:hover {
  padding-left: 6px !important;
}
.footer-links li {
  margin-bottom: 9px !important;
}

/* Footer social icons — smoother hover */
.social-icons a {
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}
.social-icons a:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

/* Footer bottom — better spacing */
.footer-bottom {
  padding: 22px 0 !important;
  letter-spacing: 0.3px !important;
}

/* ──────────────────────────────────────────────────────────
   8. VISUAL CONSISTENCY — Grid & Spacing
────────────────────────────────────────────────────────── */

/* Standardised grid gaps */
.articles-grid,
.article-grid {
  gap: 22px !important;
}
.articles-grid-3 {
  gap: 22px !important;
}
.articles-grid-4 {
  gap: 18px !important;
}

/* Page banners — refined */
.category-page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  letter-spacing: -0.4px !important;
  line-height: 1.18 !important;
}

/* Breadcrumb — cleaner */
.breadcrumb {
  font-size: 0.72rem !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 16px !important;
}

/* Alert messages — clean */
.alert {
  border-radius: 4px !important;
  font-size: 0.875rem !important;
}

/* Pagination — refined active state */
.page-btn {
  font-size: 0.8rem !important;
  padding: 8px 16px !important;
  border-radius: 3px !important;
  transition: all 0.18s ease !important;
}
.page-btn.active {
  box-shadow: 0 2px 8px rgba(200,16,46,0.3) !important;
}

/* ──────────────────────────────────────────────────────────
   9. LOADING SCREEN — Smoother appearance
────────────────────────────────────────────────────────── */

#site-loader {
  animation: none !important;
}
.loader-brand {
  animation: loaderPulse 1.4s ease-in-out infinite !important;
  font-size: 2.8rem !important;
  letter-spacing: -1px;
}

/* ──────────────────────────────────────────────────────────
   10. SCROLL-TO-TOP BUTTON — Professional feel
────────────────────────────────────────────────────────── */

#scrollTop {
  border-radius: 3px !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
#scrollTop:hover {
  transform: translateY(-3px) !important;
}

/* ──────────────────────────────────────────────────────────
   11. SIDEBAR (Article page) — Refinements
────────────────────────────────────────────────────────── */

.sidebar-widget {
  border-radius: 4px !important;
}
.sidebar-article {
  transition: transform 0.2s ease !important;
}
.sidebar-article:hover {
  transform: translateX(5px) !important;
}
.sidebar-article p {
  font-size: 0.83rem !important;
  line-height: 1.44 !important;
}

/* ──────────────────────────────────────────────────────────
   12. MAGAZINE SECTION — Refined book effect
────────────────────────────────────────────────────────── */

.mag-nav-btn {
  letter-spacing: 0.6px !important;
  font-size: 0.75rem !important;
}
.mag-thumb {
  transition:
    border-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease !important;
}
.mag-thumb:hover {
  transform: scale(1.05) !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE REFINEMENTS
────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .hero-content h1 { font-size: 1.5rem !important; }
  .article-title   { font-size: 1.7rem !important; }
  .section-block, .top-stories { padding: 36px 0 !important; }
}

@media (max-width: 640px) {
  .hero-content { padding: 48px 20px 24px !important; }
  .hero-content h1 { font-size: 1.3rem !important; }
  .card-body h3    { font-size: 0.95rem !important; }
  .articles-grid, .article-grid { gap: 16px !important; }
}