/* Callaway Services: la pagina de la linea (DESKTOP - CALLAWAY SERVICES, 471:1801)
   y la de cada servicio (DESKTOP - CALLAWAY SERVICES 1..5, 490:7388 y siguientes),
   medidas de Figma a 1440 px. La base del hero y de las bandas esta en base.css. */

/* ----------------------------------------------------------- what we do */

.cw-what { padding: 48px 0; }
.cw-what__title { margin-top: 22px !important; text-align: center; }
.cw-what__text { max-width: 470px; margin: 12px auto 0 !important; text-align: center; }
.cw-what__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 22.5px;
  margin-top: 36px !important;
}
.cw-service {
  display: flex;
  gap: 24px;
  width: 385px;
  min-height: 129px;
  padding: 24px 24px 19px 26px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--cw-cement), var(--cw-silver));
  box-shadow: inset 0 0 0 0.2px var(--cw-cement);
  scroll-margin-top: calc(var(--cw-header-h) + 24px);
}
.cw-service__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 45px; height: 45px;
  border-radius: 6.4px;
  background: var(--cw-beige);
  color: var(--cw-navy);
}
.cw-service__icon .cw-icon { width: 29px; height: 24px; }
.cw-service { position: relative; transition: transform var(--cw-ease), box-shadow var(--cw-ease); }
.cw-service__title { margin-top: -2px !important; font-size: 0.875rem; line-height: 16px; font-weight: 900; text-transform: uppercase; color: var(--cw-beige); }
.cw-service__title a { color: inherit; text-decoration: none; }
/* Toda la tarjeta es el enlace al servicio. */
.cw-service__title a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cw-service:hover,
.cw-service:focus-within { transform: translateY(-3px); box-shadow: inset 0 0 0 0.2px var(--cw-cement), 0 12px 24px rgb(24 33 42 / 0.16); }
.cw-service__desc { max-width: 256px; margin-top: 8px !important; font-size: 0.875rem; line-height: 16px; color: var(--cw-navy); }

/* Llegar por ancla (#construction desde el menu) marca la tarjeta un momento. */
.cw-service:target { animation: cw-target 1.6s ease; }
@keyframes cw-target {
  0%, 40% { box-shadow: inset 0 0 0 2px var(--cw-bordo); }
  100% { box-shadow: inset 0 0 0 0.2px var(--cw-cement); }
}

/* ------------------------------------------------------- who we serve */

.cw-swho { padding: 51px 0 56px; background-color: #f4f5f6; }
.cw-swho__inner { display: grid; grid-template-columns: 1fr 486px; gap: 24px; }
.cw-swho .cw-heading { margin-top: 22px !important; }
.cw-swho .cw-text { max-width: 407px; margin-top: 12px !important; }
.cw-swho .cw-btn { margin-top: 24px; }
.cw-swho__list { display: grid; gap: 13px; padding-top: 1px !important; }
.cw-swho__card { min-height: 136px; padding: 21px 36px 18px; border-radius: 12px; background: #f0f0f0; }
.cw-swho__title { margin-top: 11px !important; font-size: 0.875rem; line-height: 16.5px; font-weight: 900; text-transform: uppercase; color: var(--cw-navy); }
.cw-swho__desc { max-width: 412px; margin-top: 6.5px !important; font-size: 0.875rem; line-height: 20px; color: var(--cw-navy); }
/* Sin numero (Who we serve de la landing, revision del 24/10): tarjetas mas bajas. */
.cw-swho__list--plain .cw-swho__card { min-height: 115px; padding-top: 25px; }
.cw-swho__list--plain .cw-swho__title { margin-top: 0 !important; }

/* Version oscura: What we do de cada servicio, sobre el fondo azul. */
.cw-swho--dark { padding: 51px 0 52px; background-color: #011a2e; color: var(--cw-beige); }
.cw-swho--dark .cw-heading { max-width: 501px; }
.cw-swho--dark .cw-text { color: var(--cw-beige); }

/* -------------------------------------------------- wherever you need us */

.cw-sapproach { padding: 57px 0 64px; background-color: #011a2e; color: var(--cw-beige); }
.cw-sapproach__title { max-width: 440px; margin: 13px auto 0 !important; text-align: center; }
.cw-sapproach__title .cw-heading__light { color: var(--cw-beige); }
.cw-sapproach__text { max-width: 443px; margin: 12px auto 0 !important; font-size: 1rem; line-height: 1.25; text-align: center; }
.cw-sapproach__grid { display: flex; justify-content: center; gap: 25px; margin-top: 37px !important; }
.cw-sapproach__card {
  display: flex;
  gap: 15px;
  width: 407px;
  min-height: 131px;
  padding: 27px 24px 20px 25px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgb(229 228 226 / 0.2);
}
.cw-sapproach__card .cw-badge { margin-top: 4px; }
.cw-sapproach__card-title { font-size: 0.875rem; line-height: 20px; font-weight: 900; text-transform: uppercase; color: var(--cw-cement); }
.cw-sapproach__card-text { max-width: 310px; margin-top: 10px !important; font-size: 0.875rem; line-height: 16px; }

/* -------------------------------------------------------- built in-house */

.cw-inhouse {
  display: grid;
  grid-template-columns: calc(50% - 2px) 1fr;   /* la foto llega a x=718 (08/10) */
  gap: 50px;
  padding: 50px 0 48px;          /* sin la banda final desde la revision del 30/09 */
}
.cw-inhouse__media { border-radius: 0 var(--cw-radius-card) var(--cw-radius-card) 0; overflow: hidden; line-height: 0; }
.cw-inhouse__media img { width: 100%; height: 458px; object-fit: cover; }
.cw-inhouse__body { max-width: 474px; padding-top: 43px; }
.cw-inhouse .cw-heading { margin-top: 22px !important; }
.cw-inhouse .cw-text { margin-top: 15px; }
.cw-inhouse__list { display: grid; gap: 18px; margin-top: 46px !important; }
.cw-inhouse__list li {
  display: flex;
  align-items: center;
  gap: 17px;
  padding-left: 3px;
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 900;
  text-transform: uppercase;
}

/* ------------------------------------------------ pagina de cada servicio */

.cw-sintro { padding: 63px 0 73px; background: var(--cw-mist); }
.cw-sintro__inner { display: grid; grid-template-columns: 509px 612px; justify-content: space-between; align-items: start; }
.cw-sintro__body { padding-left: 1px; }
.cw-sintro__title { max-width: 398px; margin-top: 22px !important; }
.cw-sintro__text { margin-top: 18px !important; }
.cw-sintro .cw-btn { margin-top: 32px; }
.cw-sintro__media { border-radius: var(--cw-radius-card); overflow: hidden; line-height: 0; }
.cw-sintro__media img { width: 100%; height: 328px; object-fit: cover; }

/* ------------------------------------------- tablets y mobile (sin diseno) */

@media (max-width: 1199px) {
  .cw-service { width: calc(50% - 12px); }
  .cw-swho__inner { grid-template-columns: 1fr; gap: 40px; }
  .cw-sapproach__grid { flex-direction: column; align-items: center; }
  .cw-sapproach__card { width: 100%; max-width: 560px; }
  .cw-inhouse { grid-template-columns: 1fr; gap: 40px; }
  .cw-inhouse__media { margin-right: var(--cw-margin); }
  .cw-inhouse__media img { height: auto; aspect-ratio: 735 / 499; }
  .cw-inhouse__body { max-width: none; padding: 0 var(--cw-margin); }
  .cw-sintro__inner { grid-template-columns: 1fr; gap: 40px; }
  .cw-sintro__body { max-width: 560px; }
  .cw-sintro__media img { height: auto; aspect-ratio: 612 / 328; }
}
@media (max-width: 781px) {
  .cw-service { width: 100%; }
}