/* adventures.css — EDDY Adventures listing page styles */
/* Scope everything to .tours-container so we don't nuke header/footer styles. */

:where(.tours-container, .tours-container *) {
  box-sizing: border-box;
}

.tours-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Alexandria", Arial, sans-serif;
}

.tours-container :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure) {
  margin: 0;
  padding: 0;
}

.tours-container :where(ul,ol) {
  list-style: none;
}

.tours-container :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Hero */
.hero__picture {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 1300 / 490;
  overflow: hidden;
}

.hero__picture-sea-kayak {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
   /* aspect-ratio: 1300 / 269;*/
    overflow: hidden;
    padding: 180px 0 20px 0;
}

@media (max-width: 768px) {
  .hero__picture {
    aspect-ratio: 195 / 92; /* 780:368 */
  }
  .hero__picture-sea-kayak {
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    padding: 116px 10px 0;
  }
}

.hero__img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Title */
.tours-container h1 {
  display: flex;
  padding: 8px 24px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 28px;
  border: 2.5px solid #000;
  background: #FFF;
  color: #1A1A1A;
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 350;
  line-height: 70%;
  letter-spacing: 1.92px;
  text-transform: uppercase;
  width: fit-content;
  margin: 48px auto 40px;
}

/* Intro bullets */
.info-list {
  display: grid;
  align-items: center;
  gap: 20px 40px;
  grid-template-columns: 1fr 1fr;
  list-style: disc;
  max-width: 1160px;
}

.info-list li {
  margin-left: 25px;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 350;
  line-height: 160%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Cards grid */
.tours-list {
  display: grid;
  gap: 34px 40px;
  grid-template-columns: repeat(3, min-content);
  padding: 60px 0 120px;
  width: fit-content;
  align-self: center;
}

.tour-item {
  display: flex;
  width: 360px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px;
  background: #FFF;
}

.tour-item-link {
  color: inherit;
  text-decoration: none;
}

.tour-item-link:visited {
  color: inherit;
}

.tour-item-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

.tour-item-link:hover .btn-wrapper,
.tour-item-link:focus-visible .btn-wrapper {
  background: #F7BD4D;
}

.tour-card-placeholder .tour-item {
  filter: grayscale(1);
}

/* Верхняя часть карточки: картинка + оверлеи + инфоблок */
.tour-item-media {
  position: relative;
  width: 100%;
  height: 483px; /* 273 картинка + 210 зона текста = твоя подобранная высота */
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

/* picture и image на всю высоту media-блока */
.tour-item-media picture,
.tour-item-media picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.tour-item-media picture img {
  object-fit: cover;
  object-position: center;
}

/* Можно добавить лёгкое затемнение снизу, чтобы текст читался увереннее */
.tour-item-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.00) 0%,
      rgba(0, 0, 0, 0.06) 38%,
      rgba(0, 0, 0, 0.42) 70%,
      rgba(0, 0, 0, 0.60) 100%
    );
  pointer-events: none;
  z-index: 1;
}

.tour-item-header {
  position: relative;
  width: 100%;
  height: 273px;
}

.tour-item-header img {
  border-radius: 16px 16px 0 0;
  width: 360px;
  height: 273px;
  object-fit: cover;
}

.tour-price {
  width: 107px;
  height: 56px;
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 24px;
  top: 24px;
  background: url('/wp-content/themes/eddy-theme/images/adventures/badge.svg') no-repeat center / contain;
  filter: drop-shadow(0px 0px 0.5px rgba(225,225,225,0.5));
  z-index: 3;
}

.tour-location {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  border-radius: 10px;
  background: #F7BD4D;
  color: #1A1A1A;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 70%;
}

.tour-location-sea {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  right: 20px;
  bottom: 230px;
  border-radius: 10px;
  background: #F7BD4D;
  color: #000000;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 70%;
  z-index: 3;
}

/* Card body */
.tour-item-body {
  display: flex;
  padding: 24px 24px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  align-self: stretch;
  height: 210px;
  background: #333;
}


.tour-item-body h2 {
  color: #FFF;
  display: flex;
  gap: 8px;
  /* text-align: center; */
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  margin-bottom: -4px;
  flex-direction: row;
}

.tour-item-body p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 250;
  line-height: 150%;
}

.tour-item-body-sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;

  padding: 24px 24px 0 20px;
  min-height: 210px;

  color: #fff;
  background: rgba(15, 20, 24, 0.34);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);
}

/* Если blur не поддерживается, будет просто более плотная подложка */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .tour-item-body-sea {
    background: rgba(15, 20, 24, 0.72);
  }
}

.tour-item-body-sea h2 {
  color: #FFF;
  display: flex;
  gap: 8px;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  margin: 0;
  flex-direction: row;
  align-items: center;
  margin-bottom: -4px;
}

.tour-item-body-sea p {
  margin: 0;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 250;
  line-height: 150%;
}

/* Pills (tags) */
.tour-item-pills{
  display:flex;
  align-items:center;
  gap:8px;
  align-self:stretch;
  background:#333;
}

.tour-item-pills-sea {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
  background: transparent;
}

.tour-pill {
    display: flex;
    padding: 3px 8px;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #FFF;
    color: var(--Bg-Primary, #FFF);
    font-family: Alexandria, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 250;
    line-height: 70%;
    white-space: nowrap;
}

/* CTA */
.btn-wrapper {
  border-radius: 0 0 16px 16px;
  background: #E8E8E8;
  cursor: pointer;
  border: none;
  color: #000;
  padding: 27px 20px;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  height: 80px;
  transition: background 0.3s ease-out;
}

.btn-wrapper {
  transition: background 0.2s ease, color 0.2s ease;
}

/* десктоп */
@media (hover: hover) and (pointer: fine) {
  .tour-item-link:hover .btn-wrapper,
  .tour-item-link:focus-visible .btn-wrapper {
    background: #F7BD4D;
  }
}

/* мобилка */
@media (max-width: 768px) {
  .tour-item-link.is-cta-active .btn-wrapper {
    background: #F7BD4D;
  }
}



/* Questions */
.questions-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  justify-content: center;
  max-width: 1160px;
  padding: 0 0 120px;
}

.questions-title {
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 70%;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  display: flex;
  padding: 8px 12px;
  align-items: center;
  border-radius: 28px;
  background: #1A1A1A;
  margin-right: auto;
  height: fit-content;
}

.questions-body p {
  color: #000;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
  text-align: start;
}

.questions-body a {
  color: #000;
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
  text-decoration-line: underline;
  text-underline-offset: 1px;
}

.questions-icons {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 1200px) {
  .tours-list {
    grid-template-columns: repeat(2, min-content);
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .questions-section,
  .info-list {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 768px) and (max-width: 800px) {
  .tours-list {
    column-gap: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 768px) {
  .info-list {
    grid-template-columns: 1fr;
    padding: 0 30px;
    gap: 12px;
    list-style: none;
  }

  .btn-wrapper {
    height: auto;
    padding: 24.75px 10px;
    font-size: 18px;
    letter-spacing: 1.8px;
    min-height: 73px;
  }

  .tours-container h1 {
    margin: 48px auto 32px;
    padding: 8px 8px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 80%;
    border: 2px solid #000;
  }

  .info-list li {
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 350;
    line-height: 150%;
    margin-left: 0;
  }

  .info-list li:nth-child(1) { order: -2; }
  .info-list li:nth-child(3) { order: -1; }

  .tour-item {
    width: 100%;
  }

  .tour-item-header {
    height: auto;
    margin-bottom: -8px;
  }

  .tour-item-header img {
    width: 100%;
    height: auto;
  }

  .tour-item-body {
    padding: 22px 22px 0;
    min-height: 184px;
    height: auto;
    gap: 16px;
  }

  .tour-item-body h3 {
    font-size: 22px;
    letter-spacing: 2.2px;
  }

  .tour-item-body p {
    font-size: 14px;
  }

  .tour-price {
    width: 98.083px;
    height: 51.333px;
    background-image: url('/wp-content/themes/eddy-theme/images/adventures/badge-mobile.svg');
    background-repeat: no-repeat;
    background-size: contain;
  }

  .tour-item-pills{
    padding: 0 0 18px;
    flex-wrap: wrap;
  }
  .tour-pill{
    font-size: 14px;
  }

  .tours-list {
    padding: 24px 30px 60px;
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .questions-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 20px 30px 80px;
  }

  .questions-body p,
  .questions-body a {
    font-size: 16px;
  }

  .questions-icons img {
    width: 32px;
    height: 32px;
  }

  .questions-title {
    font-size: 17px;
    letter-spacing: 1.7px;
    padding: 8px 12px;
    border-radius: 28px;
  }

  .questions-icons { gap: 8px; }

  .tour-item-body-sea h2 {
    font-size: 22px;
  }
  .tour-item-body h2 {
    font-size: 22px;
  }
  .tour-item-body-sea {
    padding: 24px 24px 24px 16px;
    justify-content: space-between;
  }
  .tour-item-body-sea p {
    font-size: 15px;
  }
}

@media (min-width: 390px) and (max-width: 768px) {
  .tours-container .hero__picture {
    width: 100%;
  }
}


/* FAQ SECTION */
  .who-info__title {
    grid-column: 1 / 2;
    color: #000;
    font-family: Alexandria;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 60%;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    border-radius: 28px;
    border: 2.5px solid #000;
    padding: 8px 12px;
    width: max-content;
    height: max-content;
  }

  .faq-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 120px;
    gap: 60px;
    max-width: 1160px;
  }

  .faq-main-img img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: -120px
  }

  .faq-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    justify-content: center;
    margin-bottom: 60px;
  }

  .faq-images img {
    max-width: 600px;
  }

  .faq-section__title {
    align-self: start;
  }

  @media(max-width: 767px) {
    .faq-section__title {
      align-self: start;
      margin: 0;
    }
    .faq-section-skadar {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 30px 80px;
      gap: 40px;
    }
    .faq-main-img img {
      max-width: 100% !important;
      border-radius: 4px;
      margin-top: 0;
    }
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
  }

  .faq-list-item {
    border-top: 2px solid #000;
    padding: 20px 0 20px
  }

  .faq-list-item:last-child {
    border-bottom: 2px solid #000;
  }

  .faq-list__title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: Alexandria;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .faq-list__title img {
    transition: transform 0.3s ease;
  }

  .faq-list-item.active .faq-list__title img {
    transform: rotate(180deg);
  }

  
  /* FAQ accordion: smooth height without "padding kicks" */
  .faq-list__text {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 160%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    height: 0; /* JS animates height */
    transition: height 0.3s ease;
    will-change: height;
  }

  .faq-list__text-inner {
    display: block;
    padding-top: 20px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.24s ease;
  }

  .faq-list-item.active .faq-list__text-inner {
    opacity: 1;
    transform: none;
    transition-delay: 60ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-list__text,
    .faq-list__text-inner {
      transition: none !important;
      transform: none !important;
    }
  }

  @media(max-width: 1400px) {
    .faq-images img {
      max-width: 100%;
    }
  }

  @media(max-width: 1024px) {
    .faq-list {
      padding: 0 20px;
      margin-left: 10px;
    }

    .questions-body p a {
      white-space: nowrap;
    }

    .map-wrapper {
      grid-template-columns: 1fr;
    }

    .map-img-wrapper {
      justify-self: center;
    }

    .hero-content__text {
      font-size: 18px;
    }
  }

  .faq-section__title__mobile {
    display: none;
  }

  .for-mobile-only {
    display: none;
  }

  .read-more-btn {
    display: none;
  }

  /* Mobile styles */
  @media (max-width: 768px) {

    .who-info__title {
      font-size: 16px;
      letter-spacing: 2px;
      padding: 8px 12px;
      border: 2px solid #000;
    }

    .faq-images {
      display: none;
    }

    .faq-main-img {
      order: 3;
      margin-top: 40px;
      width: 100%;
    }

    .faq-list {
      padding: 0;
      margin: 0;
    }

    .faq-section {
      gap: 32px;
      padding: 0 30px 40px;
    }

    .faq-section__title__mobile {
      margin-left: 0;
    }

    .faq-list__title {
      font-size: 14px;
      letter-spacing: 2px;
      gap: 8px;
    }

    .faq-list-item {
      padding: 16px 0;
    }
    .faq-list__text-inner {
      font-size: 14px;
      line-height: 1.6;
      padding-top: 8px;
    }
    .faq-list__title img {
      width: 32px;
    }
  }

  @media(min-width: 767px) {
    .hero-mobile {
      display: none;
    }
  }

  /* Single FAQ heading: full text in DOM, short label visually on mobile */
.faq-section__title .faq-title-full { display: inline; }
.faq-section__title::after { content: ""; }

@media (max-width: 768px) {
  /* на случай если старые стили прятали заголовок на мобиле */
  .faq-section__title { display: block !important; }

  .faq-section__title .faq-title-full { display: none !important; }
  .faq-section__title::after { content: attr(data-faq-short); }
}