/* ================================================================
   style.css — BH & F Brand
   Base Holdings & Foundry
   Faithfully translated from Figma CSS export specs.
   ================================================================ */


/* ================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   All colors, spacing, and type values from the Figma file.
   Edit here to propagate changes across the entire layout.
   ================================================================ */
:root {
  /* --- Color Palette (from Figma) --- */
  --color-bg:           #D0D0D0;  /* Page background */
  --color-dark:         #292929;  /* Logo vectors, deepest dark */
  --color-near-black:   #1C1C1C;  /* Card backgrounds */
  --color-surface:      #272727;  /* Button + tag pill backgrounds */
  --color-border:       #333333;  /* Inquiries button border */
  --color-divider:      #545454;  /* Dashed horizontal rule */
  --color-text-primary: #252525;  /* Intro paragraph */
  --color-text-white:   #FFFFFF;  /* Card titles */
  --color-text-muted:   #848484;  /* Card descriptions */
  --color-text-tag:     #727272;  /* Tag pill labels */
  --color-text-nav:     #CCCCCC;  /* Inquiries button text */
  --color-logo-bg:      #C3C3C3;  /* Logo badge base (Rectangle 168) */

  /* --- Typography --- */
  --font-primary: 'Ovo', Georgia, serif;

  /* --- Spacing (derived from Figma absolute positions) --- */
  --space-page-x:   63.61px;   /* Left margin of content columns */
  --space-header-y: 43.73px;   /* Logo top offset */

  /* --- Border Radius --- */
  --radius-card:  15px;    /* Card corners (Rectangle 170–172) */
  --radius-btn:    4px;    /* Inquiries button (Rectangle 173) */
  --radius-tag:   54px;    /* Tag pill corners (Rectangle 174–177) */

  /* --- Transition Defaults (for JS animation hooks) ---
     These provide smooth baseline transitions even before
     animations.js adds more sophisticated motion.          */
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ================================================================
   RESET & BASE
   Minimal reset. Box-sizing and font defaults applied globally.
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Page background color from Figma: #D0D0D0 */
  background-color: var(--color-bg);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ================================================================
   PAGE WRAPPER
   Outer container that holds all sections.
   Max-width mirrors the Figma frame (1440px) and centers content.
   JS target: #page — use for page-wide entrance or scroll context.
   ================================================================ */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-page-x); /* ~63px left/right gutter from Figma */
  position: relative;
}


/* ================================================================
   HEADER SECTION
   Top row containing the logo block and the Inquiries nav button.
   Figma: logo at top: 43px left: 63px — nav button at same row.
   JS target: #site-header, [data-animate="logo"], [data-animate="nav-cta"]
   ================================================================ */
.site-header {
  display: flex;
  align-items: flex-start;        /* Align to top baseline like Figma */
  justify-content: space-between;
  padding-top: var(--space-header-y); /* Match Figma top: 43.73px */
  padding-bottom: 0;
}


/* ----------------------------------------------------------------
   LOGO BLOCK
   Wraps the logo.svg file (badge + wordmark combined).
   Figma group: 107.6px × 64.66px — SVG ships at 108×65.
   JS target: #logo, [data-animate="logo"]
   ---------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;

  /* JS: add class .logo--visible to trigger entrance animation */
  opacity: 1; /* Set to 0 in animations.js before page load for fade-in */
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
}

/* Logo SVG image
   Width/height match Figma group dimensions (107.6×64.66px).
   Pixel-perfect at 1× — SVG scales cleanly on retina displays.   */
.logo__svg {
  /* Match Figma: Group 1410103810 width 107.6px × height 64.66px */
  width:  107.6px;
  height: 64.66px;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}


/* ----------------------------------------------------------------
   SITE NAV / INQUIRIES BUTTON
   Rectangle 173: dark rounded-rect CTA.
   Figma: bg #272727, border 1px solid #333333, border-radius 4px,
          width ~97px, height ~43px.
   JS target: [data-animate="nav-cta"]
   ---------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
}

.btn-inquiries {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Figma dimensions (Rectangle 173): 97.38px × 42.76px */
  min-width: 97px;
  height: 43px;
  padding: 0 18px;

  /* Figma fill and border */
  background-color: var(--color-surface);   /* #272727 */
  border: 1px solid var(--color-border);    /* #333333 */
  border-radius: var(--radius-btn);         /* 4px */

  /* Figma text: Ovo 15px, color #CCCCCC */
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-nav);             /* #CCCCCC */
  line-height: 17px;

  /* Smooth hover transition */
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);

  cursor: pointer;
}

/* Inquiries button hover state
   JS can also add .btn-inquiries--hovered via mousemove for
   more sophisticated cursor-follow effects.                        */
.btn-inquiries:hover {
  background-color: var(--color-border);
  color: #FFFFFF;
}


/* ================================================================
   INTRO / TAGLINE SECTION
   Long descriptive paragraph below the header.
   Figma: top: 164px, width ~722px, Ovo 24px, color #252525,
          letter-spacing -0.02em, line-height 27px.
   JS target: #intro, [data-animate="tagline"]
   ================================================================ */
.intro {
  margin-top: 77px; /* Derived: Figma top 164px minus header height ~87px */
  max-width: 722px; /* Matches Figma text block width */
}

.intro__text {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);  /* #252525 */

  /* JS: add class .intro__text--visible for reveal animation */
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
}

.intro__text + .intro__text {
  margin-top: 24px;
}


/* ================================================================
   DASHED DIVIDER
   Line 1 — full-width horizontal rule between intro and cards.
   Figma: border: 1px dashed #545454, top: 400px, width ~1327px.
   JS target: #divider — can animate scaleX from 0→1 on load.
   ================================================================ */
.divider {
  margin-top: 72px; /* Space between intro text bottom and the line */
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--color-divider);  /* #545454 */

  /* JS: animate transform: scaleX(0) → scaleX(1) for draw-on effect */
  transform-origin: left center;
  transition: transform 0.8s ease;
}


/* ================================================================
   PORTFOLIO CARDS GRID
   Three equal dark cards in a row below the divider.
   Figma: each card ~350px × 448px, gap ~22px, top: 475px.
   JS target: #portfolio, [data-animate="card"] (staggered by data-index)
   ================================================================ */
.portfolio {
  margin-top: 28px; /* Space between divider line and card tops */
  padding-bottom: 60px;
}

/* Three-column equal grid matching Figma's three rectangles */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Equal thirds, ~350px each */
  gap: 22px; /* Approximate gutter from Figma positions */
}


/* ================================================================
   CARD COMPONENT
   Individual portfolio project card (Rectangle 170 / 171 / 172).
   Figma: bg #1C1C1C, border-radius 15px, height ~448px.
   JS target: .card, [data-animate="card"], [data-index]
   ================================================================ */
.card {
  background-color: var(--color-near-black);  /* #1C1C1C */
  border-radius: var(--radius-card);           /* 15px */
  min-height: 448px;
  padding: 28px 33px 28px 33px; /* Inner padding — derived from Figma text offsets */

  display: flex;
  flex-direction: column;
  gap: 16px;

  /* Hover lift effect — smooth translateY */
  transition: transform var(--transition-spring),
              box-shadow var(--transition-base);

  /* JS: set initial opacity: 0 + translateY(20px) before reveal */
  opacity: 1;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}


/* ----------------------------------------------------------------
   CARD TITLE
   Project name — appears at top of card interior.
   Figma: Ovo 24px, color #FFFFFF, letter-spacing -0.04em, top: 503px.
   ---------------------------------------------------------------- */
.card__title {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: -0.04em;
  color: var(--color-text-white);  /* #FFFFFF */
}


/* ----------------------------------------------------------------
   CARD VISUAL (Media Placeholder)
   Empty area for future images, video, or canvas elements.
   Grows to fill available space between title and description.
   JS: inject <img>, <video>, or <canvas> inside .card__visual.
   ---------------------------------------------------------------- */
.card__visual {
  flex: 1;               /* Takes all available space between title and footer */
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  min-height: 180px;     /* Minimum visual breathing room */

  /* Subtle inner border for placeholder visibility */
  border: 1px dashed rgba(255, 255, 255, 0.06);

  /* Transition for when media is injected via JS */
  transition: opacity var(--transition-slow);
}


/* ----------------------------------------------------------------
   CARD DESCRIPTION
   Short tagline text below the visual area.
   Figma: Ovo 16px, line-height 18px, color #848484, top: 792px.
   ---------------------------------------------------------------- */
.card__description {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-muted);  /* #848484 */
  max-width: 214px; /* Matches Figma text block width ~213.58px */
}






/* ================================================================
   RESPONSIVE ADJUSTMENTS
   The Figma is 1440px desktop. These rules adapt the layout for
   smaller viewports while preserving the design intent.
   ================================================================ */

/* --- Large tablet / small desktop (< 1100px) --- */
@media (max-width: 1100px) {
  .page {
    padding: 0 40px;
  }

  .intro {
    max-width: 100%;
  }

  /* Stack cards to 2 columns on medium screens */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Tablet (< 768px) --- */
@media (max-width: 768px) {
  .page {
    padding: 0 24px;
  }

  .site-header {
    padding-top: 32px;
  }

  /* Scale logo SVG down proportionally on tablet */
  .logo__svg {
    width:  80px;
    height: 49px;
  }

  .intro {
    margin-top: 48px;
  }

  .intro__text {
    font-size: 20px;
    line-height: 24px;
  }

  .divider {
    margin-top: 48px;
  }

  /* Single column on tablet */
  .portfolio__grid {
    grid-template-columns: 1fr;
  }

  .card__description {
    max-width: 100%;
  }
}

/* --- Mobile (< 480px) --- */
@media (max-width: 480px) {
  .page {
    padding: 0 16px;
  }

  .intro__text {
    font-size: 18px;
  }

  .btn-inquiries {
    font-size: 13px;
    min-width: 80px;
    height: 36px;
  }
}