/* =============================================================
   262 STUDIOS — WordPress additions
   -------------------------------------------------------------
   This file is deliberately tiny and deliberately separate.

   assets/css/main.css is a byte-for-byte copy of the approved
   prototype stylesheet and must stay that way, so that a diff
   against the signed-off design always comes back clean.

   The prototype had no real photography in it — every image slot
   was a styled placeholder — so it never needed rules for a real
   <img>. These are those rules and nothing else. They make an
   uploaded image fill its existing box; they do not change a
   single colour, size, radius, weight or spacing token.

   Do not add design changes here. If the design needs to change,
   it changes in main.css after sign-off.
   ============================================================= */

/* Every image slot crops to cover inside the box the design
   already defines, so the client can upload any size or
   orientation without cropping first. */
.vid__poster img,
.workcard__img img,
.person__img img,
.tcard__img img,
.gtile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* .gtile already sets these in main.css; it is repeated above only
   so the selector list stays readable. The tile is the one case
   that is not absolutely positioned. */
.gtile img {
  position: static;
}

/* The uploaded logo replaces the text lockup. Height is capped so
   the nav bar keeps the height the hero's min-height calculation
   assumes. */
.logo img {
  height: 34px;
  width: auto;
  display: block;
}

.foot__brand .logo img {
  height: 36px;
}

/* The native fallback form submits with a <button>, where the
   prototype used an <a>. Same pill, same weights — buttons just
   don't inherit them the way an anchor does. */
button.btn {
  font-family: inherit;
  cursor: pointer;
}

/* Archive pagination, which the prototype had no need for. */
.pagination {
  display: flex;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--label);
  font-size: 0.8rem;
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--ink);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  border-color: var(--ink);
}

.pagination .screen-reader-text {
  position: absolute;
  left: -9999px;
}

/* Contact page routes — the icon tiles.
   The prototype sat a unicode dingbat at .9rem inside a 38px tile,
   which read as an accident rather than an icon. The tiles are now
   44px and hold real inline SVGs (see inc/icons.php); the size is
   set here rather than on each <svg> so the same icons keep their
   smaller footer and dock sizes. */
.ci {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.ci svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 560px) {
  .ci {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .ci svg {
    width: 18px;
    height: 18px;
  }
}