/*
 * 3by400 Portfolio v8 (/design-portfolio, module #398). Loaded ONLY by that module, right after pages-v8b.css
 * (replaces portfolio-v3.css on this page). Every rule is scoped under .tb4-pv8b-portfolio (the module root), so it
 * cannot touch the chrome-v9b/v9c header (.tm-header / .tm-header-mobile / .tb4-mnav) or footer (.tb4-foot).
 * Mock CSS merged (page-portfolio-v8.html load order): home-v4-seo, home-v8-full, home-v9-full, home-v9b-full,
 * home-landing-v1, page-design-v1, page-services-v1, page-portfolio-v1, -v2 = already in pages-v8b.css (scoped);
 * this file = page-portfolio-v3 (CTA tile, compact phone cards) + -v5 (phone: the CTA fills the free half cell)
 * + -v6 (CTA balances itself for any tile count). -v2 is annotation-only (not needed).
 * CTA span: the inline script sets it for the visible tiles (filters); the :nth-child rules below are the no-JS
 * defaults for the unfiltered grid (tiles are the grid's <article>s, the CTA its only <aside>, so
 * CTA:nth-child(k) <=> k-1 tiles). 31 projects: desktop row 11 = TCI + 2-wide CTA; phones: TCI + half-width CTA.
 */
.tb4-pv8b-portfolio .pf-tile h3 a:hover { color: var(--green-dark); }

/* ---------- "Your site could be next" CTA tile (ends the grid) ---------- */
.tb4-pv8b-portfolio .pf-cta-tile {
  grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 40px 44px; border-radius: 12px; background: var(--ink); color: #fff; position: relative; overflow: hidden;
  border-top: 4px solid var(--lime); min-height: 100%;
  box-shadow: 0 1px 2px rgba(35,31,32,.06), 0 14px 30px -16px rgba(35,31,32,.28);
}
.tb4-pv8b-portfolio .pf-cta-tile::after {
  content: ""; position: absolute; right: -140px; bottom: -180px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(159,204,69,.2), rgba(159,204,69,0) 68%); pointer-events: none;
}
.tb4-pv8b-portfolio .pf-cta-tile > * { position: relative; z-index: 1; }
.tb4-pv8b-portfolio .pf-cta-eyebrow {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--lime);
}
.tb4-pv8b-portfolio .pf-cta-h {
  margin: 0; font-family: var(--serif) !important; font-weight: 700; font-size: 32px; line-height: 1.2; color: #fff;
}
.tb4-pv8b-portfolio .pf-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; }
.tb4-pv8b-portfolio .pf-cta-actions .btn { font-size: 16px; padding: 15px 26px; }
.tb4-pv8b-portfolio .pf-cta-phone { color: var(--lime) !important; font-weight: 700; font-size: 14.5px; }
.tb4-pv8b-portfolio .pf-cta-phone:hover { color: #fff !important; }

/* ---------- 3 columns (>960px) ---------- */
@media (min-width: 961px) {
  /* no-JS defaults: fill what is left of the last row */
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n+1) { grid-column: 1 / -1; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n+2) { grid-column: span 2; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n) { grid-column: span 1; }
}
/* ---------- 2 columns (861-960px) ---------- */
@media (min-width: 861px) and (max-width: 960px) {
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(odd) { grid-column: 1 / -1; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(even) { grid-column: span 1; }
}
/* one-cell CTA (3 or 2 columns, >860px): stacked like a project card */
@media (min-width: 961px) {
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n):not([data-span]) {
    flex-direction: column; align-items: stretch; justify-content: center; gap: 26px; padding: 36px 32px;
  }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n):not([data-span]) .pf-cta-h { font-size: 30px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n):not([data-span]) .pf-cta-actions { align-items: stretch; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(3n):not([data-span]) .pf-cta-phone { text-align: center; }
}
@media (min-width: 861px) and (max-width: 960px) {
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(even):not([data-span]) {
    flex-direction: column; align-items: stretch; justify-content: center; gap: 26px; padding: 36px 32px;
  }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(even):not([data-span]) .pf-cta-h { font-size: 30px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(even):not([data-span]) .pf-cta-actions { align-items: stretch; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(even):not([data-span]) .pf-cta-phone { text-align: center; }
}
@media (min-width: 861px) {
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="1"] {
    flex-direction: column; align-items: stretch; justify-content: center; gap: 26px; padding: 36px 32px;
  }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="1"] .pf-cta-h { font-size: 30px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="1"] .pf-cta-actions { align-items: stretch; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="1"] .pf-cta-phone { text-align: center; }
}

/* ---------- 1 column (561-860px) ---------- */
@media (max-width: 860px) {
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile { grid-column: auto; flex-direction: column; align-items: stretch; padding: 30px 24px; }
  .tb4-pv8b-portfolio .pf-cta-h { font-size: 26px; }
  .tb4-pv8b-portfolio .pf-cta-actions { align-items: stretch; }
  .tb4-pv8b-portfolio .pf-cta-actions .btn { min-height: 52px; }
  .tb4-pv8b-portfolio .pf-cta-phone { text-align: center; }
}

/* ---------- phones (<=560px): compact 2-up cards, thumbnail + tags + name only ---------- */
@media (max-width: 560px) {
  .tb4-pv8b-portfolio .pf-tiles { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tb4-pv8b-portfolio .pf-tile .pd-tile-body { padding: 12px 12px 14px; }
  .tb4-pv8b-portfolio .pf-tile p,
  .tb4-pv8b-portfolio .pf-tile .svc-link,
  .tb4-pv8b-portfolio .pf-tile .pf-plat { display: none; }
  .tb4-pv8b-portfolio .pf-tile .pf-meta { min-height: 0; margin-bottom: 6px; }
  .tb4-pv8b-portfolio .pf-tile .pf-meta .tags { font-size: 9.5px; letter-spacing: .03em; line-height: 1.35; }
  .tb4-pv8b-portfolio .pf-tile h3 { font-size: 15.5px; line-height: 1.25; margin: 0; }

  /* v5: odd number of visible tiles -> the CTA fills the free half cell after the last tile (compact) */
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile { grid-column: auto; padding: 16px 14px; gap: 12px; justify-content: space-between; }
  .tb4-pv8b-portfolio .pf-cta-tile::after { right: -200px; bottom: -240px; }
  .tb4-pv8b-portfolio .pf-cta-eyebrow { font-size: 9.5px; letter-spacing: .08em !important; margin-bottom: 6px; }
  .tb4-pv8b-portfolio .pf-cta-h { font-size: 17px; line-height: 1.25; margin: 0; }
  .tb4-pv8b-portfolio .pf-cta-actions { gap: 8px; }
  .tb4-pv8b-portfolio .pf-cta-actions .btn { min-height: 40px; font-size: 13.5px; padding: 10px 8px; }
  .tb4-pv8b-portfolio .pf-cta-phone { font-size: 11.5px; text-align: center; }

  /* v6: even number of visible tiles -> the CTA takes the full row (no-JS: CTA is an odd child; JS: data-span="2") */
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(odd):not([data-span]),
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="2"] { grid-column: 1 / -1; padding: 30px 24px; gap: 32px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(odd):not([data-span]) .pf-cta-eyebrow,
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="2"] .pf-cta-eyebrow { font-size: 12px; letter-spacing: .12em !important; margin-bottom: 10px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(odd):not([data-span]) .pf-cta-h,
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="2"] .pf-cta-h { font-size: 26px; margin: 0 0 10px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(odd):not([data-span]) .pf-cta-actions .btn,
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="2"] .pf-cta-actions .btn { min-height: 52px; font-size: 16px; padding: 15px 26px; }
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile:nth-child(odd):not([data-span]) .pf-cta-phone,
  .tb4-pv8b-portfolio .pf-tiles > .pf-cta-tile[data-span="2"] .pf-cta-phone { font-size: 14.5px; }
}