/* ==========================================================================
   assets/layout.css
   AngolaPod — Design System & Layout
   Implements UI Specification v1.0 — Section 2: Design Principles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Principle: Consistency
   CSS Custom Properties — Single source of truth for all design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colours */
  --ap-bg-primary:      #0F0F11;
  --ap-bg-secondary:    #141417;
  --ap-bg-surface:      #1A1A1E;
  --ap-bg-elevated:     #222226;

  --ap-accent:          #E4001B;   /* AngolaPod brand red */
  --ap-accent-hover:    #FF1A33;

  --ap-text-primary:    #F4F4F5;   /* zinc-100 */
  --ap-text-secondary:  #A1A1AA;   /* zinc-400 */
  --ap-text-muted:      #71717A;   /* zinc-500 */

  --ap-border:          rgba(255, 255, 255, 0.08);
  --ap-border-strong:   rgba(255, 255, 255, 0.16);

  --ap-glass-bg:        rgba(255, 255, 255, 0.06);
  --ap-glass-border:    rgba(255, 255, 255, 0.12);

  /* Typography — Design Principle: Editorial First */
  --ap-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ap-font-display:    'Inter', Georgia, serif;

  --ap-text-xs:         0.75rem;
  --ap-text-sm:         0.875rem;
  --ap-text-base:       1rem;
  --ap-text-lg:         1.125rem;
  --ap-text-xl:         1.25rem;
  --ap-text-2xl:        1.5rem;
  --ap-text-3xl:        1.875rem;
  --ap-text-4xl:        2.25rem;
  --ap-text-5xl:        3rem;

  --ap-leading-tight:   1.25;
  --ap-leading-normal:  1.6;       /* Accessibility: comfortable line-height */
  --ap-leading-relaxed: 1.75;

  /* Spacing */
  --ap-space-1:   0.25rem;
  --ap-space-2:   0.5rem;
  --ap-space-3:   0.75rem;
  --ap-space-4:   1rem;
  --ap-space-6:   1.5rem;
  --ap-space-8:   2rem;
  --ap-space-12:  3rem;
  --ap-space-16:  4rem;

  /* Layout — UI Spec Section 3 */
  --ap-max-width:       1440px;    /* Spec: Maximum Content Width */
  --ap-container:       1280px;    /* Spec: Content Container */
  --ap-header-height:   4rem;

  /* Radius */
  --ap-radius-sm:   0.25rem;
  --ap-radius-md:   0.5rem;
  --ap-radius-lg:   0.75rem;
  --ap-radius-xl:   1rem;
  --ap-radius-full: 9999px;

  /* Shadows */
  --ap-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --ap-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --ap-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);

  /* Transitions — Design Principle: Speed */
  --ap-transition-fast:   150ms ease;
  --ap-transition-normal: 250ms ease;
  --ap-transition-slow:   400ms ease;

  /* Accessibility: Focus ring */
  --ap-focus-ring: 2px solid var(--ap-accent);
  --ap-focus-offset: 3px;
}

/* --------------------------------------------------------------------------
   Design Principle: Mobile First
   Base reset & global styles — mobile defaults, desktop enhanced
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* Design Principle: Accessibility — base font size */
  font-size: 16px;
}

body {
  /* Design Principle: Editorial First — Inter for premium editorial experience */
  font-family: var(--ap-font-sans);
  font-size: var(--ap-text-base);
  line-height: var(--ap-leading-normal);
  color: var(--ap-text-primary);
  background-color: var(--ap-bg-primary);

  /* Design Principle: Minimal Design — clean antialiased rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;  /* Dynamic viewport height — Mobile First */

  /* Design Principle: Content Before Decoration — content is primary */
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Design Principle: Accessibility
   Skip to content link — visible on keyboard focus only
   -------------------------------------------------------------------------- */
.ap-skip-link {
  position: absolute;
  top: -100%;
  left: var(--ap-space-4);
  z-index: 9999;
  padding: var(--ap-space-2) var(--ap-space-4);
  background: var(--ap-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--ap-text-sm);
  border-radius: var(--ap-radius-md);
  text-decoration: none;
  transition: top var(--ap-transition-fast);
}

.ap-skip-link:focus {
  top: var(--ap-space-4);
  outline: var(--ap-focus-ring);
  outline-offset: var(--ap-focus-offset);
}

/* --------------------------------------------------------------------------
   Design Principle: Accessibility — Focus states
   Every interactive element must have a visible focus indicator
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--ap-focus-ring);
  outline-offset: var(--ap-focus-offset);
  border-radius: var(--ap-radius-sm);
}

/* Remove outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ap-focus-ring);
  outline-offset: var(--ap-focus-offset);
}

/* --------------------------------------------------------------------------
   Design Principle: Accessibility — Screen reader utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --------------------------------------------------------------------------
   Design Principle: Editorial First
   Semantic HTML5 landmark styles
   -------------------------------------------------------------------------- */
#root {
  display: contents; /* React root is transparent — landmarks from index.php take effect */
}

/* --------------------------------------------------------------------------
   Design Principle: Consistency
   Site-wide layout container
   Spec Section 3: Max 1440px viewport, 1280px content container
   -------------------------------------------------------------------------- */
.ap-container {
  width: 100%;
  max-width: var(--ap-container);  /* 1280px */
  margin-inline: auto;
  padding-inline: var(--ap-space-4);  /* Mobile: 16px padding */
}

/* Tablet */
@media (min-width: 768px) {
  .ap-container {
    padding-inline: var(--ap-space-6);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .ap-container {
    padding-inline: var(--ap-space-8);
  }
}

/* Full viewport cap at 1440px */
.ap-viewport-cap {
  max-width: var(--ap-max-width);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Design Principle: Consistency
   Grid system — Section 3: 4-col Mobile / 8-col Tablet / 12-col Desktop
   -------------------------------------------------------------------------- */
.ap-grid {
  display: grid;
  gap: var(--ap-space-4);
  /* Mobile First: 4-column grid */
  grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 8-column grid */
@media (min-width: 768px) {
  .ap-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--ap-space-6);
  }
}

/* Desktop: 12-column grid */
@media (min-width: 1024px) {
  .ap-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ap-space-8);
  }
}

/* --------------------------------------------------------------------------
   Design Principle: Editorial First — Typography scale
   Content Before Decoration — text is the primary element
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ap-font-display);
  line-height: var(--ap-leading-tight);
  font-weight: 700;
  color: var(--ap-text-primary);
  /* Design Principle: Content Before Decoration */
  margin: 0;
}

p {
  line-height: var(--ap-leading-relaxed);
  color: var(--ap-text-secondary);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ap-transition-fast);
}

/* --------------------------------------------------------------------------
   Design Principle: Accessibility
   Minimum touch target size (48px) for interactive elements on mobile
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  button,
  [role="button"],
  a.ap-btn,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --------------------------------------------------------------------------
   Design Principle: Accessibility
   Respect user preference for reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Design Principle: Accessibility
   High-contrast mode support
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .ap-skip-link {
    border: 2px solid ButtonText;
  }
}

/* --------------------------------------------------------------------------
   Design Principle: Speed
   Image optimisation defaults
   -------------------------------------------------------------------------- */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
  /* Prevent layout shift */
  content-visibility: auto;
}

/* --------------------------------------------------------------------------
   Design Principle: Minimal Design
   Scrollbar styling — subtle, non-intrusive
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ap-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--ap-border-strong);
  border-radius: var(--ap-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ap-text-muted);
}

/* --------------------------------------------------------------------------
   Design Principle: Simplicity
   Text selection colour — brand consistent
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--ap-accent);
  color: #fff;
}


/* ==========================================================================
   SECTION 4 — Header
   UI Spec: Logo | Primary Nav | Search | Newsletter CTA | Mobile Menu
   Behaviour: Horizontal (desktop) | Collapsed (tablet) | Hamburger (mobile)
   Optional sticky header
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 4: Base Header Layout
   -------------------------------------------------------------------------- */
.ap-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--ap-header-height);
  background: rgba(15, 15, 17, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ap-border);
  transition: background var(--ap-transition-normal),
              box-shadow var(--ap-transition-normal);
}

/* Sticky: elevate header when scrolled */
.ap-header.is-scrolled {
  background: rgba(15, 15, 17, 0.98);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  border-bottom-color: var(--ap-border-strong);
}

.ap-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--ap-container);
  margin-inline: auto;
  padding-inline: var(--ap-space-4);
  gap: var(--ap-space-4);
}

/* --------------------------------------------------------------------------
   Section 4: Logo
   -------------------------------------------------------------------------- */
.ap-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  font-weight: 900;
  font-size: var(--ap-text-xl);
  letter-spacing: -0.03em;
  color: var(--ap-text-primary);
  transition: opacity var(--ap-transition-fast);
}

.ap-header__logo:hover {
  opacity: 0.85;
}

.ap-header__logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Section 4: Desktop — Horizontal Primary Navigation
   -------------------------------------------------------------------------- */
.ap-nav {
  display: none; /* Mobile First: hidden by default */
  align-items: center;
  gap: 0;
  flex: 1;
  padding-inline: var(--ap-space-6);
}

.ap-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--ap-space-2) var(--ap-space-3);
  font-size: var(--ap-text-sm);
  font-weight: 500;
  color: var(--ap-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ap-transition-fast);
  border-radius: var(--ap-radius-md);
}

.ap-nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--ap-space-3);
  right: var(--ap-space-3);
  height: 2px;
  background: var(--ap-accent);
  border-radius: var(--ap-radius-full);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ap-transition-fast);
}

.ap-nav__link:hover,
.ap-nav__link:focus-visible {
  color: var(--ap-text-primary);
}

.ap-nav__link:hover::after,
.ap-nav__link.is-active::after {
  transform: scaleX(1);
}

.ap-nav__link.is-active {
  color: var(--ap-text-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Section 4: Header Actions (Search + Newsletter CTA)
   -------------------------------------------------------------------------- */
.ap-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ap-space-2);
  flex-shrink: 0;
}

/* Search button */
.ap-header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--ap-radius-full);
  background: transparent;
  color: var(--ap-text-secondary);
  cursor: pointer;
  transition: color var(--ap-transition-fast),
              background var(--ap-transition-fast);
}

.ap-header__search-btn:hover {
  color: var(--ap-text-primary);
  background: var(--ap-glass-bg);
}

/* Newsletter CTA — hidden on small mobile, visible from sm */
.ap-header__newsletter-cta {
  display: none;
  align-items: center;
  gap: var(--ap-space-1);
  padding: var(--ap-space-2) var(--ap-space-4);
  background: var(--ap-accent);
  color: #fff;
  font-size: var(--ap-text-sm);
  font-weight: 600;
  border-radius: var(--ap-radius-full);
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background var(--ap-transition-fast),
              transform var(--ap-transition-fast);
}

.ap-header__newsletter-cta:hover {
  background: var(--ap-accent-hover);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Section 4: Mobile — Hamburger Button
   -------------------------------------------------------------------------- */
.ap-hamburger {
  display: flex;       /* Visible on mobile */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--ap-space-2);
  border: none;
  border-radius: var(--ap-radius-md);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--ap-transition-fast);
}

.ap-hamburger:hover {
  background: var(--ap-glass-bg);
}

.ap-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ap-text-primary);
  border-radius: var(--ap-radius-full);
  transition: transform var(--ap-transition-normal),
              opacity var(--ap-transition-fast),
              width var(--ap-transition-normal);
  transform-origin: center;
}

/* Open state — bars animate into X */
.ap-hamburger[aria-expanded="true"] .ap-hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.ap-hamburger[aria-expanded="true"] .ap-hamburger__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.ap-hamburger[aria-expanded="true"] .ap-hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Section 4: Mobile Menu Overlay
   -------------------------------------------------------------------------- */
.ap-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--ap-bg-primary);
  transform: translateX(100%);
  transition: transform var(--ap-transition-slow);
  overflow-y: auto;
  padding-top: var(--ap-header-height);
}

.ap-mobile-menu.is-open {
  transform: translateX(0);
}

.ap-mobile-menu__inner {
  padding: var(--ap-space-6) var(--ap-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-1);
}

.ap-mobile-menu__link {
  display: flex;
  align-items: center;
  padding: var(--ap-space-4) var(--ap-space-3);
  font-size: var(--ap-text-lg);
  font-weight: 600;
  color: var(--ap-text-secondary);
  text-decoration: none;
  border-radius: var(--ap-radius-lg);
  border-bottom: 1px solid var(--ap-border);
  transition: color var(--ap-transition-fast),
              background var(--ap-transition-fast),
              padding-left var(--ap-transition-fast);
}

.ap-mobile-menu__link:hover,
.ap-mobile-menu__link.is-active {
  color: var(--ap-text-primary);
  background: var(--ap-glass-bg);
  padding-left: var(--ap-space-6);
}

.ap-mobile-menu__link.is-active {
  color: var(--ap-accent);
}

/* Mobile menu backdrop */
.ap-mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ap-transition-normal);
}

.ap-mobile-menu-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Section 4: Responsive breakpoints
   -------------------------------------------------------------------------- */
/* Tablet (768px): Show newsletter CTA, collapse nav */
@media (min-width: 768px) {
  .ap-header__newsletter-cta {
    display: flex;
  }

  .ap-header__inner {
    padding-inline: var(--ap-space-6);
  }
}

/* Desktop (1024px): Show full nav, hide hamburger */
@media (min-width: 1024px) {
  .ap-nav {
    display: flex;
  }

  .ap-hamburger {
    display: none;
  }

  .ap-header__inner {
    padding-inline: var(--ap-space-8);
  }
}


/* ==========================================================================
   SECTION 5 — Navigation
   UI Spec: Primary Menu (9 items) | Secondary Nav (Breadcrumbs, Prev/Next, Related, Category)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 5: Breadcrumbs — Secondary Navigation
   -------------------------------------------------------------------------- */
.ap-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ap-space-1);
  padding: var(--ap-space-3) 0;
  font-size: var(--ap-text-sm);
  color: var(--ap-text-muted);
  list-style: none;
  margin: 0;
}

.ap-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--ap-space-1);
}

/* Separator chevron */
.ap-breadcrumb__item + .ap-breadcrumb__item::before {
  content: '/';
  color: var(--ap-border-strong);
  font-size: var(--ap-text-xs);
}

.ap-breadcrumb__link {
  color: var(--ap-text-muted);
  text-decoration: none;
  transition: color var(--ap-transition-fast);
  white-space: nowrap;
}

.ap-breadcrumb__link:hover {
  color: var(--ap-text-primary);
}

/* Current page — not a link */
.ap-breadcrumb__item[aria-current="page"] {
  color: var(--ap-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* --------------------------------------------------------------------------
   Section 5: Previous / Next Article Navigation
   -------------------------------------------------------------------------- */
.ap-article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ap-space-4);
  padding: var(--ap-space-8) 0;
  border-top: 1px solid var(--ap-border);
  margin-top: var(--ap-space-8);
}

.ap-article-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-2);
  padding: var(--ap-space-4);
  background: var(--ap-bg-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  text-decoration: none;
  transition: border-color var(--ap-transition-fast),
              background var(--ap-transition-fast),
              transform var(--ap-transition-fast);
}

.ap-article-nav__item:hover {
  border-color: var(--ap-accent);
  background: var(--ap-bg-elevated);
  transform: translateY(-2px);
}

.ap-article-nav__item--next {
  text-align: right;
}

.ap-article-nav__label {
  font-size: var(--ap-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ap-accent);
}

.ap-article-nav__title {
  font-size: var(--ap-text-sm);
  font-weight: 600;
  color: var(--ap-text-primary);
  line-height: var(--ap-leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
  .ap-article-nav {
    grid-template-columns: 1fr;
  }

  .ap-article-nav__item--next {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Section 5: Category Navigation Bar
   -------------------------------------------------------------------------- */
.ap-category-nav {
  display: flex;
  align-items: center;
  gap: var(--ap-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--ap-space-2);
}

.ap-category-nav::-webkit-scrollbar {
  display: none;
}

.ap-category-nav__item {
  display: inline-flex;
  align-items: center;
  padding: var(--ap-space-2) var(--ap-space-4);
  font-size: var(--ap-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-text-muted);
  background: var(--ap-bg-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-full);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ap-transition-fast),
              background var(--ap-transition-fast),
              border-color var(--ap-transition-fast);
}

.ap-category-nav__item:hover,
.ap-category-nav__item.is-active {
  color: #fff;
  background: var(--ap-accent);
  border-color: var(--ap-accent);
}


/* ==========================================================================
   SECTION 6 — Hero Section
   UI Spec: Featured Image | Category | Headline | Summary | Author |
            Reading Time | Publication Date | Primary CTA | Secondary CTA
   Requirement: Homepage only | Responsive image | Readable text | Visible CTAs
   ========================================================================== */

.ap-hero {
  position: relative;
  width: 100%;
  /* Mobile: min 70vh, Desktop: min 80vh */
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ap-bg-secondary);
}

/* --------------------------------------------------------------------------
   Section 6: Featured Image — scales responsively
   -------------------------------------------------------------------------- */
.ap-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Performance */
  will-change: transform;
  transition: transform 0.8s ease;
}

/* Subtle parallax on hover (desktop only) */
@media (hover: hover) {
  .ap-hero:hover .ap-hero__image {
    transform: scale(1.02);
  }
}

/* --------------------------------------------------------------------------
   Section 6: Gradient overlay — text must remain readable
   -------------------------------------------------------------------------- */
.ap-hero__overlay {
  position: absolute;
  inset: 0;
  /* Multi-stop gradient: strong at bottom, transparent at top */
  background: linear-gradient(
    to top,
    rgba(10, 10, 12, 0.98) 0%,
    rgba(10, 10, 12, 0.85) 30%,
    rgba(10, 10, 12, 0.4)  60%,
    rgba(10, 10, 12, 0.1)  100%
  );
}

/* --------------------------------------------------------------------------
   Section 6: Hero Content — Editorial layout
   -------------------------------------------------------------------------- */
.ap-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ap-container);
  margin-inline: auto;
  padding: var(--ap-space-8) var(--ap-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-4);
}

/* Category tag */
.ap-hero__category {
  display: inline-flex;
  align-items: center;
  padding: var(--ap-space-1) var(--ap-space-3);
  background: var(--ap-accent);
  color: #fff;
  font-size: var(--ap-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--ap-radius-sm);
  width: fit-content;
}

/* Headline — primary visual element per Design Principles */
.ap-hero__title {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ap-text-primary);
  /* Max 2 lines on mobile, more on desktop */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .ap-hero__title {
    -webkit-line-clamp: 3;
  }
}

/* Summary */
.ap-hero__summary {
  font-size: clamp(var(--ap-text-base), 1.5vw, var(--ap-text-lg));
  line-height: var(--ap-leading-relaxed);
  color: rgba(244, 244, 245, 0.8);
  max-width: 640px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Section 6: Author + Meta row (Author | Reading Time | Date)
   -------------------------------------------------------------------------- */
.ap-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ap-space-3);
}

.ap-hero__author {
  display: flex;
  align-items: center;
  gap: var(--ap-space-2);
}

.ap-hero__author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ap-radius-full);
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.ap-hero__author-name {
  font-size: var(--ap-text-sm);
  font-weight: 600;
  color: var(--ap-text-primary);
}

/* Dot separator between meta items */
.ap-hero__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: var(--ap-radius-full);
  background: var(--ap-text-muted);
  flex-shrink: 0;
}

.ap-hero__read-time,
.ap-hero__date {
  font-size: var(--ap-text-sm);
  color: var(--ap-text-muted);
  display: flex;
  align-items: center;
  gap: var(--ap-space-1);
}

/* --------------------------------------------------------------------------
   Section 6: CTA Buttons — must remain visible
   -------------------------------------------------------------------------- */
.ap-hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ap-space-3);
  padding-top: var(--ap-space-2);
}

/* Primary CTA — filled */
.ap-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-2);
  padding: var(--ap-space-3) var(--ap-space-6);
  background: var(--ap-accent);
  color: #fff;
  font-size: var(--ap-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--ap-radius-full);
  text-decoration: none;
  border: 2px solid var(--ap-accent);
  cursor: pointer;
  transition: background var(--ap-transition-fast),
              transform var(--ap-transition-fast),
              box-shadow var(--ap-transition-fast);
  white-space: nowrap;
}

.ap-btn-primary:hover {
  background: var(--ap-accent-hover);
  border-color: var(--ap-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(228, 0, 27, 0.4);
}

.ap-btn-primary:active {
  transform: translateY(0);
}

/* Secondary CTA — outlined */
.ap-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--ap-space-2);
  padding: var(--ap-space-3) var(--ap-space-6);
  background: transparent;
  color: var(--ap-text-primary);
  font-size: var(--ap-text-sm);
  font-weight: 600;
  border-radius: var(--ap-radius-full);
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: border-color var(--ap-transition-fast),
              background var(--ap-transition-fast),
              transform var(--ap-transition-fast);
  white-space: nowrap;
}

.ap-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Section 6: Responsive Hero
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ap-hero {
    min-height: 75svh;
  }

  .ap-hero__content {
    padding: var(--ap-space-12) var(--ap-space-6);
    max-width: 780px;
  }
}

@media (min-width: 1024px) {
  .ap-hero {
    min-height: 80svh;
  }

  .ap-hero__content {
    padding: var(--ap-space-16) var(--ap-space-8);
    max-width: 860px;
  }
}

/* Viewport cap at 1440px */
@media (min-width: 1440px) {
  .ap-hero {
    max-height: 90vh;
  }
}


/* ==========================================================================
   SECTION 7 — Article Cards (Small | Medium | Large)
   ========================================================================== */
.ap-card{position:relative;display:flex;flex-direction:column;background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-lg);overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;transition:border-color var(--ap-transition-fast),box-shadow var(--ap-transition-fast),transform var(--ap-transition-fast)}
@media(hover:hover){.ap-card:hover{border-color:var(--ap-border-strong);box-shadow:var(--ap-shadow-lg);transform:translateY(-3px)}.ap-card:hover .ap-card__img{transform:scale(1.05)}}
.ap-card__img-wrap{overflow:hidden;flex-shrink:0}
.ap-card__img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;display:block}
.ap-card__category{display:inline-flex;align-items:center;padding:2px var(--ap-space-2);background:var(--ap-accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;width:fit-content}
.ap-card__body{display:flex;flex-direction:column;gap:var(--ap-space-2);flex:1;padding:var(--ap-space-4)}
.ap-card__headline{font-size:var(--ap-text-base);font-weight:700;line-height:var(--ap-leading-tight);color:var(--ap-text-primary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ap-card__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-space-2);margin-top:auto;padding-top:var(--ap-space-2)}
.ap-card__author,.ap-card__date,.ap-card__read-time{font-size:var(--ap-text-xs);color:var(--ap-text-muted);display:flex;align-items:center;gap:3px}
.ap-card__meta-dot{width:3px;height:3px;border-radius:50%;background:var(--ap-text-muted);flex-shrink:0}
.ap-card__summary{font-size:var(--ap-text-sm);color:var(--ap-text-secondary);line-height:var(--ap-leading-relaxed);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Small */
.ap-card--sm .ap-card__img-wrap{aspect-ratio:16/9}
.ap-card--sm .ap-card__headline{font-size:var(--ap-text-sm);-webkit-line-clamp:2}
/* Medium */
.ap-card--md .ap-card__img-wrap{aspect-ratio:16/9}
.ap-card--md .ap-card__headline{-webkit-line-clamp:2}
/* Large */
.ap-card--lg{flex-direction:row}
.ap-card--lg .ap-card__img-wrap{width:55%;flex-shrink:0;min-height:280px}
.ap-card--lg .ap-card__body{padding:var(--ap-space-6)}
.ap-card--lg .ap-card__headline{font-size:var(--ap-text-xl);-webkit-line-clamp:3}
.ap-card--lg .ap-card__summary{-webkit-line-clamp:4}
.ap-card--lg .ap-card__cta{display:inline-flex;align-items:center;gap:var(--ap-space-1);margin-top:var(--ap-space-3);font-size:var(--ap-text-sm);font-weight:700;color:var(--ap-accent);text-decoration:none}
@media(max-width:767px){.ap-card--lg{flex-direction:column}.ap-card--lg .ap-card__img-wrap{width:100%;min-height:200px;aspect-ratio:16/9}}

/* ==========================================================================
   SECTION 8 — Podcast Cards
   ========================================================================== */
.ap-podcast-card{position:relative;display:flex;flex-direction:column;gap:var(--ap-space-3);padding:var(--ap-space-4);background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-xl);text-decoration:none;color:inherit;cursor:pointer;transition:border-color var(--ap-transition-fast),box-shadow var(--ap-transition-fast),transform var(--ap-transition-fast)}
@media(hover:hover){.ap-podcast-card:hover{border-color:var(--ap-border-strong);box-shadow:var(--ap-shadow-md);transform:translateY(-4px)}.ap-podcast-card:hover .ap-podcast-card__cover{transform:scale(1.04)}}
.ap-podcast-card__cover-wrap{aspect-ratio:1/1;border-radius:var(--ap-radius-lg);overflow:hidden;background:var(--ap-bg-elevated)}
.ap-podcast-card__cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ap-podcast-card__name{font-size:var(--ap-text-sm);font-weight:700;color:var(--ap-text-primary);line-height:var(--ap-leading-tight);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-podcast-card__host,.ap-podcast-card__episodes{font-size:var(--ap-text-xs);color:var(--ap-text-muted)}
.ap-podcast-card__badges{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-space-1);position:absolute;top:var(--ap-space-3);left:var(--ap-space-3)}

/* ==========================================================================
   SECTION 9 — Ranking Cards + Movement Indicators
   ========================================================================== */
.ap-ranking-card{display:flex;align-items:center;gap:var(--ap-space-4);padding:var(--ap-space-3) var(--ap-space-4);background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-lg);text-decoration:none;color:inherit;cursor:pointer;transition:border-color var(--ap-transition-fast),background var(--ap-transition-fast)}
@media(hover:hover){.ap-ranking-card:hover{border-color:var(--ap-border-strong);background:var(--ap-bg-elevated)}}
.ap-ranking-card__position{font-size:var(--ap-text-xl);font-weight:900;color:var(--ap-text-muted);min-width:32px;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.ap-ranking-card__position--top3{color:var(--ap-accent)}
.ap-ranking-card__cover{width:56px;height:56px;border-radius:var(--ap-radius-md);object-fit:cover;flex-shrink:0;background:var(--ap-bg-elevated)}
.ap-ranking-card__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ap-ranking-card__name{font-size:var(--ap-text-sm);font-weight:700;color:var(--ap-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-ranking-card__creator{font-size:var(--ap-text-xs);color:var(--ap-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-ranking-card__score{font-size:var(--ap-text-sm);font-weight:600;color:var(--ap-text-secondary);flex-shrink:0}
/* Movement indicators */
.ap-ranking-card__movement{display:flex;align-items:center;gap:2px;font-size:var(--ap-text-xs);font-weight:700;flex-shrink:0}
.ap-movement--up{color:#22c55e}.ap-movement--up::before{content:'?';font-size:8px}
.ap-movement--down{color:var(--ap-accent)}.ap-movement--down::before{content:'?';font-size:8px}
.ap-movement--stable{color:var(--ap-text-muted)}.ap-movement--stable::before{content:'?';font-size:6px}

/* ==========================================================================
   SECTION 10 — Creator Cards + Verified Badge
   ========================================================================== */
.ap-creator-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ap-space-3);padding:var(--ap-space-5);background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-xl);text-decoration:none;color:inherit;cursor:pointer;transition:border-color var(--ap-transition-fast),box-shadow var(--ap-transition-fast),transform var(--ap-transition-fast)}
@media(hover:hover){.ap-creator-card:hover{border-color:var(--ap-border-strong);box-shadow:var(--ap-shadow-md);transform:translateY(-3px)}}
.ap-creator-card__photo-wrap{position:relative;width:80px;height:80px}
.ap-creator-card__photo{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:center top;border:3px solid var(--ap-border-strong);background:var(--ap-bg-elevated)}
.ap-creator-card__name{font-size:var(--ap-text-base);font-weight:700;color:var(--ap-text-primary);line-height:1.3}
.ap-creator-card__role{font-size:var(--ap-text-xs);color:var(--ap-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.ap-creator-card__podcast{font-size:var(--ap-text-xs);color:var(--ap-accent);font-weight:600}
.ap-creator-card__bio{font-size:var(--ap-text-sm);color:var(--ap-text-secondary);line-height:var(--ap-leading-relaxed);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ap-creator-card__verified{position:absolute;bottom:2px;right:2px;width:20px;height:20px;background:#3b82f6;border-radius:50%;border:2px solid var(--ap-bg-surface);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px}

/* ==========================================================================
   SECTION 11 — Button System (Text, Disabled, Loading Spinner)
   ========================================================================== */
.ap-btn-text{display:inline-flex;align-items:center;gap:var(--ap-space-1);padding:var(--ap-space-1) 0;background:transparent;color:var(--ap-accent);font-size:var(--ap-text-sm);font-weight:600;border:none;border-bottom:1px solid transparent;cursor:pointer;text-decoration:none;transition:border-color var(--ap-transition-fast),color var(--ap-transition-fast)}
.ap-btn-text:hover{border-bottom-color:var(--ap-accent);color:var(--ap-accent-hover)}
.ap-btn-primary:disabled,.ap-btn-secondary:disabled,.ap-btn-text:disabled,[class^="ap-btn"]:disabled,[class^="ap-btn"][aria-disabled="true"]{opacity:.38;cursor:not-allowed;pointer-events:none;transform:none!important;box-shadow:none!important}
.ap-btn-primary.is-loading,.ap-btn-secondary.is-loading{position:relative;color:transparent!important;pointer-events:none}
.ap-btn-primary.is-loading::after,.ap-btn-secondary.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:ap-spin .7s linear infinite}
@keyframes ap-spin{to{transform:rotate(360deg)}}
.ap-spinner{display:inline-block;width:24px;height:24px;border:2px solid var(--ap-border-strong);border-top-color:var(--ap-accent);border-radius:50%;animation:ap-spin .7s linear infinite}
.ap-spinner--sm{width:16px;height:16px}.ap-spinner--lg{width:40px;height:40px;border-width:3px}

/* ==========================================================================
   SECTION 12 — Forms
   ========================================================================== */
.ap-form-group{display:flex;flex-direction:column;gap:var(--ap-space-2)}
.ap-label{font-size:var(--ap-text-sm);font-weight:600;color:var(--ap-text-secondary);display:flex;align-items:center;gap:var(--ap-space-1)}
.ap-label--required::after{content:'*';color:var(--ap-accent);font-size:var(--ap-text-xs)}
.ap-input,.ap-textarea,.ap-select{width:100%;padding:var(--ap-space-3) var(--ap-space-4);background:var(--ap-bg-elevated);border:1px solid var(--ap-border-strong);border-radius:var(--ap-radius-md);color:var(--ap-text-primary);font-family:var(--ap-font-sans);font-size:var(--ap-text-sm);line-height:var(--ap-leading-normal);appearance:none;transition:border-color var(--ap-transition-fast),box-shadow var(--ap-transition-fast)}
.ap-input::placeholder,.ap-textarea::placeholder{color:var(--ap-text-muted);font-size:var(--ap-text-sm)}
.ap-input:focus,.ap-textarea:focus,.ap-select:focus{outline:none;border-color:var(--ap-accent);box-shadow:0 0 0 3px rgba(228,0,27,.15)}
.ap-textarea{min-height:120px;resize:vertical}
.ap-input.is-error,.ap-textarea.is-error,.ap-select.is-error{border-color:var(--ap-accent);box-shadow:0 0 0 3px rgba(228,0,27,.1)}
.ap-form-error{display:flex;align-items:center;gap:var(--ap-space-1);font-size:var(--ap-text-xs);color:var(--ap-accent);font-weight:500}
.ap-form-error::before{content:'?';font-size:11px}
.ap-form-success{display:flex;align-items:center;gap:var(--ap-space-2);padding:var(--ap-space-3) var(--ap-space-4);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:var(--ap-radius-md);font-size:var(--ap-text-sm);color:#22c55e;font-weight:600}
.ap-form-success::before{content:'?';font-size:16px;flex-shrink:0}
.ap-form{display:flex;flex-direction:column;gap:var(--ap-space-4)}

/* ==========================================================================
   SECTION 13 — Search (Desktop expanded + Mobile overlay + Grouped results)
   ========================================================================== */
.ap-search{position:relative;display:flex;align-items:center}
.ap-search__input{width:100%;padding:var(--ap-space-2) var(--ap-space-4) var(--ap-space-2) 40px;background:var(--ap-bg-elevated);border:1px solid var(--ap-border-strong);border-radius:var(--ap-radius-full);color:var(--ap-text-primary);font-size:var(--ap-text-sm);transition:border-color var(--ap-transition-fast),box-shadow var(--ap-transition-fast)}
.ap-search__input:focus{outline:none;border-color:var(--ap-accent);box-shadow:0 0 0 3px rgba(228,0,27,.12)}
.ap-search__input::placeholder{color:var(--ap-text-muted)}
.ap-search__icon{position:absolute;left:var(--ap-space-3);color:var(--ap-text-muted);pointer-events:none;width:16px;height:16px}
/* Mobile overlay */
.ap-search-overlay{position:fixed;inset:0;z-index:200;background:rgba(10,10,12,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:var(--ap-space-4);opacity:0;pointer-events:none;transition:opacity var(--ap-transition-normal)}
.ap-search-overlay.is-open{opacity:1;pointer-events:auto}
.ap-search-overlay__header{display:flex;align-items:center;gap:var(--ap-space-3);padding-bottom:var(--ap-space-4);border-bottom:1px solid var(--ap-border)}
.ap-search-overlay__input{flex:1;background:transparent;border:none;color:var(--ap-text-primary);font-size:var(--ap-text-xl);font-weight:600;outline:none}
.ap-search-overlay__input::placeholder{color:var(--ap-text-muted)}
/* Grouped results */
.ap-search-results{flex:1;overflow-y:auto;padding-top:var(--ap-space-4);display:flex;flex-direction:column;gap:var(--ap-space-6)}
.ap-search-group__label{font-size:var(--ap-text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ap-text-muted);margin-bottom:var(--ap-space-2);padding-bottom:var(--ap-space-2);border-bottom:1px solid var(--ap-border)}
.ap-search-result-item{display:flex;align-items:center;gap:var(--ap-space-3);padding:var(--ap-space-2);border-radius:var(--ap-radius-md);text-decoration:none;color:inherit;cursor:pointer;transition:background var(--ap-transition-fast)}
.ap-search-result-item:hover{background:var(--ap-glass-bg)}
.ap-search-result-item__thumb{width:48px;height:48px;border-radius:var(--ap-radius-md);object-fit:cover;background:var(--ap-bg-elevated);flex-shrink:0}
.ap-search-result-item__title{font-size:var(--ap-text-sm);font-weight:600;color:var(--ap-text-primary);line-height:1.3}
.ap-search-result-item__sub{font-size:var(--ap-text-xs);color:var(--ap-text-muted)}

/* ==========================================================================
   SECTION 14 — Filters
   ========================================================================== */
.ap-filters{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-space-2);padding:var(--ap-space-3) 0}
.ap-filter-chip{display:inline-flex;align-items:center;gap:var(--ap-space-1);padding:var(--ap-space-2) var(--ap-space-3);background:var(--ap-bg-surface);border:1px solid var(--ap-border-strong);border-radius:var(--ap-radius-full);font-size:var(--ap-text-xs);font-weight:600;color:var(--ap-text-secondary);cursor:pointer;transition:background var(--ap-transition-fast),border-color var(--ap-transition-fast),color var(--ap-transition-fast);white-space:nowrap;user-select:none}
.ap-filter-chip:hover{border-color:var(--ap-accent);color:var(--ap-accent)}
.ap-filter-chip.is-active{background:var(--ap-accent);border-color:var(--ap-accent);color:#fff}
.ap-filter-select{padding:var(--ap-space-2) var(--ap-space-6) var(--ap-space-2) var(--ap-space-3);background:var(--ap-bg-surface);border:1px solid var(--ap-border-strong);border-radius:var(--ap-radius-full);color:var(--ap-text-secondary);font-size:var(--ap-text-xs);font-weight:600;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color var(--ap-transition-fast)}
.ap-filter-select:focus{outline:none;border-color:var(--ap-accent)}
.ap-filters__clear{font-size:var(--ap-text-xs);color:var(--ap-text-muted);background:none;border:none;cursor:pointer;padding:var(--ap-space-1) var(--ap-space-2);border-radius:var(--ap-radius-md);transition:color var(--ap-transition-fast);margin-left:auto}
.ap-filters__clear:hover{color:var(--ap-accent)}

/* ==========================================================================
   SECTION 15 — Pagination (Numbered + Load More)
   ========================================================================== */
.ap-pagination{display:flex;align-items:center;justify-content:center;gap:var(--ap-space-1);padding:var(--ap-space-8) 0}
.ap-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 var(--ap-space-2);background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-md);font-size:var(--ap-text-sm);font-weight:600;color:var(--ap-text-secondary);cursor:pointer;text-decoration:none;transition:background var(--ap-transition-fast),border-color var(--ap-transition-fast),color var(--ap-transition-fast)}
.ap-page-btn:hover{border-color:var(--ap-accent);color:var(--ap-accent)}
.ap-page-btn.is-active{background:var(--ap-accent);border-color:var(--ap-accent);color:#fff}
.ap-page-btn:disabled{opacity:.3;cursor:not-allowed}
.ap-page-ellipsis{color:var(--ap-text-muted);font-size:var(--ap-text-sm);padding:0 var(--ap-space-1)}
.ap-load-more{display:flex;justify-content:center;padding:var(--ap-space-6) 0}
.ap-load-more__btn{padding:var(--ap-space-3) var(--ap-space-8);background:var(--ap-bg-surface);border:1px solid var(--ap-border-strong);border-radius:var(--ap-radius-full);color:var(--ap-text-primary);font-size:var(--ap-text-sm);font-weight:700;cursor:pointer;transition:background var(--ap-transition-fast),border-color var(--ap-transition-fast),transform var(--ap-transition-fast)}
.ap-load-more__btn:hover{border-color:var(--ap-accent);background:var(--ap-bg-elevated);transform:translateY(-1px)}

/* ==========================================================================
   SECTION 16 — Sidebar (Desktop only)
   ========================================================================== */
.ap-sidebar{display:none;flex-direction:column;gap:var(--ap-space-6)}
@media(min-width:1024px){.ap-sidebar{display:flex;width:320px;flex-shrink:0}}
.ap-sidebar__widget{background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-xl);padding:var(--ap-space-5);display:flex;flex-direction:column;gap:var(--ap-space-4)}
.ap-sidebar__title{font-size:var(--ap-text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ap-text-muted);padding-bottom:var(--ap-space-3);border-bottom:1px solid var(--ap-border)}
.ap-sidebar__item{display:flex;align-items:center;gap:var(--ap-space-3);text-decoration:none;color:inherit;padding:var(--ap-space-2) 0;border-bottom:1px solid var(--ap-border);transition:color var(--ap-transition-fast)}
.ap-sidebar__item:last-child{border-bottom:none}
.ap-sidebar__item:hover .ap-sidebar__item-title{color:var(--ap-accent)}
.ap-sidebar__item-thumb{width:56px;height:56px;border-radius:var(--ap-radius-md);object-fit:cover;flex-shrink:0;background:var(--ap-bg-elevated)}
.ap-sidebar__item-title{font-size:var(--ap-text-sm);font-weight:600;color:var(--ap-text-primary);line-height:var(--ap-leading-tight);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--ap-transition-fast)}
.ap-sidebar__item-meta{font-size:var(--ap-text-xs);color:var(--ap-text-muted);margin-top:2px}
.ap-sidebar__ad{aspect-ratio:1/1;background:var(--ap-bg-elevated);border:1px dashed var(--ap-border-strong);border-radius:var(--ap-radius-lg);display:flex;align-items:center;justify-content:center;font-size:var(--ap-text-xs);color:var(--ap-text-muted);text-transform:uppercase;letter-spacing:.06em}

/* ==========================================================================
   SECTION 17 — Footer
   ========================================================================== */
.ap-footer{background:var(--ap-bg-secondary);border-top:1px solid var(--ap-border);margin-top:auto}
.ap-footer__main{max-width:var(--ap-container);margin-inline:auto;padding:var(--ap-space-12) var(--ap-space-4) var(--ap-space-8);display:grid;grid-template-columns:1fr;gap:var(--ap-space-8)}
@media(min-width:768px){.ap-footer__main{grid-template-columns:repeat(2,1fr);padding-inline:var(--ap-space-6)}}
@media(min-width:1024px){.ap-footer__main{grid-template-columns:2fr 1fr 1fr 1fr;padding-inline:var(--ap-space-8)}}
.ap-footer__brand{display:flex;flex-direction:column;gap:var(--ap-space-4)}
.ap-footer__logo{font-size:var(--ap-text-xl);font-weight:900;color:var(--ap-text-primary);letter-spacing:-.03em;text-decoration:none}
.ap-footer__about{font-size:var(--ap-text-sm);color:var(--ap-text-muted);line-height:var(--ap-leading-relaxed);max-width:280px}
.ap-footer__socials{display:flex;align-items:center;gap:var(--ap-space-2);flex-wrap:wrap}
.ap-footer__social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--ap-bg-elevated);border:1px solid var(--ap-border);border-radius:var(--ap-radius-md);color:var(--ap-text-muted);text-decoration:none;transition:background var(--ap-transition-fast),color var(--ap-transition-fast),border-color var(--ap-transition-fast)}
.ap-footer__social-link:hover{background:var(--ap-accent);border-color:var(--ap-accent);color:#fff}
.ap-footer__col-title{font-size:var(--ap-text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ap-text-muted);margin-bottom:var(--ap-space-4)}
.ap-footer__links{display:flex;flex-direction:column;gap:var(--ap-space-3);list-style:none;margin:0;padding:0}
.ap-footer__link{font-size:var(--ap-text-sm);color:var(--ap-text-secondary);text-decoration:none;transition:color var(--ap-transition-fast)}
.ap-footer__link:hover{color:var(--ap-text-primary)}
.ap-footer__partners{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-space-3)}
.ap-footer__partner{font-size:var(--ap-text-xs);color:var(--ap-text-muted);border:1px solid var(--ap-border);padding:var(--ap-space-2) var(--ap-space-3);border-radius:var(--ap-radius-md);text-decoration:none;transition:border-color var(--ap-transition-fast),color var(--ap-transition-fast)}
.ap-footer__partner:hover{border-color:var(--ap-border-strong);color:var(--ap-text-secondary)}
.ap-footer__bottom{max-width:var(--ap-container);margin-inline:auto;padding:var(--ap-space-4);border-top:1px solid var(--ap-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--ap-space-2)}
.ap-footer__copyright{font-size:var(--ap-text-xs);color:var(--ap-text-muted);letter-spacing:.04em}

/* ==========================================================================
   SECTION 19 — Badges
   ========================================================================== */
.ap-badge{display:inline-flex;align-items:center;gap:3px;padding:2px var(--ap-space-2);border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;line-height:1.4}
.ap-badge--featured{background:rgba(228,0,27,.9);color:#fff}
.ap-badge--exclusive{background:rgba(168,85,247,.9);color:#fff}
.ap-badge--trending{background:rgba(245,158,11,.9);color:#fff}
.ap-badge--breaking{background:rgba(228,0,27,1);color:#fff;animation:ap-pulse-badge 1.5s infinite}
.ap-badge--verified{background:rgba(59,130,246,.9);color:#fff}
.ap-badge--sponsored{background:rgba(107,114,128,.8);color:#fff}
.ap-badge--editors-pick{background:rgba(16,185,129,.9);color:#fff}
.ap-badge--new{background:rgba(6,182,212,.9);color:#fff}
@keyframes ap-pulse-badge{0%,100%{opacity:1}50%{opacity:.7}}

/* ==========================================================================
   SECTION 20 — Images (Aspect Ratios + Placeholder)
   ========================================================================== */
.ap-img--article{aspect-ratio:16/9}
.ap-img--podcast{aspect-ratio:1/1}
.ap-img--creator{aspect-ratio:4/5}
.ap-img-placeholder{background:linear-gradient(135deg,var(--ap-bg-elevated) 0%,var(--ap-bg-surface) 100%);display:flex;align-items:center;justify-content:center;color:var(--ap-text-muted);font-size:var(--ap-text-2xl);width:100%;height:100%}

/* ==========================================================================
   SECTION 21 — Empty States
   ========================================================================== */
.ap-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--ap-space-16) var(--ap-space-4);gap:var(--ap-space-4);min-height:320px}
.ap-empty__icon{font-size:3rem;opacity:.4;margin-bottom:var(--ap-space-2)}
.ap-empty__title{font-size:var(--ap-text-xl);font-weight:700;color:var(--ap-text-primary)}
.ap-empty__message{font-size:var(--ap-text-sm);color:var(--ap-text-muted);max-width:360px;line-height:var(--ap-leading-relaxed)}

/* ==========================================================================
   SECTION 22 — Loading States (Skeleton + Spinner + Progress)
   ========================================================================== */
.ap-skeleton{background:linear-gradient(90deg,var(--ap-bg-elevated) 0%,var(--ap-bg-surface) 50%,var(--ap-bg-elevated) 100%);background-size:200% 100%;animation:ap-shimmer 1.4s ease infinite;border-radius:var(--ap-radius-md);pointer-events:none}
@keyframes ap-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ap-skeleton--text{height:14px;margin-bottom:var(--ap-space-2)}
.ap-skeleton--title{height:20px;width:70%;margin-bottom:var(--ap-space-3)}
.ap-skeleton--img{aspect-ratio:16/9;width:100%}
.ap-skeleton--avatar{width:40px;height:40px;border-radius:50%}
.ap-skeleton--badge{height:20px;width:60px;border-radius:4px}
.ap-skeleton--btn{height:40px;width:120px;border-radius:9999px}
.ap-skeleton-card{background:var(--ap-bg-surface);border:1px solid var(--ap-border);border-radius:var(--ap-radius-lg);overflow:hidden;display:flex;flex-direction:column;gap:var(--ap-space-3);padding:var(--ap-space-4)}
.ap-progress-bar{position:fixed;top:0;left:0;width:0%;height:2px;background:var(--ap-accent);z-index:9999;transition:width .3s ease;box-shadow:0 0 8px rgba(228,0,27,.6)}

/* ==========================================================================
   SECTION 23 — Error States (404, 500, Network)
   ========================================================================== */
.ap-error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:60vh;padding:var(--ap-space-8) var(--ap-space-4);gap:var(--ap-space-6)}
.ap-error-page__code{font-size:clamp(5rem,15vw,9rem);font-weight:900;color:var(--ap-accent);letter-spacing:-.04em;line-height:1;opacity:.3}
.ap-error-page__title{font-size:var(--ap-text-2xl);font-weight:700;color:var(--ap-text-primary)}
.ap-error-page__message{font-size:var(--ap-text-base);color:var(--ap-text-muted);max-width:480px;line-height:var(--ap-leading-relaxed)}
.ap-error-page__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-space-3);justify-content:center}

/* ==========================================================================
   SECTION 24 — Responsive Behaviour
   ========================================================================== */
@media(max-width:767px){
  .ap-grid--articles{grid-template-columns:1fr}
  .ap-grid--podcasts{grid-template-columns:repeat(2,1fr)}
  .ap-grid--creators{grid-template-columns:repeat(2,1fr)}
  h1{font-size:clamp(var(--ap-text-2xl),6vw,var(--ap-text-4xl))}
  h2{font-size:clamp(var(--ap-text-xl),5vw,var(--ap-text-3xl))}
  h3{font-size:var(--ap-text-xl)}
  .ap-filter-chip,.ap-page-btn{min-height:40px}
}
@media(min-width:768px) and (max-width:1023px){
  .ap-grid--articles{grid-template-columns:repeat(2,1fr)}
  .ap-grid--podcasts{grid-template-columns:repeat(3,1fr)}
  .ap-grid--creators{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1024px){
  .ap-grid--articles{grid-template-columns:repeat(3,1fr)}
  .ap-grid--podcasts{grid-template-columns:repeat(4,1fr)}
  .ap-grid--creators{grid-template-columns:repeat(4,1fr)}
  .ap-grid--rankings{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   SECTION 26 — Motion / Animations
   ========================================================================== */
@keyframes ap-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ap-slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ap-slide-down{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes ap-scale-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ap-animate-fade-in{animation:ap-fade-in .25s ease forwards}
.ap-animate-slide-up{animation:ap-slide-up .3s ease forwards}
.ap-animate-slide-down{animation:ap-slide-down .3s ease forwards}
.ap-animate-scale-in{animation:ap-scale-in .2s ease forwards}
/* Toast */
.ap-toast{position:fixed;bottom:var(--ap-space-6);left:50%;transform:translateX(-50%) translateY(80px);z-index:9999;display:flex;align-items:center;gap:var(--ap-space-3);padding:var(--ap-space-3) var(--ap-space-5);background:var(--ap-bg-elevated);border:1px solid var(--ap-border-strong);border-radius:var(--ap-radius-full);font-size:var(--ap-text-sm);font-weight:600;color:var(--ap-text-primary);box-shadow:var(--ap-shadow-lg);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;white-space:nowrap}
.ap-toast.is-visible{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ap-toast--success{border-color:rgba(34,197,94,.4)}
.ap-toast--error{border-color:rgba(228,0,27,.4)}

/* ==========================================================================
   SECTION 27 — Dark Mode Architecture
   ========================================================================== */
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{--ap-bg-primary:#ffffff;--ap-bg-secondary:#f4f4f5;--ap-bg-surface:#e4e4e7;--ap-bg-elevated:#d4d4d8;--ap-text-primary:#09090b;--ap-text-secondary:#52525c;--ap-text-muted:#a1a1aa;--ap-border:rgba(0,0,0,.08);--ap-border-strong:rgba(0,0,0,.16);color-scheme:light}

/* ==========================================================================
   SECTION 28 — Design Consistency Utilities
   ========================================================================== */
.ap-icon{display:inline-flex;align-items:center;justify-content:center;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ap-tag{display:inline-flex;align-items:center;padding:2px var(--ap-space-2);background:var(--ap-bg-elevated);border:1px solid var(--ap-border);border-radius:var(--ap-radius-sm);font-size:var(--ap-text-xs);font-weight:600;color:var(--ap-text-muted);letter-spacing:.04em}
.ap-divider{height:1px;background:var(--ap-border);margin:var(--ap-space-6) 0}
.ap-section-title{font-size:var(--ap-text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ap-text-muted)}
/* Accessibility extras */
[aria-invalid="true"]{border-color:var(--ap-accent)!important}
[role="button"],[role="link"]{cursor:pointer}