/* OrangeCard rebrand overrides. Loaded after application.css, so equal-specificity rules here win. */

/* Task 5: headline font. The 48pt optical-size cut is drawn for 40-50px display text (the h1 size range here); headings use weight 700 only. */
@font-face {
  font-display: swap;
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  src: url(./fonts/BricolageGrotesque48pt-Bold.woff2) format("woff2");
}

h1,
.type-heading--1,
.post-body h1 {
  font-family: "Bricolage Grotesque", var(--font-family--heading);
}

/* Task 5b: Bricolage's capitals are ~15% shorter than Cosmica's at the same font-size, and the inherited -0.06rem
   letter-spacing (tuned for Cosmica) crowds it. +10% size with normal spacing restores the original visual size
   and the original line breaks. `h1` is deliberately NOT in this selector: the hero h1 inherits its size from its
   .type-heading--1 wrapper (h1 is font-size: 1em), so adding it would scale the hero twice. */
.type-heading--1,
.post-body h1 {
  font-size: calc(var(--font-size--heading-1-fluid) * 1.1);
  letter-spacing: 0;
}

/* Task 4: page side gutters. Mobile <768px: 30px | tablet 768-1119px: 60px | desktop >=1120px (where the desktop nav appears): 100px */
:root {
  --spacing--site-container: 30px;
}
@media (min-width: 48em) {
  :root {
    --spacing--site-container: 60px;
  }
}
@media (min-width: 70rem) {
  :root {
    --spacing--site-container: 100px;
  }
}
/* The main stylesheet switches .container to a different token at >=1920px; keep it on ours. */
@media (min-width: 120rem) {
  .container {
    padding: 0 var(--spacing--site-container);
  }
}
/* Nav dropdown panels line up with the page content. */
.header-container {
  padding-left: var(--spacing--site-container);
  padding-right: var(--spacing--site-container);
}

/* Task 1: OrangeCard logo. One lockup at every size; height sets the size and width follows the 3.08:1 ratio.
   width/height attributes on the <img> only reserve the aspect ratio. */
.application-header__logo .orangecard-logo {
  display: block;
  height: 2rem;
  width: auto;
}
@media (min-width: 48em) {
  .application-header__logo .orangecard-logo {
    height: 2.25rem;
  }
}
.footer__logo {
  display: block;
  height: auto;
  width: 200px;
}

/* P2-5: symmetric hero. The collage used to bleed to the right edge (padding-right: 0), leaving 100px of space on
   the left of the text but only ~48px on the right of the photos. Same gutter on both sides, then shift the SVG right by
   its own built-in right margin (54.76 of its 742 viewBox units = 7.38% of its width) so the photos' outer edge sits
   exactly on the gutter, in line with the header button. */
@media (min-width: 60em) {
  .hero-container--full-width {
    padding-right: var(--spacing--site-container);
  }
  .hero__image-wrapper svg {
    transform: translateX(7.38%);
  }
}


/* P3-1: on phones (<768px) the header shows the square OrangeCard logomark instead of the full lockup.
   40px tall since the 10 Oct team review (was 28px, the hamburger icon's height). */
.application-header__logo .orangecard-logomark {
  display: none;
  height: 40px;
  width: auto;
}
@media (max-width: 47.99em) {
  .application-header__logo .orangecard-logo {
    display: none;
  }
  .application-header__logo .orangecard-logomark {
    display: block;
  }
}

/* Homepage: Featured work (B2, 7 Oct). The tag line, and the project's image or, while it has none, the orange
   placeholder panel. The panel matches the Work pages' one in work.css, which the homepage doesn't load. */
.featured-work__tags {
  color: var(--color--text-dimmed);
  font-family: var(--font-family--eyebrow);
  font-size: 0.875rem;
  letter-spacing: var(--letter-spacing--label);
  margin-bottom: var(--spacing--small);
}

.featured-work__image {
  border-radius: var(--border-radius--case-study);
  display: block;
  height: auto;
  width: 100%;
}

.featured-work .work-placeholder {
  align-items: flex-end;
  aspect-ratio: 22 / 15;
  background-color: var(--color--button-background);
  color: var(--color--button-text);
  display: flex;
  padding: 7%;
}

.featured-work .work-placeholder__name {
  font-family: "Bricolage Grotesque", var(--font-family--heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
}

/* Homepage: Client success cards (B3, 7 Oct). The cards are the Work page’s (src/work/ProjectCard.jsx); these rules
   repeat the parts of work.css they need, scoped to this section, because the homepage doesn’t load work.css. */
.client-success .work-card__tags {
  color: var(--color--text-dimmed);
  font-family: var(--font-family--eyebrow);
  font-size: 0.875rem;
  letter-spacing: var(--letter-spacing--label);
  margin-bottom: var(--spacing--x-small);
}

.client-success .work-placeholder {
  container-type: inline-size;
  align-items: flex-end;
  aspect-ratio: 22 / 15;
  background-color: var(--color--button-background);
  color: var(--color--button-text);
  display: flex;
  padding: 7%;
  width: 100%;
}

.client-success .work-placeholder__name {
  font-family: "Bricolage Grotesque", var(--font-family--heading);
  font-size: clamp(1.25rem, 13cqi, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
}

.client-success .cards-grid__image-container:has(> .work-placeholder)::after {
  opacity: 0.15;
}

.client-success .cards-grid__card:hover .cards-grid__image-container:has(> .work-placeholder)::after {
  opacity: 0;
}

/* Homepage (B5, 7 Oct): below 800px the Featured work panel spans the full width, so the placeholder is letterboxed.
   Card placeholders size their name to the card’s own width, so long names fit at every width. */
@media (max-width: 49.99em) {
  .featured-work .work-placeholder {
    aspect-ratio: 2 / 1;
  }
}

/* Homepage logo wall (10 Oct team review): 3 logos above 3, each centred in an equal cell so the spacing is even.
   Sizes: 25PSKYN is 1.5x its old height (48px in a 189px cell at 1440px wide) and every other logo covers the same
   area, so wide logos are shorter and tall ones taller. Widths are a share of the cell, so the wall keeps these
   proportions at every screen width. */
.logos__logo-wrapper {
  align-items: center;
  align-self: center;
  gap: var(--spacing--large) var(--spacing--base);
  grid-template-columns: repeat(3, 1fr);
  --logo-scale: 1;
}
@media (max-width: 64.99em) {
  /* Below 1040px the wall sits under the heading at full width; cap it at its desktop size. */
  .logos__logo-wrapper {
    max-width: 33.5rem;
  }
}
@media (max-width: 44.99em) {
  /* Phones: cells are half as wide, so every logo takes a larger share of its cell (25PSKYN about 34px tall). */
  .logos__logo-wrapper {
    --logo-scale: 1.35;
  }
}

.logos__logo {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
}

.logos__logo-image {
  height: auto;
  max-height: none;
  max-width: 100%;
}

.logos__logo-image--25pskyn {
  width: calc(26.7% * var(--logo-scale));
}

.logos__logo-image--elroise {
  width: calc(67.8% * var(--logo-scale));
}

.logos__logo-image--floventro {
  width: calc(64.9% * var(--logo-scale));
}

/* Imani Ventures: 10% above the matched size (team review, 10 Oct), because its thin wordmark reads small next to its icon. */
.logos__logo-image--imani-ventures {
  width: calc(64.4% * var(--logo-scale));
}

.logos__logo-image--neonexus-consulting {
  width: calc(52.7% * var(--logo-scale));
}

.logos__logo-image--allay-house {
  width: calc(21.9% * var(--logo-scale));
}

/* 404 page (public/404.html): the logo clear of the top edge, and the five links stacked closely. */
.not-found__header {
  padding-top: var(--spacing--large);
}

.not-found__links {
  display: grid;
  gap: var(--spacing--base);
  list-style: none;
  margin-top: var(--spacing--large);
  padding: 0;
}

.not-found__links .cta-link {
  margin: 0;
}