/*
 * Sections after the hero (Brands → Recent work → About / experience).
 * Built only from the SWSH tokens defined on .marketingRoot: colours, type scale, spacing,
 * radii, durations and easing. Layout follows the Tomasfolio reference.
 */

.pf-sections {
  position: relative;
  z-index: var(--z-raised);
  background-color: var(--color-bg);
  padding-block-end: var(--section-gap, var(--spacing-5xl));
}

.pf-section {
  padding-block-start: var(--section-gap, var(--spacing-5xl));
}

/* ------------------------------------------------------------------ */
/* Shared                                                              */
/* ------------------------------------------------------------------ */

.pf-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.pf-link--pending .ADG4GG_root {
  cursor: default;
}

.pf-link__tag {
  padding: var(--spacing-3xs) var(--spacing-xs);
  border-radius: var(--radius-infinite);
  background-color: var(--color-surface);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 1. Brands                                                           */
/* ------------------------------------------------------------------ */

.pf-brands__grid {
  align-items: start;
}

.pf-brands__statement {
  max-inline-size: 26rem;
  text-wrap: balance;
}

.pf-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-2xs);
}

.pf-logos__item > .FF5XaW_root {
  height: 100%;
}

.pf-logo {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--spacing-lg);
  border-radius: var(--radius-small);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-surface-raised);
}

.pf-logo .pf-logo__img {
  max-inline-size: 70%;
  max-block-size: 40%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pf-logo__placeholder {
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* 2. Recent work                                                      */
/* ------------------------------------------------------------------ */

.pf-work__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-block-end: var(--spacing-3xl);
}

.pf-work__titleRow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-xs);
}

.pf-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-3xl);
  align-items: start;
}

.pf-project {
  will-change: transform, opacity;
}

.pf-project__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pf-project__media {
  aspect-ratio: var(--pf-aspect, 1);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface);
  overflow: hidden;
  isolation: isolate;
}

/* scoped under .pf-project__media to beat the base `.marketingRoot img { height: auto }` reset */
.pf-project__media .pf-project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.pf-project__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  max-inline-size: 30rem;
  padding: var(--spacing-md) var(--spacing-sm) 0;
}

.pf-project__title {
  font-weight: var(--font-weight-bold);
}

.pf-project__title [data-scrambling='true'] {
  color: var(--color-accent);
}

.pf-project__description {
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pf-project__link:hover .pf-project__media .pf-project__img {
    transform: scale(1.06);
  }

  .pf-project__link:hover .pf-project__description {
    color: var(--color-text);
  }
}

/* ------------------------------------------------------------------ */
/* 3. About / experience                                               */
/* ------------------------------------------------------------------ */

.pf-about__statement {
  text-wrap: balance;
}

.pf-about__line {
  display: block;
}

.pf-about__body {
  margin-block-start: var(--spacing-3xl);
}

.pf-exp__heading {
  margin: 0;
  font: inherit;
}

/* scoped under .pf-exp to beat the base `.marketingRoot button { padding: 0 }` reset */
.pf-exp .pf-exp__trigger {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto;
  align-items: center;
  column-gap: var(--grid-gutter);
  inline-size: 100%;
  padding-block: var(--spacing-xl);
  text-align: start;
  cursor: pointer;
  border-radius: var(--radius-small);
}

.pf-exp__titles {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.pf-exp__role {
  font-weight: var(--font-weight-bold);
}

.pf-exp__company {
  transition: color var(--duration-base) var(--ease-out);
}

.pf-exp__icon {
  inline-size: var(--nav-menu-size, 2.625rem);
  block-size: var(--nav-menu-size, 2.625rem);
  border-radius: var(--radius-infinite);
  background-color: var(--color-accent-deep);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  transition: scale var(--duration-base) var(--ease-in-out);
}

/* plus glyph drawn with two bars so it can rotate into a cross */
.pf-exp__plus {
  position: relative;
  inline-size: 1rem;
  block-size: 1rem;
  display: block;
}

.pf-exp__plus::before,
.pf-exp__plus::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 0.125rem;
  margin-block-start: -0.0625rem;
  border-radius: var(--radius-infinite);
  background-color: currentColor;
}

.pf-exp__plus::after {
  transform: rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {
  .pf-exp__trigger:hover .pf-exp__company {
    color: var(--color-text);
  }

  .pf-exp__trigger:hover .pf-exp__icon {
    scale: 0.94;
  }
}

.pf-exp__panel {
  overflow: hidden;
}

.pf-exp__panelInner {
  padding-block-end: var(--spacing-xl);
}

.pf-exp__summary {
  max-inline-size: 32rem;
}

.pf-exp__divider {
  block-size: var(--border-width-hairline);
  background-color: var(--color-surface-raised);
  transform-origin: 0 50%;
}

.pf-about__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  margin-block-start: var(--spacing-2xl);
}

/* ------------------------------------------------------------------ */
/* Smaller screens: keep the hierarchy, stack the columns              */
/* ------------------------------------------------------------------ */

@media not (min-width: 64rem) {
  .pf-brands__intro,
  .pf-brands__logos,
  .pf-about__intro,
  .pf-about__body {
    grid-column: 1 / -1;
  }

  .pf-brands__logos {
    margin-block-start: var(--spacing-2xl);
  }

  .pf-brands__statement {
    max-inline-size: none;
  }

  .pf-logo {
    padding: var(--spacing-sm);
  }

  .pf-work__header {
    margin-block-end: var(--spacing-2xl);
  }

  .pf-work__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-2xl);
  }

  .pf-project__body {
    padding-inline: var(--spacing-2xs);
  }

  .pf-about__body {
    margin-block-start: var(--spacing-2xl);
  }

  .pf-exp .pf-exp__trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'titles icon'
      'period icon';
    row-gap: var(--spacing-xs);
    padding-block: var(--spacing-lg);
  }

  .pf-exp__titles {
    grid-area: titles;
  }

  .pf-exp__period {
    grid-area: period;
  }

  .pf-exp__icon {
    grid-area: icon;
  }
}

/* ------------------------------------------------------------------ */
/* Reduced motion: keep hover feedback as colour only                  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pf-project__media .pf-project__img,
  .pf-exp__icon {
    transition: none;
  }

  .pf-project__link:hover .pf-project__media .pf-project__img {
    transform: none;
  }

  .pf-exp__trigger:hover .pf-exp__icon {
    scale: none;
  }
}