/*
 * Winners Resources page modules.
 *
 * Loaded only on template-resources.php, and only when the page carries module rows. Measurements
 * are the design's own: coral #FF6D63 for the bands and accents, #E5E5E5 for the rules between
 * sections, body copy at #555 against #000 headings.
 *
 * Rules that touch the theme's classes (.section-heading h2, .btn) are scoped past
 * them on purpose: header.php prints the theme stylesheet after wp_head(), so this file always
 * loads first and would lose any tie on source order.
 */

/* --- Resource hero --- */
.resources-hero {
  padding: 100px 0;
  color: #000;
}

.resources-hero--text-white {
  color: #fff;
}

.resources-hero__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.resources-hero__content {
  max-width: 600px;
}

.resources-hero__subtitle {
  display: block;
  margin-bottom: 15px;
  font-size: .9em;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: inherit;
}

.resources-hero .resources-hero__title {
  margin: 0 0 25px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: normal;
  color: inherit;
}

.resources-hero__intro {
  line-height: 1.7;
  color: rgba(0, 0, 0, .75);
}

.resources-hero--text-white .resources-hero__intro {
  color: rgba(255, 255, 255, .8);
}

.resources-hero__intro p:last-child {
  margin-bottom: 0;
}

.resources-hero__btn-wrap {
  margin-top: 25px;
}

.resources-hero__image {
  flex-shrink: 0;
  max-width: 380px;
}

.resources-hero__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Shared section rhythm --- */
.resources-how-to,
.resources-links,
.resources-slider {
  padding: 60px 0;
  border-top: 1px solid #e5e5e5;
}

.resources-slider {
  overflow-x: clip;
}

/*
 * The gap below a heading sits on the wrapper, not the h2. The theme's
 * `.section-heading h2:last-child { margin-bottom: 0 }` has the same specificity as any rule this
 * file can write for that h2, and this file loads first, so the theme wins every time. The wrapper
 * carries one class more than the theme's `.section-heading`, so it wins wherever it loads.
 */
.resources-how-to .section-heading,
.resources-links .section-heading,
.resources-slider .section-heading {
  margin: 0 0 32px;
  padding-bottom: 0;
}

.resources-slider .section-heading {
  margin-bottom: 16px;
}

.resources-how-to .section-heading h2,
.resources-links .section-heading h2,
.resources-slider .section-heading h2 {
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
}

/* --- How it works --- */
/* A one-pixel grid gap over a grey backing draws the rules between the steps. */
.resources-how-to__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e5e5e5;
}

.resources-how-to__step {
  padding: 36px 32px;
  background: #fff;
}

/*
 * The padding belongs between the steps, not outside them: the outer edges line up with the
 * container, so every section on the page starts on the same left edge.
 */
.resources-how-to__step:first-child {
  padding-inline-start: 0;
}

.resources-how-to__step:last-child {
  padding-inline-end: 0;
}

.resources-how-to__number {
  display: block;
  margin-bottom: 16px;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
  color: #FF6D63;
}

.resources-how-to .resources-how-to__title {
  margin: 0 0 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #000;
}

.resources-how-to__text {
  line-height: 1.7;
  color: #555;
}

.resources-how-to__text p:last-child {
  margin-bottom: 0;
}

/* --- Links list --- */
.resources-links {
  background: #fafafa;
}

.resources-links .container {
  max-width: 600px;
}

.resources-links .section-heading {
  text-align: center;
}

.resources-links__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resources-links .resources-links__link {
  font-weight: 500;
  line-height: 1.5;
  color: #FF6D63;
  text-decoration: underline;
}

.resources-links .resources-links__link:hover,
.resources-links .resources-links__link:focus {
  opacity: .7;
}

/* --- Share slider --- */
.resources-slider__intro {
  margin: 0 0 50px;
  line-height: 1.7;
  color: #555;
}

.resources-slider__intro p:last-child {
  margin-bottom: 0;
}

/*
 * The row scrolls natively. The bar is the real scrollbar, styled to the design's 4px track, so it
 * reports the true position and can be dragged - which the theme's shared Swiper scrollbar cannot,
 * because app.js configures it without `draggable`. padding-bottom sets the gap above the bar.
 */
.resources-slider__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /*
   * The row runs the full width of the window, not the container: the design puts its heading in
   * the 1280px wrapper and leaves the scrolling row outside it, so the cards carry on past both
   * edges. The 24px gutters stop the first and last sitting flush against the glass.
   */
  margin-inline: calc(50% - 50vw);
  padding-inline: 24px;
  scrollbar-width: none;
}

.resources-slider__track::-webkit-scrollbar {
  display: none;
}

/*
 * The indicator sits in the container while the row runs the full width of the window, so it is a
 * bar of its own rather than the row's scrollbar. resources.js gives the thumb its width and
 * position, and hides the bar when there is nothing to scroll.
 */
.resources-slider__bar {
  position: relative;
  height: 4px;
  margin-top: 40px;
  background: #e0e0e0;
  cursor: pointer;
  touch-action: none;
}

.resources-slider__bar[hidden] {
  display: none;
}

.resources-slider__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: #000;
}

.resources-slider__slide {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
}

.resource-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  text-align: center;
}

.resource-card__image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 300px;
  margin-bottom: 20px;
}

.resource-card__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.resource-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
}

.resource-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
}

/* The theme's pill carries a 199px min-width, which is wider than an asset card. */
.resource-card__footer .btn {
  min-width: 0;
  margin-bottom: 0;
  padding: 9px 16px;
  font-size: 13px;
  background: #fff;
  color: #121212;
  border: 1px solid #121212;
}

.resource-card__footer .btn:hover,
.resource-card__footer .btn:focus {
  background: #121212;
  color: #fff;
}

/* --- Closing call to action --- */
.resources-cta {
  padding: 60px 0;
  background: #FF6D63;
  color: #000;
}

.resources-cta__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.resources-cta__content {
  max-width: 560px;
}

.resources-cta .resources-cta__title {
  margin: 0 0 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: inherit;
}

.resources-cta__text {
  line-height: 1.7;
  color: rgba(0, 0, 0, .7);
}

.resources-cta__text p {
  margin-bottom: 10px;
}

.resources-cta__text p:last-child {
  margin-bottom: 0;
}

.resources-cta__text strong {
  font-weight: 700;
  color: #000;
}

.resources-cta .resources-cta__btn {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 12px 36px;
  font-size: 15px;
  font-weight: 700;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  border-radius: 33px;
}

.resources-cta .resources-cta__btn:hover,
.resources-cta .resources-cta__btn:focus {
  background: transparent;
  color: #000;
}

@media (max-width: 1023px) {
  .resources-hero {
    padding: 60px 0;
  }

  .resources-how-to__grid {
    grid-template-columns: 1fr 1fr;
  }

  .resources-how-to__step:nth-child(odd) {
    padding-inline-start: 0;
  }

  .resources-how-to__step:nth-child(even) {
    padding-inline-end: 0;
  }
}

@media (max-width: 767px) {
  .resources-hero__layout,
  .resources-cta__layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .resources-hero__content,
  .resources-cta__content {
    max-width: 100%;
  }

  .resources-how-to__grid {
    grid-template-columns: 1fr;
  }

  .resources-how-to__step {
    padding-inline: 0;
  }
}