/* ========================================
   Talent Management Page - styles.css
   Section-specific styles only
   Common patterns in ../master/common.css
   Shared section styles in ../master/product-common.css
   ======================================== */


/* ========================================
   Section 1: Banner
   .zwc-banner-wrap
   (Layout from product-common.css)
   ======================================== */


/* ========================================
   Section 2: Dark Cards - Background Override
   .zwc-workplace-cards
   (Base styles in product-common.css)
   ======================================== */

.zwc-workplace-cards {
border-radius: 16px;
background: radial-gradient(59.12% 40.31% at -5.67% 74.34%, #A2005C 0%, rgba(75, 1, 21, 0.00) 100%), radial-gradient(67.34% 92.09% at 41.18% 142.67%, #A20025 0%, rgba(154, 0, 35, 0.90) 40.1%, rgba(75, 1, 21, 0.00) 100%), radial-gradient(100.73% 62.44% at 111.44% -28.55%, #A20025 0%, rgba(154, 0, 35, 0.90) 40.1%, rgba(75, 1, 21, 0.00) 100%), #000;
  position: relative;
  /* overflow: hidden; */
  margin-bottom: 80px;
}

.zwc-workplace-dark.zwc-workplace-cards {
background: radial-gradient(82.81% 70.12% at -7.81% -11.61%, #A20547 0%, rgba(75, 1, 21, 0.00) 100%), radial-gradient(99.16% 121.73% at 32.44% 153.89%, #CB0055 0%, rgba(75, 1, 21, 0.00) 100%), #4B0015;
}

.zwc-workplace-cards .zwc-inner-wrap h2 {
  max-width: 870px;
}

.zwc-workplace-cards#zwd1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* background: url("assets/tmbg1.png") no-repeat; */
background-size: 480px auto;
  pointer-events: none;
  width: 480px;
  height: 507px;
}

.zwc-workplace-cards#zwd1::after {
content: "";
  position: absolute;
  right: 0;
  bottom: -80px;
  /* background: url("assets/tmbg2.png") no-repeat; */
    background-size: auto;
  background-size: 560px auto;
  pointer-events: none;
  width: 575px;
  height: 483px;
}


.zwc-workplace-cards#zwd2::before {
content: "";
  position: absolute;
  left: 70px;
  top: 280px;
  /* background: url("assets/tmbg3.png") no-repeat; */
    background-size: auto;
  background-size: 150px auto;
  pointer-events: none;
  width: 480px;
  height: 147px;
}

.zwc-workplace-cards#zwd2::after {
content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  /* background: url("assets/tmbg4.png") no-repeat; */
    background-size: auto;
  background-size: 1229px auto;
  pointer-events: none;
  width: 1229px;
  height: 483px;
}


.featpages .zwc-feature-section.tabstyle2 .zwc-feature-tab h2 {
  max-width: 700px;
}


/* Sprite icon positions for dark cards */
#zwd1 .zwc-card:nth-child(1) .zwc-card-text h3::before {
  background-position: -1120px 0;
}

#zwd1 .zwc-card:nth-child(2) .zwc-card-text h3::before {
  background-position: -1250px 0;
}

#zwd1 .zwc-card:nth-child(3) .zwc-card-text h3::before {
  background-position: -1372px 0;
}

#zwd2 .zwc-card:nth-child(1) .zwc-card-text h3::before {
  background-position: -1496px 0;
}

#zwd2 .zwc-card:nth-child(2) .zwc-card-text h3::before {
  background-position: -1624px 0;
}

#zwd2 .zwc-card:nth-child(3) .zwc-card-text h3::before {
  background-position: -1742px 0;
}


/* ========================================
   Section 3: Feature Nav Tabs
   .zwc-feature-section
   (All base styles from product-common.css)
   ======================================== */

/* Sprite icon positions for feature tabs */
.zwc-talent-tabs .zwc-tab-title-wrap:nth-child(1) h3::before { background-position-x: -372.9px; }
.zwc-talent-tabs .zwc-tab-title-wrap:nth-child(2) h3::before { background-position-x: -406.6px; }
.zwc-talent-tabs .zwc-tab-title-wrap:nth-child(3) h3::before { background-position-x: -440.3px; }
.zwc-talent-tabs .zwc-tab-title-wrap:nth-child(4) h3::before { background-position-x: -474px; }

/* Decor blob blur for talent page */
.zwc-talent-tabs .zwc-decor-blob img {
  filter: blur(13px);
}


/* ========================================
   Section 4: Two Col Cards - Feedback
   .zwc-feedback-cards
   ======================================== */

.zwc-feedback-cards {
  padding: 40px 0;
}

.zwc-feedback-cards .zwc-section-inner-wrap h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -1.92px;
  color: #000;
  text-align: center;
max-width: 600px;
  margin: 0px auto 40px;
}

.featpages .zwc-appraisal-bento .zwc-otherfeatures-inner > h2 {
  max-width: 790px;
  margin: 0 auto 40px
}

.zwc-feedback-cards .zwc-twocol-row {
  display: flex;
  gap: 24px;
}

.zwc-feedback-cards .zwc-section-card {
  flex: 1;
}


.zwc-compensation-cards .zwc-section-card {
  background: none;
  border: none;
}


/* ========================================
   Section 5: Bento Grid - Appraisal
   .zwc-appraisal-bento
   (All base styles from product-common.css)
   ======================================== */

/* No page-specific overrides needed */


/* ========================================
   Section 6: Two Col Image Cards - Compensation
   .zwc-compensation-cards
   ======================================== */

.zwc-compensation-cards {
  padding: 80px 0;
}

.zwc-compensation-cards .zwc-section-inner-wrap h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -1.92px;
  color: #000;
  text-align: center;
  margin: 0 auto 40px;
}

.zwc-compensation-cards .zwc-twocol-row {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.zwc-compensation-cards .zwc-section-card {
  flex: 1;
  gap: 32px;
  display: flex;
  flex-direction: column;
}

.zwc-compensation-cards .zwc-section-card-img {
  background-color: #f5f5f4;
  border-radius: 12px;
  padding: 40px 24px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 450px;
}

.zwc-compensation-cards .zwc-section-card-img img {
  max-height: 100%;
  object-fit: contain;
}

.zwc-compensation-cards .zwc-section-card-txt {
  padding: 0;
  gap: 8px;
}

.zwc-compensation-cards .zwc-section-card-txt h3 {
  font-size: 24px;
  letter-spacing: -0.96px;
}

.zwc-compensation-cards .zwc-section-card-txt p {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.36px;
  max-width: 550px;
}


/* ========================================
   Section 7: Slide Carousel - Time Off
   .zwc-time-off
   ======================================== */

.zwc-time-off {
  padding: 100px 0 80px;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

.zwc-time-off .content-wrap {
  overflow: visible;
}

.zwc-time-off .zwc-slide-wrap .slick-list {
  overflow: visible;
}

.zwc-slide-section-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Slide header with title + nav */
.zwc-slide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.zwc-slide-header h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -2.56px;
  color: #000;
  max-width: 730px;
}

/* Navigation arrows - base styles in product-common.css */

/* Slick carousel overrides */
.zwc-time-off .zwc-slide-wrap .slick-track {
  display: flex;
}

.zwc-time-off .zwc-slide-wrap .slick-slide:first-child {
  width: 500px;
}

.zwc-time-off .zwc-slide-wrap .slick-slide {
  margin-right: 24px;
}

.zwc-time-off .zwc-slide-wrap .slick-slide:nth-child(odd) {
  width: 500px;
}

.zwc-time-off .zwc-slide-wrap .slick-slide:nth-child(even) {
  width: 640px;
}

/* Individual slide */
.zwc-slide-item {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Slide image */
.zwc-slide-item .zwc-slide-img {
  background-color: #f5f5f4;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

/* Slide title */
.zwc-slide-item h3 {
  font-family: var(--primaryfont-semibold);
  font-size: 24px;
  letter-spacing: -0.48px;
  color: #000;
  margin-bottom: 8px;
}

/* Slide description */
.zwc-slide-item p {
  font-family: var(--primaryfont-regular);
  /* font-size: 18px; */
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: #282828;
  max-width: 90%;
}


/* ========================================
   Section 8: Dark Cards Variant
   .zwc-workplace-dark
   ======================================== */

/* .zwc-workplace-dark .content-wrap {
  background:
    radial-gradient(ellipse at -10% -10%, rgba(162, 5, 71, 0.8) 0%, rgba(75, 1, 21, 0) 50%),
    radial-gradient(ellipse at 50% 150%, rgba(203, 0, 85, 0.6) 0%, rgba(75, 1, 21, 0) 50%),
    #4b0015;
} */

.zwc-workplace-dark .zwc-card {
  background-color: #240502;
}

.zwc-workplace-dark .zwc-card-text p {
  color: #ffc9c9;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.34px;
}


/* ========================================
   Section 10: Bottom CTA
   .zwc-bottom-cta-wrap (Master S17)
   Full-width background override
   ======================================== */

.zwc-bottom-cta-wrap {
  background:
radial-gradient(40.84% 109.79% at -1.92% 8.55%, #FF9D00 0%, rgba(193, 0, 7, 0.00) 100%), radial-gradient(33.08% 101.07% at 88.47% 102.02%, #F50093 0%, rgba(193, 0, 7, 0.00) 100%), #C10007;
  position: relative;
  overflow: hidden;
}

/* ftball1 - left bottom */
.zwc-bottom-cta-wrap::before {
  content: "";
  position: absolute;
  left: -60px;
  top: -60px;
  /* background: url("assets/ftball1.png") no-repeat; */
  background-size: contain;
  width: 280px;
  height: 280px;
  pointer-events: none;
}

/* ftball2 - right bottom */
.zwc-bottom-cta-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60px;
  /* background: url("assets/ftball2.png") no-repeat; */
  background-size: contain;
  width: 400px;
  height: 160px;
  pointer-events: none;
  transform: translate(-50%, 0);
}

.zwc-bottom-cta-wrap .content-wrap {
  background: none;
  border-radius: 0;
  max-width: 1280px;
  position: relative;
}

/* ft1 - person icon left */
.zwc-bottom-cta-wrap .content-wrap::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: 0;
  /* background: url("assets/ft1.png") no-repeat; */
  background-size: contain;
  width: 190px;
  height: 200px;
  pointer-events: none;
}

/* ft2 - stars right */
.zwc-bottom-cta-wrap .content-wrap::after {
  content: "";
  position: absolute;
right: -230px;
  bottom: -210px;
  /* background: url("assets/ft2.png") no-repeat; */
  background-size: contain;
  width: 340px;
  height: 340px;
  pointer-events: none;
}


/* ========================================
   Responsive - Small Desktop (1440px)
   ======================================== */

@media screen and (max-width: 1440px) {
  /* Two Col Cards */
  .zwc-feedback-cards .zwc-section-inner-wrap h2,
  .zwc-compensation-cards .zwc-section-inner-wrap h2 {
    font-size: 56px;
  }

  /* Carousel */
  .zwc-slide-header h2 {
    font-size: 56px;
  }
}


/* ========================================
   Responsive - Large Tablet (1280px)
   ======================================== */

@media screen and (max-width: 1280px) {
  /* Two Col Cards */
  .zwc-feedback-cards .zwc-section-inner-wrap h2,
  .zwc-compensation-cards .zwc-section-inner-wrap h2 {
    font-size: 48px;
    letter-spacing: -1.92px;
  }

  /* Carousel */
  .zwc-slide-header h2 {
    font-size: 48px;
    letter-spacing: -1.92px;
  }
}


/* ========================================
   Responsive - Tablet (1024px)
   ======================================== */

@media screen and (max-width: 1024px) {
  /* Two Col Cards stack */
  .zwc-feedback-cards .zwc-twocol-row,
  .zwc-compensation-cards .zwc-twocol-row {
    flex-direction: column;
  }

  .zwc-feedback-cards .zwc-section-inner-wrap h2,
  .zwc-compensation-cards .zwc-section-inner-wrap h2 {
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  /* Carousel */
  .zwc-slide-header h2 {
    font-size: 40px;
    letter-spacing: -1.6px;
  }
}


/* ========================================
   Responsive - Mobile (767px)
   ======================================== */

@media screen and (max-width: 767px) {
  /* Two Col Cards */
  .zwc-feedback-cards .zwc-section-inner-wrap h2,
  .zwc-compensation-cards .zwc-section-inner-wrap h2 {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  /* Carousel */
  .zwc-time-off {
    padding: 50px 0;
  }

  .zwc-slide-header {
    flex-direction: column;
    gap: 24px;
  }

  .zwc-slide-header h2 {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .zwc-compensation-cards .zwc-section-card-img {
    min-height: auto;
  }

  .zwc-slide-nav {
    display: none;
  }

  .featpages .zwc-otherfeatures-wrap {
    padding: 40px 0;
  }

  .zwc-compensation-cards {
    padding: 50px 0 0;
  }

  .featpages .zwc-otherfeatures-wrap  {
    padding: 50px 0;
  }
}



/* ========================================
   Responsive - Small Mobile (480px)
   ======================================== */

@media screen and (max-width: 480px) {
  /* Two Col Cards */
  .zwc-feedback-cards .zwc-section-inner-wrap h2,
  .zwc-compensation-cards .zwc-section-inner-wrap h2 {
    font-size: 28px;
    letter-spacing: -1.12px;
  }

  /* Carousel */
  .zwc-slide-header h2 {
    font-size: 28px;
    letter-spacing: -1.12px;
  }
}