/* Home page: hero statement, current-projects gallery, posts. (BRAND_GUIDE §8) */

/* --- Hero ---------------------------------------------------------------- */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-12);
  min-height: min(36rem, calc(100svh - var(--nav-h)));
  padding-block: var(--space-16) var(--space-12);
}

.home-hero__text {
  min-width: 0;
}

.home-hero__eyebrow {
  margin-bottom: var(--space-4);
}

.home-hero__title {
  max-width: 26ch;
  font-size: var(--step-display);
  font-weight: 900;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.home-hero .hero__lead {
  margin-top: var(--space-5);
}

.home-hero .actions {
  margin-top: var(--space-8);
}

@media (max-width: 60rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
    min-height: 0;
    padding-block: var(--space-12) var(--space-6);
  }

  .home-hero__title {
    max-width: 30ch;
  }
}

/* --- Current projects carousel ------------------------------------------ */
/* Without JS the slides stack; home.js adds .is-enhanced and they crossfade in
   place, auto-advancing. The selection triangle and hover wash live on the
   gradient text panel only, never on the image. */

.home-gallery {
  min-width: 0;
}

.carousel {
  position: relative;
  overflow: hidden;
  border: var(--rule) solid var(--crimson);
  border-radius: var(--radius-lg);
  box-shadow: var(--crimson-glow);
  background: var(--abyss);
}

.carousel__track {
  display: grid;
  gap: var(--rule);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel__slide {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 28rem;
}

.carousel.is-enhanced .carousel__track {
  gap: 0;
}

.carousel.is-enhanced .carousel__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.carousel.is-enhanced .carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease;
}

.carousel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel__image--empty {
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(46, 200, 234, 0.28), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(255, 31, 75, 0.18), transparent 65%),
    var(--abyss);
}

.carousel__panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The gradient text panel is the link (and the only hover target). */
.gallery-item {
  --panel-fade: linear-gradient(to top, rgba(4, 9, 20, 0.95) 0%, rgba(4, 9, 20, 0.78) 55%, rgba(4, 9, 20, 0) 100%);
  display: flex;
  flex-direction: column;
  padding: var(--space-16) var(--space-6) var(--space-6);
  background: var(--panel-fade);
  color: var(--text);
  text-decoration: none;
  transition: background var(--ease);
}

/* Hover: a soft cyan glow rising from the bottom of the panel, no outline. */
.gallery-item:hover,
.gallery-item:focus-visible {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(46, 200, 234, 0.22), rgba(46, 200, 234, 0) 70%),
    var(--panel-fade);
}

.gallery-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--space-1));
}

.gallery-item__title {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 900;
  line-height: var(--leading-tight);
}

.gallery-item__line {
  margin-top: var(--space-3);
  color: var(--text-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}

.gallery-item__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--cyan);
  color: var(--abyss);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background-color var(--ease);
}

.gallery-item:hover .gallery-item__more {
  background: var(--cyan-bright);
}

.carousel__arrow {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--ease), transform var(--ease);
  top: 38%;
  width: var(--tap);
  height: var(--tap);
  background: var(--cyan);
  color: var(--abyss);
  box-shadow: 0 6px 18px -6px rgba(46, 200, 234, 0.7);
}

.carousel__arrow--prev {
  left: var(--space-3);
}

.carousel__arrow--next {
  right: var(--space-3);
}

.carousel__arrow:hover {
  background: var(--cyan-bright);
}

.carousel__arrow[hidden] {
  display: none;
}

.carousel__arrow:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .carousel.is-enhanced .carousel__slide,
  .carousel.is-enhanced .carousel__slide.is-active {
    transition: none;
  }
}

@media (max-width: 60rem) {
  .carousel__slide {
    min-height: 22rem;
  }

  /* Keep the arrows over the image, clear of the text panel. */
  .carousel__arrow {
    top: 22%;
  }
}

.home-gallery__empty {
  padding: var(--space-8) var(--space-6);
  border: var(--hairline) dashed var(--line);
  text-align: center;
}

.home-gallery__empty .empty-state__text {
  margin-bottom: var(--space-3);
}

/* --- Posts --------------------------------------------------------------- */

.home-posts.section {
  padding-top: var(--space-12);
}

.home-posts__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-card .card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.post-card {
  overflow: hidden;
}

/* Hover/focus: the post's SVG arcs in from the bottom-right corner into the card
   background (x and y eased differently, so the path curves) and the text turns
   crimson. The card's backdrop-filter makes it a stacking context, so z-index -1
   keeps the art above the card surface but under the text. */
.post-card__art {
  position: absolute;
  right: -8%;
  bottom: -12%;
  z-index: -1;
  width: 72%;
  opacity: 0;
  transform: translateX(75%);
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 500ms ease;
  pointer-events: none;
}

.post-card__art img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(85%) rotate(28deg);
  transition: transform 700ms cubic-bezier(0.6, 0, 0.8, 0.4);
}

.post-card:hover .post-card__art,
.post-card:focus-within .post-card__art {
  opacity: 0.4;
  transform: none;
}

.post-card:hover .post-card__art img,
.post-card:focus-within .post-card__art img {
  transform: rotate(-6deg);
}

.post-card .post-item__date,
.post-card .card__link,
.post-card .card__text {
  transition: color var(--ease);
}

.post-card:hover .post-item__date,
.post-card:hover .card__link,
.post-card:hover .card__text,
.post-card:focus-within .post-item__date,
.post-card:focus-within .card__link,
.post-card:focus-within .card__text {
  color: var(--crimson);
}

.post-card__go {
  display: inline-grid;
  place-items: center;
  align-self: flex-end;
  width: var(--tap-sm);
  height: var(--tap-sm);
  margin-top: auto;
  border: var(--hairline) solid var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  transition: border-color var(--ease), color var(--ease);
}

/* Keep a gap above the button when the text fills the card. */
.post-card .card__text,
.post-card .card__title:nth-last-child(2) {
  margin-bottom: var(--space-5);
}

.post-card__go .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--ease);
}

.post-card:hover .post-card__go,
.post-card:focus-within .post-card__go {
  border-color: var(--crimson);
  color: var(--crimson);
}

.post-card:hover .post-card__go .icon {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .post-card__art,
  .post-card__art img {
    transform: none;
    transition: opacity 200ms ease;
  }
}

.gallery-item__more .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--ease);
}

.gallery-item:hover .gallery-item__more .icon {
  transform: translateX(3px);
}