/* Recent Work: job pages, the /recent-work/ listing and the
   [drumroll_recent_work] grid. Fonts come from the theme; the accent comes
   from Settings or the site's own buttons (see the runtime script). */

/* Sizes use --dr-rem instead of rem: some themes (Bricks and others) set the
   page's root size to 62.5% (10px), which shrank every rem value here to 62.5%.
   --dr-rem is the root size, but never smaller than 16px. */
:root {
  --dr-rem: max(1rem, 16px);
}

.drw,
.drumroll-work-body {
  --drw-a: var(--drw-accent, var(--wp--preset--color--primary, #2f5bd3));
  --drw-line: rgba(0, 0, 0, 0.1);
  --drw-line: color-mix(in srgb, currentColor 13%, transparent);
}

/* ---------------------------------------------------------------------------
   Drumroll design
   ------------------------------------------------------------------------- */

.drw {
  display: block;
  box-sizing: border-box;
  max-width: none;
  margin: 0;
  padding: 0;
}
.drw *,
.drw *::before,
.drw *::after {
  box-sizing: border-box;
}
.drw img {
  max-width: 100%;
  height: auto;
}
.drw-wrap {
  width: 100%;
  max-width: calc(72 * var(--dr-rem));
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

/* Full width even inside a theme's centered container. */
.drw-bleed {
  width: calc(100vw - var(--drw-sbw, 0px));
  max-width: none;
  margin-left: calc(50% - (100vw - var(--drw-sbw, 0px)) / 2);
  margin-right: 0;
}

/* Banner: the first photo, darkened, with the title over it. --drw-overlap
   is the height of a see-through header floating over the banner. */
.drw .drw-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #1f2329;
  padding: calc(var(--drw-overlap, 0px) + clamp(44px, 7vw, 88px)) 0 clamp(32px, 5vw, 60px);
}
.drw .drw-hero--photo {
  display: flex;
  align-items: flex-end;
  min-height: calc(var(--drw-overlap, 0px) + clamp(300px, 40vw, 480px));
}
.drw .drw-hero--short {
  min-height: calc(var(--drw-overlap, 0px) + clamp(240px, 30vw, 360px));
}
.drw .drw-hero .drw-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.drw .drw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.72) 100%);
}
.drw .drw-hero-inner {
  position: relative;
  z-index: 1;
}
.drw .drw-kicker {
  display: inline-block;
  margin: 0 0 0.6em;
  color: #fff;
  opacity: 0.85;
  font-size: calc(0.85 * var(--dr-rem));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.drw .drw-kicker:hover {
  opacity: 1;
  text-decoration: underline;
}
.drw .drw-title {
  max-width: 22em;
  margin: 0 0 0.45em;
  padding: 0;
  color: inherit;
  font-size: clamp(calc(1.85 * var(--dr-rem)), calc(1.15 * var(--dr-rem)) + 2.4vw, calc(3 * var(--dr-rem)));
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.drw .drw-lede {
  max-width: 40em;
  margin: 0;
  color: inherit;
  font-size: calc(1.1 * var(--dr-rem));
  line-height: 1.55;
  opacity: 0.9;
}
.drw .drw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drw .drw-tag {
  margin: 0;
  padding: 0.38em 0.85em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: calc(0.875 * var(--dr-rem));
  line-height: 1.2;
}
.drw .drw-tag--price {
  background: var(--drw-a);
  color: var(--drw-on-a, #fff);
  font-weight: 600;
}

.drw .drw-main {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(24px, 4vw, 40px);
}
.drw .drw-story {
  max-width: calc(46 * var(--dr-rem));
  margin: 0 auto;
  font-size: calc(1.0625 * var(--dr-rem));
  line-height: 1.75;
}
.drw .drw-story > :first-child {
  margin-top: 0;
}
.drw .drw-story p {
  margin: 0 0 1.15em;
}
.drw .drw-story h2,
.drw .drw-h2 {
  margin: 1.6em 0 0.5em;
  font-size: clamp(calc(1.3 * var(--dr-rem)), calc(1.1 * var(--dr-rem)) + 0.6vw, calc(1.6 * var(--dr-rem)));
  line-height: 1.25;
}
.drw .drw-h2 {
  margin-top: 0;
}

.drw .drumroll-work-cost {
  margin: 2em 0 0;
  padding: 1.25em 1.4em;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  background: color-mix(in srgb, var(--drw-a) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--drw-a) 24%, transparent);
}
.drw .drumroll-work-cost .drumroll-work-cost-title {
  margin: 0 0 0.35em;
  font-size: calc(1.15 * var(--dr-rem));
  font-weight: 600;
}
.drw .drumroll-work-cost p:last-child {
  margin-bottom: 0;
}

.drw .drw-photos {
  display: grid;
  gap: 12px;
  max-width: calc(60 * var(--dr-rem));
  margin: 2.5em auto 0;
  grid-template-columns: repeat(3, 1fr);
}
.drw .drw-photos--1 {
  grid-template-columns: 1fr;
}
.drw .drw-photos--2 {
  grid-template-columns: 1fr 1fr;
}
.drw .drw-photos a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.drw .drw-photos img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.drw .drw-photos--1 img {
  aspect-ratio: auto;
  max-height: 640px;
}
.drw .drw-photos a:hover img {
  transform: scale(1.03);
}
@media (max-width: 640px) {
  .drw .drw-photos,
  .drw .drw-photos--2 {
    grid-template-columns: 1fr 1fr;
  }
  .drw .drw-photos--1 {
    grid-template-columns: 1fr;
  }
}

.drw .drw-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: calc(46 * var(--dr-rem));
  margin: 2.5em auto 0;
  padding: 1.4em 1.6em;
  border: 1px solid var(--drw-line);
  border-radius: 16px;
}
.drw .drw-cta strong {
  display: block;
  font-size: calc(1.15 * var(--dr-rem));
}
.drw .drw-cta span {
  opacity: 0.75;
}
.drw .drw-btn {
  display: inline-block;
  padding: 0.85em 1.4em;
  border-radius: 10px;
  background: var(--drw-a);
  color: var(--drw-on-a, #fff);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.drw .drw-btn:hover,
.drw .drw-btn:focus {
  color: var(--drw-on-a, #fff);
  filter: brightness(1.08);
  text-decoration: none;
}
.drw .drw-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  max-width: calc(46 * var(--dr-rem));
  margin: 1.5em auto 0;
  font-size: calc(0.95 * var(--dr-rem));
}

.drw .drw-more {
  margin-top: clamp(32px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--drw-line);
}
.drw .drw-all {
  margin: 1.5em 0 0;
}
.drw .drw-empty {
  max-width: 40em;
  font-size: calc(1.05 * var(--dr-rem));
}

/* Cards: listing, "More recent work" and the shortcode. */
.drw .drw-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.drw .drw-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--drw-line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.drw .drw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
}
.drw .drw-card-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}
.drw .drw-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}
.drw .drw-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 18px;
}
.drw .drw-card-service {
  color: var(--drw-a);
  font-size: calc(0.78 * var(--dr-rem));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.drw .drw-card-title {
  font-size: calc(1.05 * var(--dr-rem));
  font-weight: 600;
  line-height: 1.3;
}
.drw .drw-card-meta {
  font-size: calc(0.88 * var(--dr-rem));
  opacity: 0.7;
}
.drw .drw-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 2.5em 0 0;
}
.drw .drw-pages .page-numbers {
  padding: 0.5em 0.85em;
  border: 1px solid var(--drw-line);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.drw .drw-pages .current {
  border-color: transparent;
  background: var(--drw-a);
  color: var(--drw-on-a, #fff);
}
.drw.drw-embed {
  margin: 2.5em 0;
}

/* ---------------------------------------------------------------------------
   Laid out by the theme or one of the site's own sections: the details the
   plugin adds inside the post content.
   ------------------------------------------------------------------------- */

.drumroll-work-body {
  margin-top: 1.5em;
}
.drumroll-work-facts {
  margin: 0 0 1.25em;
  font-size: 0.9em;
  opacity: 0.75;
}
.drumroll-work-body .drumroll-work-lead {
  display: block;
  width: 100%;
  max-height: 560px;
  margin: 0 0 1.5em;
  object-fit: cover;
  border-radius: 12px;
}
.drumroll-work-body .drumroll-work-cost {
  margin: 1.75em 0 0;
  padding: 1.1em 1.3em;
  border: 1px solid var(--drw-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
}
.drumroll-work-body h2.drumroll-work-cost-title {
  margin: 0 0 0.35em;
  font-size: 1.25em;
  line-height: 1.3;
}
.drumroll-work-body .drumroll-work-cost p:last-child {
  margin-bottom: 0;
}
.drumroll-work-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 2em 0 0;
}
.drumroll-work-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}
.drumroll-work-links {
  margin: 2em 0 0;
  font-size: 0.95em;
}
.drumroll-work-links span {
  margin: 0 0.4em;
  opacity: 0.4;
}