/* =========================================================
   Infin Digital, custom overrides
   Font system:
     Primary  (headings / display) → Space Grotesk  (--at-ff-heading)
     Secondary (body / UI text)     → Sora           (--at-ff-body)
   The base theme inherits the body font onto headings, so we
   explicitly route headings + display text to the heading font.
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.at-title-text,
.at-section-title,
.at-offcanvas-title,
.footer-2-connect-title,
[class*="fz-ds-"],
[class*="fz-160"],
[class*="fz-120"],
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--at-ff-heading);
}

/* Hero (index-2), enlarge the "In/fin" wordmark, responsive */
.sec-1-home-2 h1.at-title-text {
  font-size: clamp(96px, 17vw, 300px);
  line-height: 0.95;
}

/* Hero "In/fin", render the "/" in the secondary (gray) brand color */
.sec-1-home-2 h1.at-title-text .char[style*="--char:3"] {
  color: #9A9A9A;
}

/* =========================================================
   Fluid display type
   ---------------------------------------------------------
   The theme steps display sizes at fixed breakpoints. Between
   1441px and roughly 1650px it jumps .fz-ds-1 to 124px while the
   column holding it is still only about 625px wide, and there is
   no rule at all between 575px and 767px, so it falls back to
   80px. Headings carrying `text-scale-anim` are split into
   per-character inline-block spans by GSAP SplitText, and once a
   word is wider than its column those characters wrap
   individually, which is why "Development" was breaking into
   "Developmen" and "t".

   Sizing these fluidly removes the jumps, so a heading always
   fits its column at every viewport width and never breaks
   mid-word. At 1440px the computed size lands within a pixel of
   the theme's original 80px, so the layouts already signed off on
   are unchanged.
   ========================================================= */

.fz-ds-1 {
  font-size: clamp(40px, 5.6vw, 110px) !important;
  overflow-wrap: normal;
}

/* Services hero lockup ("Infin Digital"), theme sets 200px above 1441px. */
.fz-200 {
  font-size: clamp(56px, 10.5vw, 200px) !important;
}

/* Footer "Let's Connect", theme sets 220px above 1441px. */
.footer-2-connect-title {
  font-size: clamp(48px, 11.5vw, 220px);
  line-height: 1;
}

/* Secondary display sizes used by section titles and stat rows. */
.fz-150 { font-size: clamp(44px, 7.8vw, 150px); }
.fz-170,
.fz-180 { font-size: clamp(48px, 8.8vw, 170px); }
.fz-120 { font-size: clamp(36px, 6.2vw, 120px); }

/* ---------------------------------------------------------
   Home "Our Selected Work" heading
   ---------------------------------------------------------
   The portfolio grid is deliberately tucked up beside this
   heading: .alt-portfolio-main-title-wrap carries
   margin-bottom: -270px, and the first card sits in a column
   offset by 4 of 12 while the heading occupies 5 of 12. The card
   column therefore starts before the heading column ends, and at
   1280px and above the heading text ran underneath the first
   card, clipping the word "Selected".

   Constrain the wrap rather than the font size. Capping the width
   makes the heading wrap before that boundary at any font size,
   which is safer than shrinking the type: a smaller font fits
   more words per line and so actually reaches further right.

   Below 1200px the theme switches the wrap to a positive margin,
   the grid drops below the heading, and no adjustment is needed.
   --------------------------------------------------------- */
@media (min-width: 1200px) {
  .alt-portfolio-main-title-wrap {
    max-width: 78%;
  }
}

/* Keep long single words from being split across lines by the
   character-level split animations. */
.at-title-text,
.text-scale-anim,
.text-scale-anim-2,
.reveal-text {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* =========================================================
   Portfolio card overlays, legibility
   ---------------------------------------------------------
   The Selected Work cards now carry client site screenshots
   instead of the dark stock photography they shipped with.
   The theme scrim (.alt-portfolio-thumb::before) only covers
   the bottom 50% and is fully transparent until 11.93% into
   that band, reaching 0.76 opacity only at the very bottom
   edge. White copy sat almost entirely outside the dark part,
   so the tag, title and description washed out against pale
   mockups: beach sand, a cream desk, a white marketplace UI.

   Deepen the scrim, raise it to cover the copy, and add a soft
   shadow so the text holds up over whatever the screenshot
   happens to show. Scoped to .alt-portfolio-area, which is the
   Selected Work grid and the matching portfolio-5 grid, so
   other cards on the site keep the lighter treatment.
   ========================================================= */
.alt-portfolio-area .alt-portfolio-thumb::before {
  height: 85%;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0) 0%,
    rgba(18, 18, 18, 0.28) 32%,
    rgba(18, 18, 18, 0.62) 58%,
    rgba(18, 18, 18, 0.85) 82%,
    rgba(18, 18, 18, 0.93) 100%
  );
}

.alt-portfolio-area .alt-portfolio-btn .content > * {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* The pill outline reads as grey against a light photo. */
.alt-portfolio-area .alt-portfolio-btn .content > span {
  border-color: rgba(255, 255, 255, 0.65) !important;
  background-color: rgba(18, 18, 18, 0.35) !important;
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------
   Touch devices never fire :hover, so the theme leaves the
   overlay translated 40% down (clipped by the thumb's
   overflow: hidden) with the description permanently
   invisible. Show the resting state in full instead.
   --------------------------------------------------------- */
@media (hover: none) {
  .alt-portfolio-area .alt-portfolio-btn {
    transform: translateY(0);
  }
  .alt-portfolio-area .alt-portfolio-btn .des {
    opacity: 1;
    visibility: visible;
  }
}