/* portfolio-cards-v3.css
 * Option 3 - Framed Editorial card design.
 *
 * Applied site-wide via <link rel="stylesheet" href="/assets/css/portfolio-cards-v3.css">
 * on every page that displays portfolio cards. Uses high specificity + !important to
 * override the per-page inline .pf-card / .sub-portfolio__card / .ra-work__item styles
 * without rewriting those styles individually.
 *
 * Visual language: charcoal mat surrounds a 16:9 thumbnail. Caption row below the
 * frame: client name on the left, service indicator chip on the right. Restrained,
 * museum/gallery feel. Reads as the work itself doing the talking; card chrome
 * stays out of the way.
 */

/* ============================================================
 * Common - shared between pf-card and sub-portfolio__card
 * ============================================================ */

:root {
  --v3-mat:           #2B2B2B;
  --v3-frame-fill:    #1E1E1E;
  --v3-frame-border:  rgba(255,255,255,0.05);
  --v3-title-color:   #F7F7F5;
  --v3-chip-color:    rgba(255,255,255,0.5);
  --v3-card-radius:   2px;
  --v3-ease-out:      cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
 * pf-card (main portfolio grids, lane hubs, portfolio leaf pages)
 * ============================================================ */

.pf-grid .pf-card {
  background:        var(--v3-mat) !important;
  padding:           18px 18px 22px !important;
  border-radius:     var(--v3-card-radius) !important;
  border:            0 !important;
  aspect-ratio:      auto !important;
  overflow:          visible !important;
  position:          relative !important;
  display:           block !important;
  transition:        transform .35s var(--v3-ease-out), box-shadow .35s var(--v3-ease-out) !important;
}
.pf-grid .pf-card:hover {
  transform:         translateY(-4px) !important;
  box-shadow:        0 18px 42px rgba(0,0,0,0.20) !important;
}
.pf-grid .pf-card::before,
.pf-grid .pf-card::after { display: none !important; content: none !important; }

.pf-grid .pf-card__bg {
  position:          relative !important;
  inset:             auto !important;
  display:           block !important;
  width:             100% !important;
  aspect-ratio:      16 / 9 !important;
  background-size:   cover !important;
  background-position: center !important;
  background-color:  var(--v3-frame-fill) !important;
  border:            1px solid var(--v3-frame-border) !important;
  opacity:           1 !important;
  border-radius:     0 !important;
}

.pf-grid .pf-card__body {
  position:          relative !important;
  inset:             auto !important;
  top:               auto !important;
  bottom:            auto !important;
  left:              auto !important;
  right:             auto !important;
  display:           flex !important;
  align-items:       baseline !important;
  justify-content:   space-between !important;
  gap:               16px !important;
  padding:           16px 4px 0 !important;
  background:        transparent !important;
  color:             var(--v3-title-color) !important;
  z-index:           2 !important;
}
.pf-grid .pf-card__title,
.pf-grid .pf-card__body h3 {
  font-family:       'Helvetica Neue','Arial Black',Helvetica,sans-serif !important;
  font-size:         17px !important;
  font-weight:       700 !important;
  letter-spacing:    0.02em !important;
  text-transform:    uppercase !important;
  line-height:       1.2 !important;
  color:             var(--v3-title-color) !important;
  flex:              1 1 auto !important;
  margin:            0 !important;
  text-shadow:       none !important;
}

/* Service tag chip: relocates from the original absolute top-left
 * position to the right side of the caption row. */
.pf-grid .pf-card__label {
  position:          relative !important;
  inset:             auto !important;
  top:               auto !important;
  left:              auto !important;
  right:             auto !important;
  font-family:       'Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-size:         9px !important;
  font-weight:       600 !important;
  letter-spacing:    0.2em !important;
  text-transform:    uppercase !important;
  color:             var(--v3-chip-color) !important;
  background:        transparent !important;
  padding:           0 !important;
  border:            0 !important;
  border-radius:     0 !important;
  backdrop-filter:   none !important;
  white-space:       normal !important;
  text-align:        right !important;
  max-width:         55% !important;
  line-height:       1.4 !important;
  flex:              0 0 auto !important;
  align-self:        baseline !important;
}

/* Status badge ("Case Study"), description text, body paragraphs:
 * Option 3 caption is title + chip only, nothing else. */
.pf-grid .pf-card__status,
.pf-grid .pf-card__desc,
.pf-grid .pf-card__body p {
  display: none !important;
}

/* ============================================================
 * sub-portfolio__card (some services pages, AMS leaf cards)
 * ============================================================ */

.sub-portfolio__grid,
.sub-portfolio__grid--v3 {
  display:           grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:               24px !important;
}
@media (max-width: 980px) {
  .sub-portfolio__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .sub-portfolio__grid { grid-template-columns: 1fr !important; }
}

.sub-portfolio__grid .sub-portfolio__card,
.pf-grid .sub-portfolio__card {
  background:        var(--v3-mat) !important;
  padding:           18px 18px 22px !important;
  border-radius:     var(--v3-card-radius) !important;
  border:            0 !important;
  aspect-ratio:      auto !important;
  overflow:          visible !important;
  display:           block !important;
  position:          relative !important;
  transition:        transform .35s var(--v3-ease-out), box-shadow .35s var(--v3-ease-out) !important;
}
.sub-portfolio__card:hover {
  transform:         translateY(-4px) !important;
  box-shadow:        0 18px 42px rgba(0,0,0,0.20) !important;
}
.sub-portfolio__card-bg,
.sub-portfolio__card-bg--img {
  position:          relative !important;
  inset:             auto !important;
  display:           block !important;
  width:             100% !important;
  aspect-ratio:      16 / 9 !important;
  background-image:  var(--bg-img) !important;
  background-size:   cover !important;
  background-position: center !important;
  background-color:  var(--v3-frame-fill) !important;
  border:            1px solid var(--v3-frame-border) !important;
  opacity:           1 !important;
  border-radius:     0 !important;
}
.sub-portfolio__card-body {
  display:           flex !important;
  align-items:       baseline !important;
  justify-content:   space-between !important;
  gap:               16px !important;
  padding:           16px 4px 0 !important;
  background:        transparent !important;
  position:          relative !important;
  inset:             auto !important;
}
.sub-portfolio__card-title {
  font-family:       'Helvetica Neue','Arial Black',Helvetica,sans-serif !important;
  font-size:         17px !important;
  font-weight:       700 !important;
  letter-spacing:    0.02em !important;
  text-transform:    uppercase !important;
  line-height:       1.2 !important;
  color:             var(--v3-title-color) !important;
  flex:              1 1 auto !important;
  margin:            0 !important;
}
.sub-portfolio__card-label {
  font-family:       'Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-size:         9px !important;
  font-weight:       600 !important;
  letter-spacing:    0.2em !important;
  text-transform:    uppercase !important;
  color:             var(--v3-chip-color) !important;
  background:        transparent !important;
  padding:           0 !important;
  border:            0 !important;
  white-space:       normal !important;
  text-align:        right !important;
  max-width:         55% !important;
  line-height:       1.4 !important;
  flex:              0 0 auto !important;
  align-self:        baseline !important;
}
.sub-portfolio__card-desc { display: none !important; }

/* ============================================================
 * pf-filters (filter pill row on every portfolio leaf + lane hub)
 * Original inline rule on 15 pages: `.pf-filters{padding:48px 0 0}`
 * had zero bottom padding, causing the filter pills to crash into
 * the next section. This global override adds breathing room.
 * ============================================================ */

.pf-filters {
  padding-bottom: 56px !important;
}

/* ============================================================
 * Status legend (lives inline on 16 portfolio pages on dark surface)
 * Original inline: `<p style="color:var(--gray);font-size:14px;">`
 * with `<strong style="font-size:11px;">` — both unreadable on the
 * dark grid backdrop. Override inline via external !important.
 * ============================================================ */

.pf-grid-wrap > .container > p.fade-up {
  font-size:        15px !important;
  color:            rgba(255, 255, 255, 0.82) !important;
  letter-spacing:   0.01em !important;
  line-height:      1.55 !important;
}
.pf-grid-wrap > .container > p.fade-up strong {
  font-size:        13px !important;
  color:            var(--red) !important;
}
.pf-grid-wrap > .container > p.fade-up em {
  color:            #fff !important;
  font-style:       normal !important;
  font-weight:      600 !important;
}

/* ============================================================
 * pf-grid container (dark surface behind the cards)
 * ============================================================ */

.pf-grid-wrap {
  background:        var(--v3-frame-fill) !important;
}
.pf-grid {
  display:           grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:               24px !important;
  max-width:         1240px !important;
  margin:            0 auto !important;
  padding:           0 24px !important;
}
@media (max-width: 980px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
 * Homepage ra-work strip - adapt to the same Option 3 visual language
 * ============================================================ */

.ra-work__grid .ra-work__item {
  background:        var(--v3-mat) !important;
  padding:           18px 18px 22px !important;
  border-radius:     var(--v3-card-radius) !important;
  border:            0 !important;
  aspect-ratio:      auto !important;
  grid-column:       auto !important;
  display:           block !important;
  overflow:          visible !important;
  transition:        transform .35s var(--v3-ease-out), box-shadow .35s var(--v3-ease-out) !important;
}
.ra-work__grid .ra-work__item:hover {
  transform:         translateY(-4px) !important;
  box-shadow:        0 18px 42px rgba(0,0,0,0.20) !important;
}
.ra-work__grid .ra-work__placeholder {
  position:          relative !important;
  width:             100% !important;
  aspect-ratio:      16 / 9 !important;
  background-size:   cover !important;
  background-position: center !important;
  background-color:  var(--v3-frame-fill) !important;
  border:            1px solid var(--v3-frame-border) !important;
  border-radius:     0 !important;
}
.ra-work__grid .ra-work__overlay {
  position:          relative !important;
  inset:             auto !important;
  display:           flex !important;
  align-items:       baseline !important;
  justify-content:   space-between !important;
  gap:               16px !important;
  padding:           16px 4px 0 !important;
  background:        transparent !important;
  opacity:           1 !important;
}
.ra-work__grid .ra-work__overlay h4,
.ra-work__grid .ra-work__overlay .ra-work__label,
.ra-work__grid .ra-work__overlay > .ra-work__item-title {
  font-family:       'Helvetica Neue','Arial Black',Helvetica,sans-serif !important;
  font-size:         17px !important;
  font-weight:       700 !important;
  letter-spacing:    0.02em !important;
  text-transform:    uppercase !important;
  line-height:       1.2 !important;
  color:             var(--v3-title-color) !important;
  flex:              1 1 auto !important;
  margin:            0 !important;
  text-shadow:       none !important;
}
.ra-work__grid .ra-work__overlay span,
.ra-work__grid .ra-work__overlay .ra-work__sub {
  font-family:       'Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-size:         9px !important;
  font-weight:       600 !important;
  letter-spacing:    0.2em !important;
  text-transform:    uppercase !important;
  color:             var(--v3-chip-color) !important;
  white-space:       normal !important;
  text-align:        right !important;
  max-width:         55% !important;
  line-height:       1.4 !important;
  flex:              0 0 auto !important;
  align-self:        baseline !important;
}
.ra-work__grid .ra-work__cta { display: none !important; }

/* Use the 5/7 asymmetric span only when there are 2 featured items;
 * for 3+ items, fall back to a uniform 3-column grid for predictability. */
.ra-work__grid {
  display:           grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:               24px !important;
}
@media (max-width: 980px) {
  .ra-work__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .ra-work__grid { grid-template-columns: 1fr !important; }
}