@charset "UTF-8";
/*!
 * /resource/asana/ 70169 EN + /pl/zasoby/asana/ 70181 PL — template-resource.php.
 *
 * Figma 30367:23540 desktop / 30367:23741 mobile (EN). Bootstrap 5.3, .container
 * and .btn.btn-atom arrive via main.min.css on this template and are not restated.
 * The case-study cards are styled by case-study-carousel.min.css and the blog cards
 * by style.css (.post_item); only what this page's light bands change is here.
 *
 * TYPE, desktop -> <=767px:
 *   title 48/1.2 700 (em 400 italic) -> 32/1.3
 *   h2 40/1.3 700 (em 400 italic)    -> 28/1.3
 *   text 20/1.6                      -> 16/1.6
 *   pill 20/1.4 700 caps             -> 16/1.4
 */
.rs-res {
  --rs-res-ink: var(--rs-black-prime, #34383c);
  --rs-res-ink-soft: var(--rs-black-second, #5d636a);
  --rs-res-teal: var(--rs-teal-00, #408897);
  --rs-res-grey: #f9f9f9;
  --rs-res-coral: var(--rs-accent-coral, #f35b54);
  color: var(--rs-res-ink-soft);
  font-family: var(--rs-font-body);
  font-size: 1.25rem;
  line-height: 1.6;
}
.rs-res strong {
  font-weight: 700;
}

/* Zero-specificity resets, so the shared cards' own rules (style.css .post_img img,
   the carousel partial) still win inside this page. */
:where(.rs-res) p {
  margin: 0;
}

:where(.rs-res) img {
  max-width: 100%;
  height: auto;
}

.rs-res__title,
.rs-res__h2,
.rs-res__cta-title {
  margin: 0;
  color: var(--rs-res-ink);
  font-family: var(--rs-font-display);
  font-weight: 700;
  /* Wrap, don't hyphenate: auto hyphens split short PL words ("ro-bić") at 28px. */
  overflow-wrap: break-word;
}
.rs-res__title em,
.rs-res__title span,
.rs-res__h2 em,
.rs-res__h2 span,
.rs-res__cta-title em,
.rs-res__cta-title span {
  font-weight: 400;
}

.rs-res__h2 {
  font-size: 2.5rem;
  line-height: 1.3;
}

/* 1 — Hero ----------------------------------------------------------------- */
.rs-res__hero {
  padding: 90px 0 60px;
  text-align: center;
}

.rs-res__hero-logo {
  width: 120px;
  margin-bottom: 40px;
}

.rs-res__title {
  /* Figma's 753 fits EN; PL "Asana: Kompendium Wiedzy dla" needs ~830 or "dla" orphans. */
  max-width: 900px;
  margin: 0 auto;
  font-size: 3rem;
  line-height: 1.2;
}
.rs-res__title em {
  display: block;
}

.rs-res__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 15px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}
.rs-res__tags li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 15px;
  border-radius: 50%;
  background: var(--rs-res-coral);
  vertical-align: middle;
}

/* 2 — Intro: pyramid over the teal box --------------------------------------- */
.rs-res__intro {
  padding: 70px 0 166px;
  background: linear-gradient(#fff 55%, var(--rs-res-grey) 55%);
}

.rs-res__intro-box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 443px;
  padding: 50px 40px 50px 0;
  border-radius: 24px;
  background: radial-gradient(106.55% 141.42% at 90% 50%, #1c94ac 34.13%, #94e0c9 100%);
}

/* Staging's geometry: the 496px pyramid starts 50px in and 40px above the box; its
   webp carries ~110px of transparent shadow below, hence the deeper bottom bleed. */
.rs-res__pyramid {
  position: relative;
  flex: 0 0 546px;
  align-self: flex-start;
  margin: -90px 0 -160px;
}

.rs-res__pyramid-arrow {
  position: absolute;
  left: 5px;
  top: 224px;
  width: 162px;
}

.rs-res__pyramid-img {
  position: relative;
  display: block;
  width: 496px;
  margin-left: 50px;
}

.rs-res__intro-text {
  flex: 1 1 auto;
  margin-left: auto;
  color: #fff;
  max-width: 548px;
}
.rs-res__intro-text p + p {
  margin-top: 14px;
}

.rs-res__intro-logo {
  display: inline-block;
  width: 20px;
  margin-top: -4px;
  vertical-align: middle;
}

/* 3–6 — The four layers ------------------------------------------------------- */
.rs-res__layers {
  padding: 0 0 10px;
  background: var(--rs-res-grey);
}

.rs-res__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.rs-res__row + .rs-res__row {
  margin-top: 11px;
}

.rs-res__row-text {
  flex: 0 1 611px;
}

.rs-res__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 10px 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--rs-res-pill-a), var(--rs-res-pill-b));
  color: #fff;
  font-family: var(--rs-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 32px;
  text-transform: uppercase;
}

.rs-res__row--strategy {
  --rs-res-pill-a: #a27346;
  --rs-res-pill-b: #ca9b67;
}

.rs-res__row--planning {
  --rs-res-pill-a: #882b1b;
  --rs-res-pill-b: #b06032;
}

.rs-res__row--processes {
  --rs-res-pill-a: #413239;
  --rs-res-pill-b: #6e433c;
}

.rs-res__row--productivity {
  --rs-res-pill-a: #2d6f21;
  --rs-res-pill-b: #508226;
}

/* Dashed rail with a diamond on top and an arrowhead below, the height of its copy.
   Replaces staging's fixed-height arrow SVGs (296/529/657px), which could not follow
   the text. The last row has no rail, as on staging. */
.rs-res__rail {
  position: relative;
  padding: 0 0 40px 30px;
  line-height: 33px;
}
.rs-res__rail p + p {
  margin-top: 14px;
}
.rs-res__rail::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 8px;
  border-left: 2px dashed var(--rs-res-ink-soft);
}
.rs-res__rail::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 0;
  border: 6px solid transparent;
  border-top: 10px solid var(--rs-res-ink-soft);
  border-bottom: 0;
}

.rs-res__row--productivity .rs-res__rail {
  padding-bottom: 0;
}
.rs-res__row--productivity .rs-res__rail::before, .rs-res__row--productivity .rs-res__rail::after {
  content: none;
}

.rs-res__shot {
  flex: 0 0 541px;
  margin-right: -32px;
  /* The webp carries its own card frame and soft shadow. */
}
.rs-res__shot img {
  display: block;
}

/* 7 — Work Graph + As a result ------------------------------------------------ */
.rs-res__graph {
  padding: 55px 0 68px;
}
.rs-res__graph .rs-res__h2 {
  margin-bottom: 40px;
}

.rs-res__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

.rs-res__graph-img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

/* The screenshot stack is 589px with ~29px of baked shadow, which staging lets bleed
   past the container edge. */
.rs-res__sheets {
  display: grid;
  grid-template-columns: 1fr 589px;
  align-items: start;
  gap: 30px;
  margin: 60px -29px -10px 0;
}

.rs-res__result {
  display: flex;
  align-items: center;
  gap: 60px;
}
.rs-res__result .rs-res__h2 {
  flex: none;
  margin: 0;
}
.rs-res__result p {
  flex: 1 1 0;
  color: var(--rs-res-ink);
  font-family: var(--rs-font-display);
  font-style: italic;
  line-height: 1.4;
}
.rs-res__result p strong {
  font-style: normal;
}

/* 252px hairline ending in a chevron (staging's Arrow-6.svg, #a0babd). */
.rs-res__result-rule {
  position: relative;
  flex: 0 0 252px;
  height: 2px;
  background: #a0babd;
}
.rs-res__result-rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border: solid #a0babd;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

/* 8 — Case studies (light band: repaint the partial's white controls, as Home does) */
.rs-res__cases {
  padding: 80px 0 40px;
  background: var(--rs-res-grey);
}
.rs-res__cases .caseStudySwiper .swiper-button-next path,
.rs-res__cases .caseStudySwiper .swiper-button-prev path {
  fill: var(--rs-res-teal);
}
.rs-res__cases .caseStudySwiper .swiper-pagination-bullet {
  background: var(--rs-res-teal);
  opacity: 0.3;
}
.rs-res__cases .caseStudySwiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.rs-res__cases-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.rs-res__cases-head p {
  max-width: 558px;
  margin-top: 20px;
}
.rs-res__cases-head .btn {
  flex: none;
}

/* 9 — Do's & Don'ts ------------------------------------------------------------- */
.rs-res__dos {
  padding: 60px 0;
}

/* Figma's 91x63 "icons" group: two 42px tiles rotated 15deg, whose 51px bounding
   boxes sit at (0,0) and (40,12). The SVGs are 108x130 at 1:1 with the drop-shadow
   filter padding baked in; each tile's bounding box starts at (28,0) in the SVG. */
.rs-res__dos-icons {
  position: relative;
  width: 91px;
  height: 63px;
  margin: 0 auto;
}

.rs-res__dos-icon {
  position: absolute;
  top: 0;
  left: -28px;
  width: 108px;
  max-width: none;
  height: 130px;
}
.rs-res__dos-icon--dont {
  top: 12px;
  left: 12px;
}

.rs-res__dos-title {
  max-width: 560px;
  margin: 20px auto;
}

.rs-res__dos-sub {
  max-width: 518px;
  margin: 0 auto 50px;
}

/* 10 — Blog list ------------------------------------------------------------------ */
.rs-res__blog {
  padding: 80px 0;
  background: var(--rs-res-grey);
  /* style.css gives .post_item display:flex, which would beat the UA [hidden]. */
}
.rs-res__blog .rs-res__h2 {
  margin-bottom: 40px;
}
.rs-res__blog .rs-res__more-item[hidden] {
  display: none;
}

.rs-res__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--rs-res-coral);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.rs-res__more[hidden] {
  display: none;
}
.rs-res__more:hover, .rs-res__more:focus-visible {
  text-decoration: underline;
}

/* 11 — Delegate CTA ---------------------------------------------------------------- */
.rs-res__cta {
  padding: 60px 0;
}

.rs-res__cta-box {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 458px;
  overflow: hidden;
  border-radius: 4px 229px 4px 4px;
  /* The faint rays Figma masks in at 10%, fanned from behind the photo. */
  background: repeating-conic-gradient(from 180deg at 78% 60%, rgba(255, 255, 254, 0.1) 0deg 0.6deg, transparent 0.6deg 12deg), linear-gradient(135deg, #408897, #35717d);
}

.rs-res__cta-text {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 754px;
  padding: 60px 0 60px 60px;
}
.rs-res__cta-text .btn {
  margin-top: 50px;
}

.rs-res__cta-apps {
  display: flex;
  gap: 15px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.rs-res__cta-title {
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.3;
}

.rs-res__cta-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 460px;
}

/* ------------------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .rs-res__shot {
    flex-basis: 45%;
  }
  .rs-res__pyramid {
    flex-basis: 420px;
  }
  .rs-res__pyramid-img {
    width: 380px;
    margin-left: 30px;
  }
  .rs-res__cta-photo {
    width: 360px;
  }
  .rs-res__cta-text {
    max-width: 60%;
  }
}
@media (max-width: 991px) {
  .rs-res__intro-box {
    flex-direction: column-reverse;
    padding: 40px 30px 0;
  }
  .rs-res__pyramid {
    flex-basis: auto;
    align-self: center;
    margin: 30px 0 -100px;
  }
  .rs-res__pyramid-img {
    margin-left: 0;
  }
  .rs-res__pyramid-arrow {
    left: -60px;
    top: 40%;
  }
  .rs-res__intro-text {
    max-width: none;
  }
  .rs-res__row {
    flex-direction: column;
  }
  .rs-res__row-text,
  .rs-res__shot {
    flex-basis: auto;
  }
  .rs-res__shot {
    margin: 0 0 0 30px;
  }
  .rs-res__sheets {
    grid-template-columns: 1fr 1fr;
    margin-right: 0;
  }
  .rs-res__intro {
    padding-bottom: 130px;
  }
  .rs-res__cases-head,
  .rs-res__result {
    flex-direction: column;
    align-items: flex-start;
  }
  .rs-res__result-rule {
    display: none;
  }
}
@media (max-width: 767px) {
  .rs-res {
    font-size: 1rem;
  }
  .rs-res__h2,
  .rs-res__cta-title {
    font-size: 1.75rem;
  }
  .rs-res__hero {
    padding: 40px 0 30px;
  }
  .rs-res__hero-logo {
    width: 101px;
    margin-bottom: 20px;
  }
  .rs-res__title {
    font-size: 2rem;
    line-height: 38px;
  }
  .rs-res__tags {
    gap: 6px 10px;
    font-size: 0.75rem;
  }
  .rs-res__tags li + li::before {
    margin-right: 10px;
  }
  .rs-res__intro {
    padding-bottom: 100px;
  }
  .rs-res__intro-box {
    padding: 20px 20px 0;
    border-radius: 12px;
  }
  .rs-res__pyramid-img {
    width: 280px;
  }
  .rs-res__pyramid-arrow {
    width: 110px;
    left: -10px;
  }
  .rs-res__layers {
    padding-bottom: 60px;
  }
  .rs-res__row + .rs-res__row {
    margin-top: 40px;
  }
  .rs-res__pill {
    padding: 8px 15px;
    font-size: 1rem;
  }
  .rs-res__graph,
  .rs-res__cases,
  .rs-res__blog {
    padding: 50px 0;
  }
  .rs-res__cols,
  .rs-res__sheets {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .rs-res__sheets {
    margin: 40px 0;
  }
  .rs-res__intro {
    padding-top: 30px;
  }
  .rs-res__result {
    gap: 20px;
  }
  .rs-res__dos {
    padding: 40px 0 50px;
  }
  .rs-res__dos-sub {
    margin-bottom: 30px;
  }
  .rs-res__cta {
    padding: 30px 0;
  }
  .rs-res__cta-box {
    flex-direction: column;
    min-height: 0;
    padding-top: 150px;
    border-radius: 4px;
    background: var(--rs-res-teal);
  }
  .rs-res__cta-photo {
    top: 0;
    right: 0;
    bottom: auto;
    width: 189px;
  }
  .rs-res__cta-text {
    max-width: none;
    padding: 20px;
  }
  .rs-res__cta-text .btn {
    width: 100%;
    margin-top: 20px;
  }
  .rs-res__cta-apps {
    gap: 10px;
    margin-bottom: 20px;
  }
}