/* LuckyLove.AI - /blog/author/<slug>
   The chrome (header, sidebar, footer, tab bar) is home.css as-is. This file
   only adds the profile itself. Tokens only, no literal hex. No page
   JavaScript. Breakpoints follow home.css: 1279 / 899 / 767 / 639 / 559. */

.h3-lang-box { display: none; }

/* ---------- hero ---------- */

/* One measure for the whole page. Before this the paragraphs were capped at
   72ch while the tag row and the headings ran to the full width of the main column,
   so the text sat left and the pills stuck out to the right. */
.author-hero,
.author-section {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

.author-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: .82rem;
  color: var(--h3-text-dim2);
}

.author-crumbs a { color: var(--h3-text-dim); }
.author-crumbs a:hover { color: var(--h3-primary-text); }

.author-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
  padding: 26px;
  background: var(--h3-panel);
  border: 1px solid var(--h3-line);
  border-radius: var(--h3-r-card);
}

/* Square with the card radius, same treatment as every other image here. */
.author-photo {
  position: relative;
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: var(--h3-r-card);
  background: var(--h3-panel);
  overflow: hidden;
}

.author-photo img,
.author-post-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-body { min-width: 0; }

.author-role {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--h3-primary-text);
}

.author-name {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--h3-text);
}

.author-lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--h3-text-dim);
}

/* ---------- social ---------- */

.author-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* One profile, so the handle is spelled out rather than hidden behind a bare
   icon: a visible @name is the thing a reader checks against the X page. */
.author-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--h3-line);
  border-radius: var(--h3-r-pill);
  font-size: .84rem;
  font-weight: 600;
  color: var(--h3-text-dim);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.author-icon-text { white-space: nowrap; }

.author-icon:hover {
  color: var(--h3-primary-text);
  border-color: var(--h3-primary);
  background: var(--h3-primary-weak);
}

.author-icon svg { width: 15px; height: 15px; flex: none; }

.author-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: .8rem;
  color: var(--h3-text-dim2);
}

/* ---------- facts ---------- */

.author-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.author-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-facts span {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--h3-text-dim2);
}

.author-facts strong {
  font-size: .95rem;
  font-weight: 600;
  color: var(--h3-text);
}

/* ---------- sections ---------- */



.author-h2 {
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--h3-text);
}

.author-section p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--h3-text-dim);
}

.author-section p:last-child { margin-bottom: 0; }

.author-section em { font-style: italic; color: var(--h3-text); }

.author-section a:not(.author-post-link):not(.h3-btn) {
  color: var(--h3-primary-text);
  border-bottom: 1px solid var(--h3-primary-soft);
}

.author-section a:not(.author-post-link):not(.h3-btn):hover { border-bottom-color: var(--h3-primary); }

.author-steps {
  counter-reset: step;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.author-steps li {
  position: relative;
  padding: 0 0 16px 42px;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--h3-text-dim);
}

.author-steps li:last-child { padding-bottom: 0; }

/* The rail is drawn on the item, not the list, so it stops at the last step
   instead of running past it. */
.author-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--h3-line);
  border-radius: var(--h3-r-pill);
  background: var(--h3-panel);
  font-size: .8rem;
  font-weight: 700;
  color: var(--h3-primary-text);
}

.author-steps li::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 4px;
  left: 13px;
  width: 1px;
  background: var(--h3-line);
}

.author-steps li:last-child::after { display: none; }

.author-steps strong { color: var(--h3-text); font-weight: 600; }

.author-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.author-tags li {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--h3-line);
  border-radius: var(--h3-r-pill);
  font-size: .82rem;
  font-weight: 500;
  color: var(--h3-text-dim);
}

/* ---------- post grid ---------- */

.author-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.author-post {
  position: relative;
  z-index: 0;
  margin: 0;
}

/* Fixed window: the grid shows the latest posts, this link leads to the rest.
   The top margin has to clear the 24px grid gap by a wide margin, otherwise the
   button reads as one more row of the grid instead of a separate control.

   The selector needs the tag and both classes. `.author-section p` (line 177)
   and `.author-section p:last-child` (line 184) are more specific than a bare
   `.author-more`, so a single-class rule here is silently discarded and the
   button ends up flush against the grid. */
.author-section p.author-more {
  margin: 48px 0 8px;
  text-align: center;
}

.author-post-link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--h3-r-card);
  background: var(--h3-panel);
  overflow: hidden;
  color: var(--h3-text);
}

.author-post-media {
  position: absolute;
  inset: 0;
  display: block;
}

.author-post-media img { transition: transform .45s ease; }

.author-post-link:hover .author-post-media img { transform: scale(1.05); }

.author-post-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(var(--h3-dark-rgb), .92) 0%,
    rgba(var(--h3-dark-rgb), .78) 34%,
    rgba(var(--h3-dark-rgb), 0) 72%);
}

.author-post-read {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--h3-line);
  border-radius: var(--h3-r-pill);
  background: rgba(var(--h3-dark-rgb), .72);
  font-size: .72rem;
  font-weight: 600;
  color: var(--h3-text);
}

.author-post-body {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.author-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--h3-text);
}

.author-post-link:hover .author-post-title { color: var(--h3-primary-text); }

.author-post-date {
  font-size: .76rem;
  color: var(--h3-text-dim2);
}

.author-post::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--h3-r-card);
  opacity: 0;
  box-shadow: 0 14px 40px -12px var(--h3-primary);
  transition: opacity .25s ease;
}

.author-post:hover::after { opacity: 1; }

/* ---------- breakpoints ---------- */

@media (max-width: 899px) {
  .author-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 20px;
    text-align: center;
  }
    .author-facts { justify-content: center; }
  .author-social { justify-content: center; }
  .author-dates { justify-content: center; }
}

@media (max-width: 639px) {
  .author-card { padding: 20px; }
    .author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .author-post-body { padding: 12px; }
  .author-post-title { font-size: .84rem; line-height: 1.3; -webkit-line-clamp: 4; }
  .author-post-date { font-size: .7rem; }
  .author-post-read { top: 8px; left: 8px; font-size: .68rem; padding: 3px 7px; }
  .author-facts { gap: 10px 20px; }
  /* Grid gap drops to 16px here, so the button needs less clearance to stay distinct. */
  .author-section p.author-more { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .author-post-media img,
  .author-icon,
  .author-post::after { transition: none; }
  .author-post-link:hover .author-post-media img { transform: none; }
}