/* Detailing aut — samostatná stránka. Společné části (hlavička, tlačítka, před a po, pás výhod)
   jsou ve styles.css, cenové tabulky v pages.css. */

.hero--detailing,
.dt-steps,
.dt-packages {
  font-variant-numeric: lining-nums;
}

/* 1. Úvod: rozvržení .hero--page (pages.css) s fotkou kola vpravo */
.hero--detailing .hero__media {
  object-position: center 72%;
}
/* Fotka jen v pravých 60 %, aby kolo neleželo pod menu (Kontakt),
   a bílý přechod natažený až do 75 % šířky. */
@media (min-width: 810px) {
  .hero--detailing .hero__media {
    left: auto;
    width: 60%;
  }
  .hero--detailing::after {
    background: linear-gradient(
      90deg,
      #fff 0%,
      #fff 40%,
      #ffffffd9 54%,
      #ffffff00 75%
    );
  }
}
.hero--detailing .hero__content {
  gap: 30px;
}
.hero--detailing h1 {
  max-width: 680px;
  color: var(--purple-dark);
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.05;
}
@keyframes dt-drift {
  to {
    transform: translate(-90px, 70px) scale(1.15);
  }
}

/* 2a. Co je detailing: text vlevo, dvě fotky vpravo posunuté proti sobě */
.dt-explain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.dt-explain__parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.dt-explain__parts > div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--lavender);
}
.dt-explain__parts h3 {
  color: var(--purple-dark);
  font-size: 24px;
}
.dt-explain__parts p {
  font-size: 16px;
}
.dt-explain__photos {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.dt-explain__photo {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}
.dt-explain__photo--offset {
  margin-top: 90px;
}
.dt-explain__photo.reveal-visible.dt-explain__photo--offset {
  transition-delay: 0.15s;
}
.dt-explain__photo img {
  width: 100%;
  aspect-ratio: 0.72;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-explain__photo:hover img {
  transform: scale(1.05);
}
.dt-explain__photo figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 20px;
  border-radius: 50px;
  background: white;
  color: var(--purple-dark);
  font-weight: 600;
}

/* 2. Popis a postup */
.dt-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.dt-steps {
  display: grid;
  gap: 16px;
  list-style: none;
}
.dt-steps li {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 30px 32px;
  border: 2px solid #e6dde9;
  border-radius: var(--radius);
  transition:
    border-color 0.3s,
    background 0.3s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dt-steps li:hover {
  border-color: transparent;
  background: var(--lavender);
  transform: translateX(8px);
}
.dt-steps li.reveal-visible:nth-child(2) {
  transition-delay: 0.12s;
}
.dt-steps li.reveal-visible:nth-child(3) {
  transition-delay: 0.24s;
}
.dt-steps__number {
  flex: none;
  color: var(--purple);
  font:
    700 44px/1 "Cormorant Garamond",
    Georgia,
    serif;
}
.dt-steps h3 {
  margin-bottom: 6px;
  font-size: 24px;
}
.dt-steps p {
  font-size: 16px;
}

/* 3. Balíčky */
.dt-packages .section-heading {
  gap: 20px;
}
.dt-group-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 80px 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #916e9740;
  color: var(--purple-dark);
  font-size: clamp(30px, 3vw, 38px);
}
.dt-group-title span {
  color: #6b5d6f;
  font:
    500 15px/1.3 "Figtree",
    Arial,
    sans-serif;
  text-transform: none;
}
.dt-package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 40px 40px;
  border-radius: 28px;
  background: white;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .package-card:hover {
    transform: translateY(-6px);
  }
}
.dt-package-grid .package-card.reveal-visible:nth-child(2) {
  transition-delay: 0.12s;
}
.package-card__tag {
  color: var(--purple);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.package-card h4,
.dt-surcharges h4 {
  margin: 0;
}
.package-card h4 {
  margin-top: 0;
  font:
    700 clamp(40px, 4vw, 54px) / 1 "Cormorant Garamond",
    Georgia,
    serif;
  text-transform: uppercase;
}
.package-card__lead {
  color: #4b414e;
}
.package-card .check-list {
  gap: 14px;
  font-size: 16px;
}
/* Skryté body: plynulé rozbalení přes výšku řádku mřížky. */
.is-collapsible .package-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s;
}
.is-collapsible .package-more.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.package-more {
  margin-top: -18px;
}
.package-more > div {
  min-height: 0;
  overflow: hidden;
}
.package-more .check-list {
  padding-top: 14px;
}
/* Tlačítko „Zobrazit další (n)“ — po rozbalení „Skrýt“. */
.package-toggle {
  display: none;
}
.is-collapsible .package-toggle {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--purple);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.package-toggle:hover .package-toggle__label {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.package-toggle[aria-expanded="true"] .package-toggle__count {
  display: none;
}
.package-toggle__count {
  opacity: 0.75;
}
.package-card__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid #916e9733;
}
.package-card__price strong {
  color: var(--purple);
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.1;
  white-space: nowrap;
}
/* Prémiový balíček: fialová karta s pomalu se přelévajícím leskem. */
.package-card--featured {
  overflow: hidden;
  background: linear-gradient(135deg, #a47fab 0%, var(--purple) 45%, #7d5c83 100%);
  background-size: 200% 200%;
  color: white;
  animation: dt-sheen 9s ease-in-out infinite alternate;
}
@keyframes dt-sheen {
  to {
    background-position: 100% 100%;
  }
}
.package-card--featured :is(.package-card__tag, .package-card__lead, .package-toggle, .package-card__price strong) {
  color: white;
}
.package-card--featured .package-card__lead {
  color: #ffffffd9;
}
.package-card--featured .check-list li::before {
  color: white;
}
.package-card--featured .package-card__price {
  border-top-color: #ffffff4d;
}
.package-card--featured .package-toggle:focus-visible {
  outline-color: white;
}
.package-card--wide {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 50px;
}
.package-card--wide > div {
  display: grid;
  gap: 18px;
}
.package-card--wide h4 {
  font-size: clamp(32px, 3vw, 42px);
}
.dt-packages .price-table {
  font-size: 16px;
}
.dt-packages .price-table td {
  color: var(--purple);
}
.dt-packages .price-table tr:last-child :is(th, td) {
  border-bottom: 0;
}
.dt-surcharges {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8px 50px;
  margin-top: 24px;
  padding: 32px 40px;
  border: 2px dashed #916e9766;
  border-radius: 28px;
}
.dt-surcharges h4 {
  grid-row: span 2;
  font:
    700 28px/1.2 "Cormorant Garamond",
    Georgia,
    serif;
  text-transform: uppercase;
}
.dt-surcharges p {
  color: #6b5d6f;
  font-size: 14px;
}

/* 4. Produkty: ilustrační lahvičky, natočení a odlesk za kurzorem.
   Sekce je zatím skrytá, než budou skutečné fotky produktů. */
.dt-products {
  display: none;
}
.dt-products .section-heading {
  gap: 20px;
  margin-bottom: 57px;
}
.dt-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  perspective: 900px;
}
.product-card.reveal-visible:nth-child(2) {
  transition-delay: 0.12s;
}
.product-card.reveal-visible:nth-child(3) {
  transition-delay: 0.24s;
}
.product-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1.15;
  margin-bottom: 12px;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at var(--shine-x, 50%) var(--shine-y, 30%),
      #ffffff 0%,
      #ffffff00 55%
    ),
    var(--lavender);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-card__visual {
  transition-duration: 0.12s;
}
.product-bottle {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 180px;
  margin-top: 30px;
  border-radius: 22px 22px 26px 26px;
  box-shadow: 0 30px 40px -24px #3b2a3f99;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card:hover .product-bottle {
  transform: translateY(-10px) rotate(-4deg);
}
/* Víčko */
.product-bottle::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 44px;
  height: 34px;
  border-radius: 10px 10px 4px 4px;
  background: #2b2230;
  transform: translateX(-50%);
}
/* Lesk na lahvičce */
.product-bottle::after {
  content: "";
  position: absolute;
  inset: 12px auto 12px 14px;
  width: 12px;
  border-radius: 10px;
  background: linear-gradient(#ffffff99, #ffffff1a);
}
.product-bottle > span {
  padding: 6px 10px;
  border-radius: 6px;
  background: #ffffffe6;
  color: var(--text);
  font:
    700 18px/1 "Cormorant Garamond",
    Georgia,
    serif;
  text-transform: uppercase;
}
.product-bottle--dark {
  background: linear-gradient(160deg, #3d3342, #181818);
}
.product-bottle--purple {
  background: linear-gradient(160deg, #b597bb, var(--purple));
}
.product-bottle--light {
  background: linear-gradient(160deg, #e6f1fb, #9fc0dd);
}
.product-card h3 {
  font-size: 28px;
}
.product-card > p:last-child {
  font-size: 16px;
}

/* 6. Tablet a mobil */
@media (max-width: 1100px) {
  .dt-about,
  .dt-explain {
    gap: 45px;
  }
  .dt-explain__parts {
    grid-template-columns: 1fr;
  }
  .package-card {
    padding: 34px 28px 30px;
  }
}
@media (max-width: 809px) {
  .dt-explain__photos {
    gap: 12px;
  }
  .dt-explain__photo--offset {
    margin-top: 40px;
  }
  .dt-explain__photo figcaption {
    left: 10px;
    bottom: 10px;
    padding: 5px 12px;
    font-size: 14px;
  }
  .dt-explain,
  .dt-about,
  .dt-package-grid,
  .package-card--wide,
  .dt-surcharges {
    grid-template-columns: 1fr;
  }
  .package-card--wide {
    gap: 20px;
  }
  .dt-surcharges {
    padding: 26px 24px;
  }
  .dt-surcharges h4 {
    grid-row: auto;
  }
  .dt-product-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
  .dt-group-title {
    margin-top: 60px;
  }
  .dt-steps li {
    padding: 24px;
    gap: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .package-card--featured {
    animation: none;
  }
}

/* Závěrečná výzva: fotka interiéru nemá zapečenou fialovou, přechod dodá kontrast textu. */
.closing__card--detailing picture img {
  object-position: center 62%;
}
.closing__card--detailing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--purple) 0%,
    #916e97f2 38%,
    #916e9780 70%,
    #916e9733 100%
  );
}
@media (max-width: 600px) {
  .closing__card--detailing::after {
    background: #916e97d9;
  }
}