/* ============================================
 * service-page-portfolio.css — Recent website projects grid
 *
 * Template module across all 6 service pages.
 * Built from Figma node 262:6104 (Website service page).
 *
 * Layout:
 *   Mobile  — single-column stack of cards.
 *   Tablet+ — 2-column grid, 24px gap.
 *
 * Each card is a clickable link to the live site. Card has an image
 * top + body (firm name + practice/location tag + visit-website link
 * + URL). Hover mirrors the pricing-card pattern: pink ring + lift.
 *
 * Flags (see build-context.md):
 *   DRIFT
 *     - Section padding-bottom: Figma 120, used established
 *       asymmetric --space-2xl (60) for body sections.
 *     - Card image aspect ratio uses the source webps' native
 *       1402:1158 (~1.21).
 * ============================================ */

.tlm-service-page-portfolio {
  background-color: var(--color-cream);
  /* Mobile: 40/40 — tighter stacked-section rhythm. Desktop bumps to 120. */
  padding-block: var(--space-section-y-mobile);
}

.tlm-service-page-portfolio__inner {
  display: flex;
  flex-direction: column;
}

/* ============================================
 * Intro
 * ============================================ */

.tlm-service-page-portfolio__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);                   /* 24 between title and lead */
  margin-bottom: var(--space-3xl);        /* 72 to grid (mobile) */
}

.tlm-service-page-portfolio__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);       /* 32 mobile */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
  text-wrap: balance;
}

.tlm-service-page-portfolio__lead {
  margin: 0;
  max-width: 30rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

/* ============================================
 * Grid
 * ============================================ */

.tlm-service-page-portfolio__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;             /* mobile: single column */
  /* row-gap kept tight (24); column-gap bumped to compensate for the
     baked-in white margin at the bottom of the source images which
     makes the vertical gap LOOK larger than the horizontal one when
     both are nominally equal. */
  row-gap: var(--space-md);               /* 24 */
  column-gap: var(--space-lg);            /* 32 */
}

/* ============================================
 * Card — entire card is a link
 * ============================================ */

.tlm-service-page-portfolio__card {
  /* <li> wrapper — no styles needed, the <a> inside is the card */
}

/* Card wrapper (was an <a>; now a plain <div> — only the URL link is clickable). */
.tlm-service-page-portfolio__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tlm-service-page-portfolio__card-visual {
  margin: 0;
  aspect-ratio: 1402 / 1158;              /* matches source webp aspect */
  overflow: hidden;
  background-color: var(--color-white);
}

.tlm-service-page-portfolio__card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder icon — shown when a portfolio piece has no image yet. */
.tlm-service-page-portfolio__card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-navy-faint);
}

/* Per-child margins (not a flex gap): the action line + URL stay a
   tight pair while the head sits a generous 24 above them. The action
   <p> is a plain label outside the anchor; the anchor wraps the URL.
   The margin-bottom values live on the __card-head / __card-action
   rules further down, after their `margin: 0` resets — see note there. */
.tlm-service-page-portfolio__card-body {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);               /* 24 internal — homepage card standard */
}

/* "Visit website" + URL grouped as a tight pair AND the actual <a>.
   This is the only clickable thing on the card. */
.tlm-service-page-portfolio__card-link-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);                  /* 4 — tight inside the pair */
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.tlm-service-page-portfolio__card-link-info:hover {
  opacity: 0.7;
}

.tlm-service-page-portfolio__card-link-info:hover .tlm-service-page-portfolio__card-url {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tlm-service-page-portfolio__card-link-info:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 4px;
}

.tlm-service-page-portfolio__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);         /* 24 — head to the action line below */
}

.tlm-service-page-portfolio__card-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);             /* 24 */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-service-page-portfolio__card-tag {
  display: none;                          /* mobile: hidden — too cramped alongside the name */
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);              /* 14 */
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: var(--color-text-on-light);
  opacity: 0.6;
}

.tlm-service-page-portfolio__card-action {
  margin: 0 0 var(--space-2xs);           /* 4 below — tight pair with the URL line */
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

.tlm-service-page-portfolio__card-url {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
  opacity: 0.6;
  word-break: break-all;
}

/* Hidden by default; revealed when Load more is clicked.
   Reveal animation runs when JS removes the [hidden] attribute and
   adds .is-revealed. */
.tlm-service-page-portfolio__card[hidden] {
  display: none;
}

.tlm-service-page-portfolio__card.is-revealed {
  animation: tlm-portfolio-reveal 400ms ease-out;
}

@keyframes tlm-portfolio-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
 * Load more
 * ============================================ */

.tlm-service-page-portfolio__load-more {
  align-self: center;
  margin-top: var(--space-xl);            /* 48 above the button */
}

/* .tlm-button sets display: inline-flex which beats the [hidden]
   user-agent rule, so re-assert display:none for the load-more
   button when JS toggles it off. */
.tlm-service-page-portfolio__load-more[hidden] {
  display: none;
}

/* ============================================
 * TABLET (>= 768px) — 2-column grid, body type bumps
 * ============================================ */

@media (min-width: 768px) {
  .tlm-service-page-portfolio__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tlm-service-page-portfolio__card-tag {
    display: inline;                      /* tablet+: show city/country alongside name */
  }

  .tlm-service-page-portfolio__lead,
  .tlm-service-page-portfolio__card-action,
  .tlm-service-page-portfolio__card-url {
    font-size: var(--text-lg);            /* 18 */
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
  }
}

/* ============================================
 * DESKTOP (>= 1024px)
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-service-page-portfolio {
    padding-block: var(--space-5xl);  /* 120 top + bottom — symmetric body rhythm */
  }

  .tlm-service-page-portfolio__title {
    font-size: var(--text-h2);            /* 56 desktop */
  }

  .tlm-service-page-portfolio__intro {
    margin-bottom: var(--space-4xl);      /* 80 to grid (desktop) */
  }
}