/**
 * Walters Construction FL — Pillar Card Component
 *
 * Full-bleed image card with gradient overlay and hover zoom interaction.
 * The entire card is the clickable navigation element.
 * Background image is set via CSS custom property --pillar-card-bg on the element.
 *
 * Depends on styles/variables.css for brand tokens.
 *
 * Usage:
 *   <a href="/portfolio.html#custom-builds" class="pillar-card"
 *      style="--pillar-card-bg: url('images/projects/build.jpg')"
 *      aria-label="Custom Builds — view our custom home gallery">
 *     <div class="pillar-card__bg" aria-hidden="true"></div>
 *     <div class="pillar-card__overlay" aria-hidden="true"></div>
 *     <div class="pillar-card__content">
 *       <h3 class="pillar-card__title">Custom Builds</h3>
 *       <p class="pillar-card__description">Description text.</p>
 *     </div>
 *   </a>
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CARD WRAPPER
   Full anchor element — the entire card is the interactive area.
   overflow: hidden clips the bg image during the hover zoom transform.
   ───────────────────────────────────────────────────────────────────────────── */
.pillar-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
  /* 4:3 portrait on mobile for comfortable single-column reading */
  aspect-ratio: 4 / 3;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: box-shadow 300ms ease-out;
}

.pillar-card:hover,
.pillar-card:focus-visible {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* On desktop with 3 columns, portrait ratio fills vertical space better */
@media (min-width: 1024px) {
  .pillar-card {
    aspect-ratio: 3 / 4;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BACKGROUND IMAGE LAYER
   Zooms in on hover using transform — GPU-accelerated, no layout shift.
   ───────────────────────────────────────────────────────────────────────────── */
.pillar-card__bg {
  position: absolute;
  inset: 0;
  background-image: var(--pillar-card-bg);
  background-size: cover;
  background-position: center;
  transition: transform 300ms ease-out;
}

.pillar-card:hover .pillar-card__bg,
.pillar-card:focus-visible .pillar-card__bg {
  transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────────────────────
   GRADIENT OVERLAY
   Ensures text readability over any background image.
   Deepens on hover to maintain contrast as image zooms.
   ───────────────────────────────────────────────────────────────────────────── */
.pillar-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.38) 50%,
    rgba(0, 0, 0, 0.10) 100%
  );
  transition: background 300ms ease-out;
  z-index: 1;
}

.pillar-card:hover .pillar-card__overlay,
.pillar-card:focus-visible .pillar-card__overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0.55) 50%,
    rgba(0, 0, 0, 0.20) 100%
  );
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTENT
   Sits above the overlay layer, anchored to the card bottom.
   ───────────────────────────────────────────────────────────────────────────── */
.pillar-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  z-index: 2;
}

.pillar-card__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl, 20px);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  white-space: nowrap;
  /* Reinforces readability on any image */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.pillar-card__description {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-gray-200);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOCUS INDICATOR
   High-visibility keyboard focus ring using accent gold.
   ───────────────────────────────────────────────────────────────────────────── */
.pillar-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}