/* Work pages (/work/ and /work/<slug>/). Loaded only by those pages, after application.css and orangecard.css.
   Cards, grid, buttons and the closing call to action come from the main stylesheet; this file adds the hero,
   the tag line on each card and the placeholder panel used until a project has a real image. */

/* Hero: heading, one line of text and the button, on the page's left edge. */
.work-hero .container {
  padding-top: var(--spacing--x-large);
}

.work-hero__text {
  max-width: var(--p-max-width);
}

/* The two tags above each card's name. */
.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);
}

/* Placeholder panel, shown while a project has no image (image: null in src/data/work.js). Same 22:15 shape as
   thoughtbot's card images, brand orange with the project's name in the heading font, dark text as on the buttons. */
.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%;
}

/* The main stylesheet dims card images with a 50% black layer that lifts on hover. Over the plain orange panel that
   reads as muddy brown, so placeholders get a lighter layer; real images keep thoughtbot's. */
.cards-grid__image-container:has(> .work-placeholder)::after {
  opacity: 0.15;
}

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

.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;
}

/* Case-study pages (/work/<slug>/). The hero grid (title, then project / services) is thoughtbot's
   case-study-hero-grid from the main stylesheet; these rules add the labels, the image and the story rows. */
.work-case-hero .container {
  padding-top: var(--spacing--x-large);
}

.work-case-hero__headline {
  margin-bottom: 0;
}

/* The headline is the page's h1, so it takes the site's h1 font (Bricolage Grotesque, 1.1x with normal letter-spacing,
   as in orangecard.css) at the heading-2 size; .type-heading would otherwise set it back to the body heading font. */
h1.work-case-hero__headline {
  font-family: "Bricolage Grotesque", var(--font-family--heading);
  font-size: calc(var(--font-size--heading-2-fluid) * 1.1);
  letter-spacing: 0;
}

/* thoughtbot's grid leaves an empty first column from 960px; ours starts at the page edge, in line with the logo,
   the image and the story below. */
@media (min-width: 60em) {
  .work-case-hero .case-study-hero-grid {
    grid-template-areas: "title title title ." "client services description .";
    grid-template-columns: 2fr 3fr 3fr 4fr;
  }
}

.work-case__label {
  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--xx-small);
}

.work-case__image {
  margin-top: var(--spacing--x-large);
}

.work-case__image-panel {
  border-radius: var(--border-radius--case-study);
  width: 100%;
}

.work-case__image img {
  display: block;
  height: auto;
}

/* A wide letterbox for the placeholder from tablet up, so the story starts within the first screen. */
@media (min-width: 48em) {
  .work-case__image .work-placeholder {
    aspect-ratio: 12 / 5;
    padding: 4% 5%;
  }

  .work-case__image .work-placeholder__name {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }
}

/* The story: one row per part, a thin rule between rows, heading on the left and text on the right from 960px. */
.work-case-story.page-section {
  padding-top: 0;
}

.work-case-story__row {
  border-top: var(--border--light);
  grid-row-gap: var(--spacing--small);
  padding: var(--spacing--large) 0;
}

.work-case-story__row:last-of-type {
  border-bottom: var(--border--light);
}

.work-case-story__heading {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.work-case-story__body {
  grid-column: 1 / -1;
  max-width: var(--p-max-width);
}

@media (min-width: 60em) {
  .work-case-story__heading {
    grid-column: 1 / span 4;
  }

  .work-case-story__body {
    grid-column: 5 / span 8;
  }
}

.work-case-quote {
  margin: var(--spacing--x-large) 0 0;
}

/* The featured card on /work/: from 960px, where its text and image sit side by side, the text sits at the
   bottom left, level with the bottom of the image. */
@media (min-width: 60em) {
  .work-card.cards-grid__card--featured .cards-grid__text-wrapper {
    align-self: end;
  }
}