/* ═══════════════════════════════════════════════════════
   PORTFOLIO PAGE — Specific Styles
   ═══════════════════════════════════════════════════════ */

/* ── Screen-reader-only page heading (visual design has no H1) ── */
.pf-sr-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Filter Pills ─────────────────────────────────── */
.pf-filters {
  padding-top: clamp(110px, 10.66vw, 123px);
  padding-bottom: clamp(1.5rem, 2.46vw, 1.845rem);
}

.pf-filters__tabs {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.pf-filters__pill {
  font-family: 'Montserrat', var(--font-sans);
  /* 10 Sept review: filter pills "a lot smaller" (were 1.15rem 2.25rem). */
  font-size: 0.86rem;   /* was 0.82rem; 16 Sept responsive pass: 12px floor */
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pf-filters__pill:hover {
  border-color: var(--color-copper);
  color: var(--color-copper);
}

.pf-filters__pill--active,
.pf-filters__pill--active:hover {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: #fff;
}

/* 21 Sept: the Expertise pill from Portfolio.png. Expertise is a category rather than a single
   value, so the pill opens the three disciplines beneath it and picking one filters the grid.
   Every project carries a Service, so this is the one facet with real data behind it. */
.pf-filters__group {
  position: relative;
  display: inline-flex;
}

.pf-filters__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 100%;
  padding: 0.4rem 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(35, 31, 32, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 5;
}

.pf-filters__group.is-open .pf-filters__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pf-filters__option {
  display: block;
  width: 100%;
  padding: 0.5rem 1.2rem;
  font-family: 'Montserrat', var(--font-sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border: none;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.3s ease;
}

.pf-filters__option:hover,
.pf-filters__option--active {
  color: var(--color-copper);
}

/* 29 Sept: Ireland is one of the three markets the About page names, but no project
   on the site is filed there yet, and Victor asked for it to stay in the Location menu.
   A filter can therefore legitimately match nothing, and an empty grid simply collapses
   and pulls the footer up the page, which reads as a broken filter rather than an empty
   one. Say so instead. */
.pf-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  font-family: 'Montserrat', var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  opacity: 0.55;
}

.pf-empty[hidden] {
  display: none;
}


/* ── Project Grid ─────────────────────────────────── */
.pf-grid-section {
  padding-top: clamp(1.5rem, 2.46vw, 1.64rem);
}

/* On Webflow the cards come from a CMS Collection List, which inserts .w-dyn-list and
   .w-dyn-items between the grid and the cards, so the grid has to be declared on the items
   wrapper too. The hand-coded page has the cards as direct children. */
.pf-grid,
.pf-grid .w-dyn-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 2.46vw, 2.05rem) clamp(1.5rem, 2.46vw, 2.05rem);
}

.pf-grid > .w-dyn-list {
  grid-column: 1 / -1;
}

.pf-card {
  display: block;
  position: relative;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pf-card.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

.pf-card__img {
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16/9;
}

.pf-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.pf-card:hover .pf-card__img img {
  transform: scale(1.05);
}

.pf-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.75rem;
}
.pf-card__tag {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.85rem, 0.9vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

.pf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pf-dot--location {
  background: #E08A3C;
}

.pf-dot--size {
  background: #4A4FE0;
}

.pf-dot--industry {
  background: #4CAF6E;
}

/* The Webflow Portfolio cards come from the CMS and carry no .pf-dot
   markup, so draw the same colour tags from CSS (10 Sept review: "add the
   little colour tags"). CMS tags run location, [size], sector, so colour
   by position. Hand-coded cards that already have a .pf-dot are skipped. */
.pf-card__tag:not(:has(.pf-dot))::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  background: #4A4FE0;              /* size (middle tag) */
}

.pf-card__tag:first-child:not(:has(.pf-dot))::before {
  background: #E08A3C;              /* location */
}

.pf-card__tag:last-child:not(:first-child):not(:has(.pf-dot))::before {
  background: #4CAF6E;              /* sector */
}

.pf-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.3669vw, 1.64rem);
  font-weight: 700;
  margin-top: 0.75rem;
  color: var(--color-text);
  line-height: 1.25;
}

/* ── Featured Project ─────────────────────────────── */
.pf-featured {
  background: var(--color-bg-alt);
}

.pf-featured__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(3rem, 4.1vw, 4.1rem);
  align-items: center;
}

.pf-featured__image {
  overflow: hidden;
  aspect-ratio: 16/10;
}

.pf-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-featured__cat {
  font-size: 0.9225rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-copper);
}

.pf-featured__title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 2.7306vw, 3.28rem);
  font-weight: 600;
  margin-top: 0.5rem;
  line-height: 1.08;
}
.pf-featured__subtitle {
  font-family: var(--font-serif);
  font-size: 1.23rem;
  font-style: italic;
  color: var(--color-text);
  margin-top: 0.5rem;
  line-height: 1.08;
}
.pf-featured__desc {
  font-size: 0.984rem;
  line-height: 1.5;
  color: var(--color-text);
  margin-top: 1.5rem;
}

.pf-featured__meta {
  display: flex;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.pf-featured__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pf-featured__meta-label {
  font-size: 0.9225rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  line-height: 1.5;
}

.pf-featured__meta-value {
  font-size: 1.0496rem;
  font-weight: 500;
}

.pf-featured .btn {
  margin-top: 2rem;
}

/* ── CTA (reuse from workplace) ───────────────────── */
.wp-cta {
  background: var(--color-dark);
  color: #fff;
}

.wp-cta__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.wp-cta__heading {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 2.7306vw, 3.28rem);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 1.5rem;
}

.wp-cta__text {
  font-size: 1.0496rem;
  line-height: 1.5;
  color: var(--color-text-muted-on-dark);
  margin-bottom: 2.5rem;
}

.wp-cta .btn {
  background: var(--color-copper);
  color: #fff;
  border-color: var(--color-copper);
}

.wp-cta .btn:hover {
  background: #fff;
  color: var(--color-dark);
  border-color: #fff;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .pf-featured__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pf-grid,
  .pf-grid .w-dyn-items {
    grid-template-columns: 1fr;
  }

  .pf-filters__tabs {
    gap: 0.625rem;
  }

  .pf-filters__pill {
    padding: 0.625rem 1.125rem;
    font-size: 0.86rem;   /* was 0.615rem; 16 Sept responsive pass: 12px floor */
  }

  .pf-card__tags {
    gap: 1rem;
  }

  .pf-featured__meta {
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}

/* The portfolio grid runs wider than the body container — measured off the
   mockup, cards span x82 to x1837 on the 1920 canvas with a 27px gutter. */
.pf-grid-section > .container,
.pf-filters > .container {
  max-width: none;
  padding: 0 clamp(20px, 3.5014vw, 67.24px);
}

.pf-grid,
.pf-grid .w-dyn-items { gap: 27px clamp(16px, 1.148vw, 22.14px); }

/* 14 of the 29 CMS projects have no card thumbnail yet. Collapsing the frame would leave the two
   columns ragged, so — as on the Our People grid — the card keeps its shape and shows a blank
   placeholder tone until the photograph is loaded. */
.pf-card__img:has(img.w-dyn-bind-empty) {
  background: rgba(35, 31, 32, 0.06);
}

.pf-card__img img.w-dyn-bind-empty {
  display: none;
}

/* The card tags read Location | Size | Expertise. Only 7 of the 31 projects carry a size so far,
   so the tag drops out rather than leaving a stray separator. */
.pf-card__tag.w-dyn-bind-empty {
  display: none;
}

/* 25 Sept: the filter pills were 35px tall on a phone, under the 44px
   minimum for a comfortable touch target. */
@media (max-width: 768px) {
  .pf-filters__pill,
  .pf-filters__option {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .pf-filters__option {
    display: flex;
  }
}