/* Portfolio-site additions.
   Everything visual comes from main.css / additions.css; this file only holds the few rules the
   new static pages need (cards that used to be styled inline by portfolio.js, video covers,
   logo tiles, project pager). Uses theme tokens from main.css :root only. */

/* ---------- Project cards (was inline style in portfolio.js) ---------- */
.project-items-2 .images a {
  display: block;
}
.project-items-2 .images .work-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}
.project-items-2 .images .work-cover-top {
  border-radius: 16px 16px 0 0;
  border-bottom: none;
}
.work-video-cover {
  position: relative;
  display: block;
  overflow: hidden;
}
.work-video-cover video {
  background: #000;
}
.work-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--theme);
  border-radius: 100px;
  background: rgba(6, 6, 6, 0.6);
  color: var(--theme);
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}
.project-items-2:hover .work-play {
  background: var(--theme);
  color: var(--bg-2);
}
[data-project][hidden],
[data-group][hidden] {
  display: none !important;
}
.work-empty {
  padding: 60px 0;
  color: #868283;
  font-style: italic;
}

/* ---------- Project page ---------- */
.work-full {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border);
  border-radius: 16px;
  background: #000;
}
.work-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.work-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: var(--border);
  border-radius: 16px;
}
.work-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
}
.work-pager .theme-btn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-details-wrapper .project-details-content .list-item h5 {
  margin-bottom: 8px;
}
.main-sidebar .info-sidebar-widget .info-widget .content h5 {
  text-transform: none;
  word-break: break-word;
}

/* ---------- Logo tiles (Brands page) ---------- */
.logo-grid .photo-item {
  aspect-ratio: 1 / 1;
  background: var(--bg);
}
.logo-grid .photo-item img {
  object-fit: contain;
  padding: 28px;
}
.worked-with-section .client-wrapper .client-items .client-item a {
  display: block;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--theme);
  color: var(--bg-2);
  font-weight: 600;
  transition: top 0.2s ease-in-out;
}
.skip-link:focus {
  top: 16px;
}
#main:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 3px;
}

/* ---------- Cards / case study ---------- */
.project-items-2 .content .text .work-role {
  margin: 4px 0 0;
  color: #bbbbbc;
  font-size: 14px;
}
.work-cs-label {
  display: inline-block;
  margin: 14px 0 6px;
  color: var(--theme);
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.work-case-study ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-details-wrapper .project-details-content .work-case-study li {
  margin-bottom: 10px;
}

/* ---------- Video poster -> modal ---------- */
a.work-embed {
  display: block;
  overflow: hidden;
  border: var(--border);
  border-radius: 16px;
  background: #000;
}
.work-embed img,
.work-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-embed .work-play {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  font-size: 22px;
}
a.work-embed:hover .work-play,
a.work-embed:focus-visible .work-play {
  background: var(--theme);
  color: var(--bg-2);
}

/* ---------- Gallery wrapper ---------- */
.work-gallery {
  scroll-margin-top: 90px;
}
#brands,
#selected,
#contact {
  scroll-margin-top: 90px;
}

/* ---------- Brand logos on a light plate (dark logos) ---------- */
.worked-with-section .client-wrapper .client-items .client-item .brand-mark img {
  object-fit: contain;
}
.worked-with-section .client-wrapper .client-items .client-item .brand-mark.on-light {
  background: #fff;
  border-radius: 12px;
  padding: 8px 14px;
}

/* ---------- Brand grid: with many brands, wrap into a centred grid ---------- */
.worked-with-section .client-wrapper .client-items {
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 0;
}
.worked-with-section .client-wrapper .client-items .client-item {
  flex: 0 0 calc(100% / 6);
  max-width: calc(100% / 6);
  padding: 10px 18px;
}
.worked-with-section .client-wrapper .client-items .client-item::before {
  display: none;
}
.worked-with-section .client-wrapper .client-items .client-item .brand-mark img {
  width: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}
@media (max-width: 1199px) {
  .worked-with-section .client-wrapper .client-items .client-item {
    flex-basis: 25%;
    max-width: 25%;
  }
}
@media (max-width: 991px) {
  .worked-with-section .client-wrapper .client-items .client-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
@media (max-width: 575px) {
  .worked-with-section .client-wrapper .client-items .client-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 8px 10px;
  }
}