/*
 * Site upgrade layer
 *
 * This file carries opinionated presentation fixes that sit above the
 * theme-owned al-folio runtime and the existing site-polish layer.
 * Keep selectors page-scoped and component-scoped so future theme upgrades stay safe.
 */

:root {
  --note-content-wide: min(100%, 62rem);
  --note-reading-wide: min(100%, 54rem);
  --note-surface: var(--global-bg-color, #fff);
  --note-surface-soft: color-mix(in srgb, var(--global-text-color, #111827) 2.5%, transparent);
  --note-surface-hover: color-mix(in srgb, var(--global-theme-color, #2f6fed) 6%, transparent);
  --note-hairline: color-mix(in srgb, var(--note-border, rgba(0, 0, 0, 0.12)) 76%, transparent);
  --note-focus-ring: 0 0 0 3px color-mix(in srgb, var(--global-theme-color, #2f6fed) 18%, transparent);
  --note-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
  --note-card-shadow-hover: 0 16px 42px rgba(15, 23, 42, 0.09);
}

html[data-theme="dark"] {
  --note-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  --note-card-shadow-hover: 0 18px 46px rgba(0, 0, 0, 0.28);
}

/* Professional portfolio baseline: quiet surfaces, visible focus states, restrained depth. */
article a:focus-visible,
.repo-card__cta:focus-visible,
.home-social-cta__primary:focus-visible,
body:has(.cv) nav[data-toggle="toc"] a:focus-visible,
body:has(.cv) #toc-sidebar a:focus-visible,
body:has(.cv) .toc-sidebar a:focus-visible {
  border-radius: 6px;
  outline: none;
  box-shadow: var(--note-focus-ring);
}

.featured-posts .card,
.post-list > li,
.projects .card,
.repo-card,
.cv .card {
  background: linear-gradient(180deg, var(--note-surface), var(--note-surface-soft));
  border-color: var(--note-hairline) !important;
}

.featured-posts a:hover .card,
.post-list > li:hover,
.projects a:hover .card,
.repo-card:hover {
  box-shadow: var(--note-card-shadow-hover);
}

/* Blog index: make featured cards and regular posts share one optical column. */
article:has(.header-bar) .header-bar,
article:has(.header-bar) .tag-category-list,
article:has(.header-bar) .featured-posts,
article:has(.header-bar) .post-list {
  width: var(--note-content-wide);
  max-width: var(--note-content-wide);
}

article:has(.header-bar) .header-bar {
  margin-bottom: 1.55rem;
}

article:has(.header-bar) .header-bar h1 {
  letter-spacing: -0.025em;
}

article:has(.header-bar) .featured-posts {
  margin-right: 0;
  margin-left: 0;
}

article:has(.header-bar) .featured-posts .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-right: 0;
  margin-left: 0;
}

article:has(.header-bar) .featured-posts .col {
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 0 !important;
  flex: none;
}

article:has(.header-bar) .featured-posts .card {
  height: 100%;
}

article:has(.header-bar) .post-list {
  margin-top: 1.15rem;
}

article:has(.header-bar) .post-list > li {
  width: 100%;
  padding: 1.15rem 1.2rem;
}

article:has(.header-bar) .post-list > li .row {
  align-items: stretch;
  gap: 1rem;
  margin-right: 0;
  margin-left: 0;
}

article:has(.header-bar) .post-list > li .col-sm-9,
article:has(.header-bar) .post-list > li .col-sm-3 {
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 576px) {
  article:has(.header-bar) .post-list > li .col-sm-9 {
    max-width: none;
    flex: 1 1 0;
  }

  article:has(.header-bar) .post-list > li .col-sm-3 {
    max-width: 10.5rem;
    flex: 0 0 10.5rem;
  }
}

article:has(.header-bar) .post-list img.card-img {
  display: block;
  height: 100% !important;
  min-height: 8.6rem;
  max-height: 11rem;
  object-fit: cover;
}

/* Repository cards: distinguish live product entry points from source-code links. */
.repo-grid {
  gap: 1.05rem;
}

.repo-card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.repo-card__summary {
  flex: 1 1 auto;
}

.repo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: center;
  margin-top: 0.9rem;
}

.repo-card__actions .repo-card__cta {
  margin-top: 0;
}

.repo-card__cta--primary {
  border: 1px solid var(--global-theme-color);
  border-radius: 999px;
  padding: 0.28rem 0.68rem;
  color: var(--global-theme-color);
  line-height: 1.2;
}

.repo-card__cta--primary:hover {
  background: var(--global-theme-color);
  color: var(--global-bg-color);
  text-decoration: none;
}

/* Projects: make mixed media cards feel like a curated portfolio wall. */
.projects .card figure {
  background: linear-gradient(135deg, var(--note-surface-soft), transparent);
}

.projects .card-title,
.repo-card h3,
.post-list h3 {
  letter-spacing: -0.01em;
}

/* CV page: hide the ugly native scrollbar while preserving sidebar scrolling. */
body:has(.cv) #toc-sidebar,
body:has(.cv) .toc-sidebar,
body:has(.cv) nav[data-toggle="toc"],
body:has(.cv) .sticky-top {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body:has(.cv) #toc-sidebar::-webkit-scrollbar,
body:has(.cv) .toc-sidebar::-webkit-scrollbar,
body:has(.cv) nav[data-toggle="toc"]::-webkit-scrollbar,
body:has(.cv) .sticky-top::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (min-width: 992px) {
  body:has(.cv) #toc-sidebar,
  body:has(.cv) .toc-sidebar,
  body:has(.cv) nav[data-toggle="toc"],
  body:has(.cv) .sticky-top {
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

body:has(.cv) nav[data-toggle="toc"],
body:has(.cv) #toc-sidebar,
body:has(.cv) .toc-sidebar {
  border-radius: 10px;
}

body:has(.cv) nav[data-toggle="toc"] a,
body:has(.cv) #toc-sidebar a,
body:has(.cv) .toc-sidebar a {
  border-radius: 6px;
  text-decoration: none;
  text-underline-offset: 4px;
}

body:has(.cv) nav[data-toggle="toc"] a:hover,
body:has(.cv) #toc-sidebar a:hover,
body:has(.cv) .toc-sidebar a:hover {
  color: var(--global-theme-color);
  background: var(--note-surface-hover);
}

body:has(.cv) .post-header .post-title {
  letter-spacing: -0.035em;
}

body:has(.cv) .post-header .post-description {
  max-width: 50rem;
  white-space: normal;
}

/* Rendering/performance: avoid painting long card lists before they enter the viewport. */
@supports (content-visibility: auto) {
  article:has(.header-bar) .featured-posts .card,
  article:has(.header-bar) .post-list > li,
  .projects .card,
  .repo-card,
  .cv .card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 220px;
  }
}

@media (max-width: 767px) {
  article:has(.header-bar) .header-bar,
  article:has(.header-bar) .tag-category-list,
  article:has(.header-bar) .featured-posts,
  article:has(.header-bar) .post-list {
    width: 100%;
    max-width: none;
  }

  article:has(.header-bar) .featured-posts .row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .repo-card__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .repo-card__actions .repo-card__cta {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-posts .card,
  .post-list > li,
  .projects .card,
  .repo-card,
  .home-social-cta__primary,
  .repo-card__cta--primary {
    transition: none !important;
  }

  .featured-posts a:hover .card,
  .post-list > li:hover,
  .projects a:hover .card,
  .repo-card:hover,
  .home-social-cta__primary:hover {
    transform: none !important;
  }
}