/* =========================================================
   Creative Services page (templates/creative-services.php)
   Page-scoped stylesheet. Loaded only on this template.
   Uses theme tokens from dist/main.css (:root variables).
   ========================================================= */

:root {
  --ph-ease: cubic-bezier(.22, .61, .36, 1);
  --ph-radius: 24px;
  --ph-chip-bg: #e9eef5;
  --ph-muted: #5c7995;
}

body.noScroll { overflow: hidden; }

/* ---------- Hero ----------
   Type treatment (eyebrow, h1, paragraph) comes from dist/hero-copy.css, shared by all heroes.
   This block only handles the background, tear edge, spacing, and the teal italic span. */
.hero--creative-services {
  background-color: var(--color-blue);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--color-white);
  padding: 7.5rem 1.5rem 5.5rem;
  overflow: visible;
  z-index: 2;
}
.hero--creative-services__content {
  max-width: 720px;
  padding-bottom: 1.5rem;
}
.hero--creative-services__title { color: var(--color-white); }
.hero--creative-services__text { max-width: 600px; }
.hero--creative-services__tear {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;
}
@media (min-width: 768px) {
  .hero--creative-services__content { width: 62%; max-width: none; }
  .hero--creative-services__text { max-width: 560px; }
}
@media (min-width: 1024px) {
  .hero--creative-services { padding: 10rem 1.5rem 7rem; }
  .hero--creative-services__content { padding-bottom: 3rem; }
}

/* ---------- Portfolio highlights ---------- */
.ph {
  background: var(--color-white);
  padding: 2.5rem 1.5rem 3.5rem;
  overflow: visible;
}
@media (min-width: 1024px) {
  .ph { padding: 3rem 1.5rem 4.5rem; }
}

/* Filters: hidden on phones (category carousel instead), wrap centered on tablet, one line on desktop */
.ph__filters {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem .5rem;
  margin: 0 0 2rem;
}
@media (min-width: 768px) {
  .ph__filters { display: flex; }
}
.ph__chip {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--heading-font-pt);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-blue);
  background: var(--ph-chip-bg);
  border-radius: 99px;
  padding: .65em 1.3em;
  line-height: 1.2;
  transition: background-color .2s var(--ph-ease), color .2s var(--ph-ease), transform .2s var(--ph-ease);
}
.ph__chip:hover { transform: translateY(-1px); background: #dfe7f0; }
.ph__chip:focus-visible { outline: 3px solid var(--color-turquoise-blue); outline-offset: 2px; }
.ph__chip[aria-pressed="true"],
.ph__chip[aria-pressed="true"]:hover { background: var(--color-pink); color: var(--color-white); }

/* "Highlights" (show all) reads as the pink label in the mockup */
.ph__chip--all {
  background: transparent;
  padding-left: 0;
  padding-right: .5em;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--ph-muted);
}
.ph__chip--all:hover,
.ph__chip--all[aria-pressed="true"],
.ph__chip--all[aria-pressed="true"]:hover { background: transparent; color: var(--color-pink); }

@media (min-width: 1024px) {
  .ph__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .55rem;
    margin-bottom: 2.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ph__filters::-webkit-scrollbar { display: none; }
  .ph__chip { font-size: clamp(.7rem, .88vw, .95rem); padding: .7em 1.35em; }
  .ph__chip--all { font-size: clamp(.68rem, .8vw, .8rem); }
}

/* Grid (desktop/tablet) — override Swiper's static wrapper CSS */
.ph__carousel { position: relative; }
.ph__grid.swiper { overflow: visible; }
.ph__list.swiper-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  box-sizing: border-box;
  height: auto;
}
.ph__grid:not(.swiper-initialized) .ph__list.swiper-wrapper { transform: none !important; }
@media (min-width: 768px) and (max-width: 1023px) {
  .ph__list.swiper-wrapper { grid-template-columns: repeat(2, 1fr); }
  .ph__card.ph__card--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .ph__list.swiper-wrapper { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .ph__card.ph__card--wide { grid-column: span 2; aspect-ratio: auto; }
  /* A wide card borrows its height from the standard cards in its row; when a filter hides them all, give it its own shape. */
  .ph__list:not(:has(.ph__card:not(.ph__card--wide):not(.is-hidden))) .ph__card.ph__card--wide { aspect-ratio: 16 / 10; }
}

/* Card */
.ph__card {
  --ph-grad: linear-gradient(180deg, #003b71 0%, #12578f 48%, #71d9d2 100%);
  position: relative;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--ph-radius);
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  background: var(--ph-grad);
  box-shadow: 0 2px 14px rgba(0, 59, 113, .07);
  transform: translateY(0);
  transition: transform .45s var(--ph-ease), box-shadow .45s var(--ph-ease);
}
.ph__card.is-hidden { display: none; }

/* Gradient variants (used for the card background and the resting wash) */
.ph__card--navy-teal { --ph-grad: linear-gradient(180deg, #003b71 0%, #12578f 48%, #71d9d2 100%); }
.ph__card--teal-navy { --ph-grad: linear-gradient(180deg, #0a4c85 0%, #2a8fb0 55%, #71d9d2 100%); }
.ph__card--pink-navy { --ph-grad: linear-gradient(165deg, #e21c78 0%, #a52a86 45%, #003b71 100%); }
.ph__card--navy-pink { --ph-grad: linear-gradient(180deg, #003b71 0%, #7a2a8a 45%, #e21c78 100%); }
.ph__card--navy      { --ph-grad: linear-gradient(180deg, #002a52 0%, #003b71 55%, #0d4f8a 100%); }

/* Art */
.ph__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10% 10% 22%;
  transform: scale(1);
  transition: transform .7s var(--ph-ease);
}
.ph__art img.ph__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 30px rgba(0, 20, 45, .35));
}
.ph__card--cover .ph__art { padding: 0; }
.ph__card--cover .ph__art img.ph__img { object-fit: cover; filter: none; }
/* Full height: tall cutouts (standees, phones) fill the card height, label overlaps the base */
.ph__card--full .ph__art { padding: 4% 8% 0; align-items: flex-start; }
.ph__card--full .ph__art img.ph__img { object-position: top; }
/* Fill width: art spans the card width, anchored near the top, bottom overflow is clipped */
.ph__card--width .ph__art { padding: 3% 12% 0; align-items: flex-start; }
.ph__card--width .ph__art img.ph__img { width: 100%; height: auto; max-height: none; object-fit: unset; object-position: top; }

/* Resting wash: the card gradient sits over the creative until hover */
.ph__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ph-grad);
  opacity: .74;
  transition: opacity .45s var(--ph-ease);
}

/* Label (always visible) */
.ph__rest {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 3.5rem 1.5rem 1.35rem;
  background: linear-gradient(180deg, rgba(0, 30, 60, 0) 0%, rgba(0, 30, 60, .6) 100%);
}
.ph__title {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--color-white);
  margin: 0 0 .3rem;
}
.ph__cat {
  display: block;
  font-family: var(--heading-font-pt);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-turquoise-blue);
}

/* Click target covering the whole card */
.ph__hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--ph-radius);
}
.ph__hit:focus-visible { outline: 3px solid var(--color-turquoise-blue); outline-offset: -4px; }

/* Hover / keyboard focus: the creative clears, card lifts */
@media (hover: hover) {
  .ph__card:hover,
  .ph__card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0, 42, 82, .26);
  }
  .ph__card:hover .ph__art,
  .ph__card:focus-within .ph__art { transform: scale(1.04); }
  .ph__card:hover .ph__wash,
  .ph__card:focus-within .ph__wash { opacity: 0; }
}

/* Empty state */
.ph__empty {
  text-align: center;
  color: var(--ph-muted);
  font-family: var(--body-font);
  margin: 2rem 0 0;
}

/* ---------- Mobile: one slide per category + "See all" ---------- */
.ph__nav { display: none; }
@media (max-width: 767px) {
  .ph__carousel.is-carousel {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 2.25rem;
  }
  .ph__grid.swiper.swiper-initialized { overflow: hidden; }
  .ph__grid.swiper-initialized .ph__list.swiper-wrapper {
    display: flex;
    gap: 0;
    height: auto;
    transform: translate3d(0, 0, 0);
  }
  .ph__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    flex-shrink: 0;
  }
  .ph__slide .ph__card { width: 100%; aspect-ratio: 4 / 5; }
  .ph__seeall.btn {
    margin: 0;
    font-size: .85rem;
    padding: .65rem 1.5rem;
  }
  .ph__carousel.is-carousel .ph__nav {
    display: block;
    position: absolute;
    top: 0;
    z-index: 6;
    width: 2.25rem;
    height: min(120vw, 600px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .ph__nav::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-style: solid;
    transform: translate(-50%, -50%);
  }
  .ph__nav--prev { left: 0; }
  .ph__nav--next { right: 0; }
  .ph__nav--prev::before { border-width: 12px 14px 12px 0; border-color: transparent var(--color-pink) transparent transparent; }
  .ph__nav--next::before { border-width: 12px 0 12px 14px; border-color: transparent transparent transparent var(--color-pink); }
  .ph__nav.swiper-button-disabled { opacity: .25; cursor: default; }
  .ph__nav:focus-visible { outline: 3px solid var(--color-turquoise-blue); outline-offset: 2px; border-radius: 6px; }
}

/* ---------- Pink CTA band (reuses lib/blocks/cta-banner.php) ---------- */
.template-creative-services .cta-block,
.page-template-creative-services .cta-block {
  background-color: var(--color-pink);
  padding-top: calc(4.5rem + 3.5vw);
  padding-bottom: 4.5rem;
}
.template-creative-services .cta-block .cta-block__bg,
.page-template-creative-services .cta-block .cta-block__bg { display: none; }
.template-creative-services .cta-block::before,
.page-template-creative-services .cta-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3.5vw;
  min-height: 22px;
  background: url("./images/tear-white-top.webp") center top / 100% 100% no-repeat;
  pointer-events: none;
}
.template-creative-services .cta-block .section-title,
.page-template-creative-services .cta-block .section-title {
  font-family: var(--body-font);
  font-weight: 400;
  letter-spacing: .12em;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.template-creative-services .cta-block .section-title span,
.page-template-creative-services .cta-block .section-title span {
  display: inline;
  font-family: var(--heading-font-pt);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: .01em;
}
.template-creative-services .cta-block .section__content,
.page-template-creative-services .cta-block .section__content {
  font-family: var(--body-font);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.5;
  max-width: 820px;
  margin: 0 auto;
}
.template-creative-services .cta-block .cta-block__cta .btn,
.page-template-creative-services .cta-block .cta-block__cta .btn {
  background: var(--color-white);
  color: var(--color-pink);
  margin-top: 1.75rem;
  padding: .8rem 2.4rem;
}
.template-creative-services .cta-block .cta-block__cta .btn:hover,
.page-template-creative-services .cta-block .cta-block__cta .btn:hover {
  background: var(--color-blue);
  color: var(--color-white);
}
@media (max-width: 1023px) {
  .template-creative-services .cta-block .section-title span,
  .page-template-creative-services .cta-block .section-title span { display: block; }
}

/* ---------- Lightbox (dimmed page, creative with shadow, caption aligned left) ---------- */
.ph-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  display: none;
}
.ph-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ph-fade .25s var(--ph-ease);
}
.ph-lightbox::backdrop { background: rgba(28, 28, 32, .84); }
.ph-lightbox__inner {
  width: min(1240px, 92vw);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 0 2rem;
}
.ph-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.ph-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.ph-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 62vh;
  width: auto;
  height: auto;
  filter: drop-shadow(0 32px 48px rgba(0, 0, 0, .55));
}
.ph-lightbox__caption {
  text-align: left;
  max-width: 1100px;
  padding: 0 .25rem;
}
.ph-lightbox__title {
  display: block;
  font-family: var(--body-font);
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  line-height: 1.2;
}
.ph-lightbox__cat {
  display: block;
  margin: .4rem 0 .9rem;
  font-family: var(--heading-font-pt);
  font-weight: 700;
  font-size: clamp(.8rem, 1vw, .95rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-turquoise-blue);
}
.ph-lightbox__desc {
  margin: 0;
  font-family: var(--body-font);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.5;
}
.ph-lightbox__desc[hidden] { display: none; }
.ph-lightbox__close,
.ph-lightbox__nav {
  appearance: none;
  border: 0;
  cursor: pointer;
  color: var(--color-white);
  background: transparent;
  position: fixed;
  z-index: 2;
}
.ph-lightbox__close {
  top: 1rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  opacity: .8;
  transition: opacity .2s var(--ph-ease), background-color .2s var(--ph-ease);
}
.ph-lightbox__close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.ph-lightbox__nav {
  top: 50%;
  width: 3.5rem;
  height: 5rem;
  transform: translateY(-50%);
  opacity: .9;
  transition: opacity .2s var(--ph-ease);
}
.ph-lightbox__nav:hover { opacity: 1; }
.ph-lightbox__nav::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-style: solid;
  transform: translate(-50%, -50%);
}
.ph-lightbox__nav--prev { left: 1.5vw; }
.ph-lightbox__nav--next { right: 1.5vw; }
.ph-lightbox__nav--prev::before { border-width: 14px 16px 14px 0; border-color: transparent #fff transparent transparent; }
.ph-lightbox__nav--next::before { border-width: 14px 0 14px 16px; border-color: transparent transparent transparent #fff; }
.ph-lightbox__nav[hidden] { display: none; }
.ph-lightbox__close:focus-visible,
.ph-lightbox__nav:focus-visible { outline: 3px solid var(--color-turquoise-blue); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 767px) {
  .ph-lightbox__inner { width: 84vw; padding: 3.5rem 0 1.5rem; }
  .ph-lightbox__img { max-height: 50vh; }
  .ph-lightbox__figure { gap: 1.25rem; }
  .ph-lightbox__nav { width: 2.5rem; height: 4rem; }
  .ph-lightbox__nav--prev { left: .25rem; }
  .ph-lightbox__nav--next { right: .25rem; }
  .ph-lightbox__nav--prev::before { border-width: 11px 12px 11px 0; }
  .ph-lightbox__nav--next::before { border-width: 11px 0 11px 12px; }
}
@keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ph *, .ph *::before, .ph *::after,
  .ph-lightbox, .ph-lightbox * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- TEMPORARY (2026-09-29): show Highlights only until the rest of the portfolio is filled out.
   Delete this block to bring back the category tabs and the mobile "See all" buttons. ---------- */
.ph__chip:not(.ph__chip--all),
.ph__seeall { display: none !important; }
.ph__chip--all { pointer-events: none; } /* nothing to switch between while it's the only tab */