/* ==========================================================================
   home.css — Homepage (Essay Index) Cards
   --------------------------------------------------------------------------
   Goals (this revision):
   - Fix mobile/tablet gutters so cards don't touch screen edges
   - Reduce excessive top spacing on homepage
   - Keep vertical spacing that already feels right
   - Maintain the same card family: motion, typography, CTA
   - Keep cover-image centering behavior for card figures
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive gutters (homepage only)
   - The site uses <main class="container"> for width constraints.
   - After removing older CSS, the container likely has little/no side padding,
     so cards can touch the viewport edges on mobile/tablet.
-------------------------------------------------------------------------- */
body.rll-home main.container {
  /* Comfortable editorial gutters that scale: mobile → tablet → desktop */
  padding-left: clamp(1rem, 4vw, 1.75rem);
  padding-right: clamp(1rem, 4vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   Fluid spacing scale (single source of truth)
-------------------------------------------------------------------------- */
:root {
  /* General spacing */
  --home-space-1: clamp(0.85rem, 0.75rem + 0.6vw, 1.05rem);
  --home-space-2: clamp(1.05rem, 0.9rem + 1vw, 1.55rem);
  --home-space-3: clamp(1.25rem, 1rem + 1.3vw, 1.9rem);
  --home-space-4: clamp(1.65rem, 1.2rem + 2.3vw, 2.6rem);

  /* Card internals */
  --home-card-pad-x: clamp(1.25rem, 0.95rem + 1.25vw, 1.85rem);
  --home-card-pad-y: clamp(1.25rem, 1.05rem + 1.1vw, 1.65rem);

  /* CTA */
  --home-cta-pad-y: clamp(0.58rem, 0.52rem + 0.35vw, 0.7rem);
  --home-cta-pad-x: clamp(0.95rem, 0.85rem + 0.6vw, 1.15rem);
  --home-cta-mt: clamp(0.2rem, 0.15rem + 0.35vw, 0.35rem);
}

/* --------------------------------------------------------------------------
   Grid layout
   - Reduce top padding (was feeling too tall) while keeping bottom breathing room.
-------------------------------------------------------------------------- */
main.container > .essay-grid {
  display: grid;
  gap: var(--home-space-4);

  /* Top smaller, bottom generous */
  padding-top: clamp(0.75rem, 0.6rem + 1.2vw, 1.25rem);
  padding-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
}

/* Tablet polish: avoid feeling cramped between ~560–900px */
@media (min-width: 560px) and (max-width: 900px) {
  main.container > .essay-grid {
    gap: clamp(1.85rem, 1.2rem + 1.8vw, 2.35rem);
  }
}

/* --------------------------------------------------------------------------
   Card base
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}

@media (hover: hover) {
  main.container > .essay-grid .essay-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.18);
  }
}

/* Slightly tighter radius on very small phones */
@media (max-width: 420px) {
  main.container > .essay-grid .essay-card {
    border-radius: 12px;
  }
}

/* --------------------------------------------------------------------------
   Media (figure + image + caption reveal)
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* Cover image behavior + centering */
main.container > .essay-grid .essay-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
}

/* Slightly favor upper-center on tablet/desktop for portrait safety */
@media (min-width: 560px) {
  main.container > .essay-grid .essay-card__image {
    object-position: 50% 45%;
  }
}

main.container > .essay-grid .essay-card figure figcaption {
  position: absolute;
  inset: auto 0 0 0;

  padding: var(--home-space-2) var(--home-card-pad-x);

  background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;

  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
}

@media (hover: hover) {
  main.container > .essay-grid .essay-card:hover .essay-card__image {
    transform: scale(1.05);
  }

  main.container > .essay-grid .essay-card:hover figure figcaption {
    transform: translateY(0);
  }
}

@media (hover: none) {
  main.container > .essay-grid .essay-card figure figcaption {
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  main.container > .essay-grid .essay-card figure figcaption {
    font-size: 0.88rem;
  }
}

/* --------------------------------------------------------------------------
   Content
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card__content {
  padding: var(--home-card-pad-y) var(--home-card-pad-x) calc(var(--home-card-pad-y) + 0.25rem);
}

/* --------------------------------------------------------------------------
   Meta
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card__date {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 clamp(0.45rem, 0.3rem + 0.45vw, 0.6rem) 0;
}

main.container > .essay-grid .essay-card__meta {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 clamp(0.4rem, 0.3rem + 0.45vw, 0.55rem) 0;
}

/* --------------------------------------------------------------------------
   Title
   - Mobile stays ~1.1rem
   - Tablet/desktop scales up to feel intentional
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card__title {
  font-size: clamp(1.08rem, 0.98rem + 0.65vw, 1.35rem);
  font-weight: 600;
  color: #222;
  margin: 0 0 0.35rem 0;
  line-height: 1.22;
}

@media (min-width: 1100px) {
  main.container > .essay-grid .essay-card__title {
    font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.42rem);
  }
}

main.container > .essay-grid .essay-card__title a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  main.container > .essay-grid .essay-card__title a:hover {
    color: var(--accent-color, #4a4a4a);
  }
}

/* --------------------------------------------------------------------------
   Preview
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card__preview {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
  margin: 0 0 clamp(1.05rem, 0.9rem + 0.75vw, 1.45rem) 0;

  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   CTA — Light, editorial button
-------------------------------------------------------------------------- */
main.container > .essay-grid .essay-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--home-cta-pad-y) var(--home-cta-pad-x);
  margin-top: var(--home-cta-mt);

  border-radius: 10px;

  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.01em;

  background: rgba(0, 0, 0, 0.035);
  color: #222;
  border: 1px solid rgba(0, 0, 0, 0.14);
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

main.container > .essay-grid .essay-card__link .nav-button__text {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

@media (hover: hover) {
  main.container > .essay-grid .essay-card__link:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  }
}

main.container > .essay-grid .essay-card__link:focus-visible {
  outline: 2px solid var(--accent-color, #4a4a4a);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Footer breathing room (homepage)
   - Keeps footer from feeling "cut off" on mobile
-------------------------------------------------------------------------- */
body.rll-home {
  padding-bottom: clamp(1.25rem, 2.2vw, 2.75rem);
}

.site-footer {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

/* --------------------------------------------------------------------------
   Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  main.container > .essay-grid .essay-card,
  main.container > .essay-grid .essay-card__image,
  main.container > .essay-grid .essay-card figure figcaption,
  main.container > .essay-grid .essay-card__link {
    transition: none !important;
  }
}