/* ==========================================================================
   Featured case study — 1:1 port of #work-home on dsgnmate.webflow.io
   --------------------------------------------------------------------------
   A single case study presented as a full-width editorial spread: a hairline
   rule, then a two-column grid — project title / description + arrow on the
   top row, tags + cover image on the bottom row.

   Scroll behaviour (from the site's IX2 payload, verified against the live
   page). See js/work-reveal.js:
     a-61  each .divider   width 0 -> 100%,  750ms easeIn, on entering view
     a-68  the card        blur(20px)/opacity 0 -> sharp, 500ms inSine,
                           triggered when .cs-wrapper-home enters view
     a-48/49  the arrow    opacity .25 -> 1 on card hover (250ms in/200ms out)

   Written mobile-first; computed values match Webflow's desktop-first cascade
   at each of its breakpoints (tiny <=479, small 480-767, medium 768-991,
   main >=992, plus a >=1440 type-size step).
   ========================================================================== */

/* DEVIATION from the 1:1 port: the reference's .section carries no padding —
   spacing came entirely from .cs-wrapper-home's top margin (6em/10em below).
   Adding the "Case Study" heading (not in the reference) needs its own
   leading space, so .section-work now takes top padding the same way
   .section-peek does, and .cs-wrapper-home's margin-top is reduced to just
   the heading-to-card gap instead of carrying the whole section's spacing. */
.section-work {
  display: block;
  height: auto;
  padding: 4rem 0 0;
}

/* The reference relies on Webflow's .w-container clearfix (::before/::after
   with display:table) to stop .cs-wrapper-home's top margin collapsing out of
   the section. flow-root is the modern equivalent. */
.section-work .container {
  display: flow-root;
}

/* --------------------------------------------------------------------------
   Section heading — "Case Study", matching .section-peek .peek-heading
   -------------------------------------------------------------------------- */
.section-work .cs-heading {
  margin: 0 0 2rem;
  color: var(--color-navy-primary);
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  letter-spacing: -.03em;
  text-align: center;
}

.section-work .cs-wrapper-home {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Hairline rules
   -------------------------------------------------------------------------- */
.section-work .divider {
  display: block;
  width: 100%;
  height: 1.5px;
  margin: 0;
  background-color: var(--color-soft-black);
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */
.section-work .cs-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding-top: 2em;
  padding-bottom: 4em;
  color: inherit;
  text-decoration: none;
}

.section-work .grid-cs-project-wrapper {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 100%;
  column-gap: 2em;
  row-gap: 4em;
}

.section-work .grid-cs-project-wrapper.top {
  margin-bottom: 2em;
}

.section-work .grid-cs-project-wrapper.bottom {
  flex-direction: column-reverse;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.section-work .hp-project-title,
.section-work .cs-description-homepage {
  margin: 0;
  color: var(--color-soft-black);
  font-family: var(--font-family-primary);
  font-size: 1.5em;
  line-height: 1.4;
  letter-spacing: -.03em;
}

.section-work .hp-project-title { font-weight: 400; }
.section-work .cs-description-homepage { font-weight: 300; width: 100%; }

.section-work .description-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2em;
}

.section-work .description-wrapper.cs-home {
  align-items: flex-start;
  margin-top: -3.4em;
}

.section-work .arrow-right-black {
  display: none;
  width: 30px;
  height: auto;
  flex-shrink: 0;
  opacity: .25;
  transition: opacity 200ms;
}

.section-work .cs-link:hover .arrow-right-black {
  opacity: 1;
  transition: opacity 250ms;
}

/* --------------------------------------------------------------------------
   Tags column
   -------------------------------------------------------------------------- */
.section-work .cs-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 0;
  background-color: transparent;
}

.section-work .paragraph {
  margin: 0 0 .5em;
  color: var(--color-soft-black);
  font-family: var(--font-family-secondary);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

/* Font size is inherited from .container (14px below 992px), which is what
   sizes .all-caps — do not pin it here. */
.section-work .tag-casestudy {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
  color: var(--color-soft-black);
}

.section-work .all-caps {
  margin: 0;
  font-size: .69em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.section-work .rule-mini {
  display: block;
  width: 9px;
  height: 1px;
  margin: 14px 0;
  background-color: var(--color-gray-warm);
}

/* --------------------------------------------------------------------------
   Cover image
   -------------------------------------------------------------------------- */
.section-work .div-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.section-work .cs-work-img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   480px and up  (Webflow "small")
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .section-work .cs-heading {
    margin-bottom: 3rem;
    font-size: 80px;
  }

  .section-work .cs-link { flex-direction: row; }

  .section-work .cs-meta { flex-direction: row; }

  .section-work .cs-description-homepage { width: 30ch; }

  .section-work .arrow-right-black { display: block; width: 35px; }

  .section-work .tag-casestudy { margin-top: 0; }

  .section-work .rule-mini {
    width: 25px;
    margin: 0 5px;
  }
}

/* --------------------------------------------------------------------------
   768px and up  (Webflow "medium")
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section-work .cs-wrapper-home { margin-top: 3em; }

  .section-work .cs-link {
    flex-direction: column;
    padding-top: 4em;
    padding-bottom: 8em;
  }

  .section-work .cs-meta { flex-direction: column; }

  .section-work .grid-cs-project-wrapper {
    display: grid;
    flex-direction: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.25fr;
    grid-auto-columns: 1fr;
  }

  .section-work .grid-cs-project-wrapper.top { margin-bottom: 4em; }

  .section-work .grid-cs-project-wrapper.bottom {
    flex-direction: row;
    grid-template-columns: .25fr .75fr;
    row-gap: 2em;
  }

  .section-work .hp-project-title,
  .section-work .cs-description-homepage { font-size: 2em; }

  .section-work .description-wrapper {
    width: 100%;
    margin-top: 1em;
  }

  .section-work .description-wrapper.cs-home { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   992px and up  (Webflow "main")
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .section-work { padding-top: 6rem; }

  .section-work .cs-heading {
    font-size: 64px;
  }

  .section-work .cs-wrapper-home { margin-top: 4em; }

  .section-work .grid-cs-project-wrapper {
    grid-template-columns: .25fr .75fr;
  }

  .section-work .grid-cs-project-wrapper.bottom { row-gap: 4em; }

  .section-work .hp-project-title,
  .section-work .cs-description-homepage { font-size: 2.5em; }

  .section-work .description-wrapper { margin-top: 2em; }
  .section-work .description-wrapper.cs-home { margin-top: 0; }

  .section-work .arrow-right-black { width: 4em; }
}

/* --------------------------------------------------------------------------
   1440px and up
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .section-work .hp-project-title,
  .section-work .cs-description-homepage { font-size: 2.3em; }
}

/* --------------------------------------------------------------------------
   Scroll reveals
   Hidden states apply only once js/work-reveal.js has claimed the page, so
   the section stays readable without JS and under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.js-reveal .section-work .divider {
  width: 0;
  /* Webflow "easeIn" */
  transition: width 750ms cubic-bezier(.42, 0, 1, 1);
}

.js-reveal .section-work .divider.is-revealed {
  width: 100%;
}

.js-reveal .section-work .cs-link {
  opacity: 0;
  filter: blur(20px);
  /* Webflow "inSine" */
  transition: opacity 500ms cubic-bezier(.47, 0, .745, .715),
              filter 500ms cubic-bezier(.47, 0, .745, .715);
}

.js-reveal .section-work .cs-wrapper-home.is-revealed .cs-link {
  opacity: 1;
  filter: blur(0);
}