/* //////////////////////////////////////////////////////////////////////////

   Product
   |
   ├─ Preview
   ├─ Higlight
   ├─ Features
   └─ Summary

   //////////////////////////////////////////////////////////////////////////

   Product

   ////////////////////////////////////////////////////////////////////////// */
   
/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Preview
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.preview-wrap {
   text-align: center;
}

.preview-wrap .g-subtitle {
   text-align: left;
}

.preview-wrap .g-font-xl-large {
   max-width: 100%;
   margin-top: 1.5vw;
}

.preview-wrap .item-image {
   position: relative;
   max-width: clamp(200px, 20vw, 380px);
   margin: 0 auto;
   transition: background-position 5s ease;
   border-radius: var(--radius);
   background-position: top;
   background-size: 100%;
   box-shadow: 0 30px 45px -10px rgba(0, 0, 0, .4);
   aspect-ratio: 2.72/4;
}

.preview-wrap .item-image:hover {
   background-position: bottom;
}

.preview-btns {
   display: inline-flex;
   margin-top: 4vh;
   gap: 12px;
}

.preview-wrap p {
   margin: 1.4em 0 1em;
}

/* RWD — Preview
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width:1025px) {
   .preview {
      margin-top: 0;
   }

   .preview-is-one {
      grid-template-columns: repeat(1, 1fr);
   }

   .preview-is-three {
      grid-template-columns: repeat(3, 1fr);
   }

}

@media (max-width:768px) {
   .preview-btns {
      align-items: center;
      flex-direction: column;
   }

   .preview-btns .g-btn.accent-color {
      order: -1;
   }

}

@media (max-width:480px) {
   .preview-wrap {
      text-align: left;
   }

   .preview-btns {
      align-items: start;
   }

}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Highlight
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.highlight {
   display: flex;
   justify-content: center;
   margin: .5em 0 max(10px, 1vw);
   color: var(--color-font-one);
   gap: calc(var(--gap) / 2);
}

.highlight span:nth-child(n+2)::before {
   display: inline-block;
   margin-right: calc(var(--gap) / 2);
   content: '·';
}

/* RWD — Highlight
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .highlight span:nth-child(n+3) {
      display: none;
   }

}

@media (max-width:768px) {
   .highlight {
      flex-direction: column;
   }

   .highlight span:nth-child(n+2)::before {
      display: none;
   }

}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Features
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.features {
   display: grid;
   max-width: 100%;
   margin-top: max(40px, 4vw);
   gap: 3vw;
}

.features-short {
   display: grid;
   margin-top: 0;
   gap: var(--gap);
   grid-template-columns: repeat(6, 1fr);
}

.features-short div:first-of-type {
   grid-column: span 4;
}

.features-short div:last-of-type {
   grid-column: span 2;
}

.features-short > div + div ul {
   display: block;
   margin-bottom: 2vw;
}

.features-short details:not(.tooltip) summary {
   margin: 0;
   color: var(--color-font-one);
}

.features-short h3 {
   margin-top: 2vw;
   margin-bottom: 1vw;
   padding-top: .5vw;
   border-top: var(--border-thin);
}

.features ul {
   max-width: 100%;
   margin: 0;
   padding: 0;
   text-align: left;
   column-gap: var(--gap);
   columns: 330px 3;
}

.features li {
   display: flex;
   align-items: start;
   margin-top: 0;
   padding: 0 0 .4em 0;
   color: var(--color-font-one);
   break-inside: avoid-column;
   gap: .3em;
}

/* Links */
.features ul li a {
   color: var(--color-adaptive);
}

.features ul li a,
.features ul li a:hover {
   text-decoration-thickness: 1px;
}

.features ul li a:hover {
   color: var(--color-adaptive-hover);
}

/* Tooltip
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* /////// data /////// */
[data-tooltip] {
   width: fit-content;
   cursor: text;
   outline: none;
}

[data-tooltip-icon] {
   font-size: 1.6rem;
   position: absolute;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   cursor: pointer;
   transform: translateX(.2em);
   vertical-align: middle;
   pointer-events: auto;
   color: var(--color-font-black);
   border: var(--border-medium);
   border-radius: var(--radius-full);
   background-color: var(--color-four);
   transition: all .2s ease;
}

[data-tooltip-icon]:hover {
   border-color: var(--ghost-accent-color);
   border-radius: var(--radius-full);
   background-color: var(--ghost-accent-color);
}

[data-features-full] [data-tooltip-icon] {
   font-size: 1.4rem;
   width: 16px;
   height: 16px;
}


[data-tooltip-details] summary {
   list-style: none;
   pointer-events: none;
   position: relative;
}

[data-tooltip-details] summary::-webkit-details-marker {
   display: none;
}

[data-tooltip-box] {
   font-size: 1.6rem;
   line-height: 1.5;
   position: absolute;
   z-index: 9999;
   top: 0;
   left: 0;
   max-width: 300px;
   padding: 8px 12px;
   transition: opacity .15s ease;
   opacity: 0;
   color: var(--color-body);
   border-radius: var(--radius);
   background-color: var(--color-three);
   box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

[data-tooltip-box][data-visible] {
   opacity: 1;
}

/* RWD — Features
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .features-short {
      display: block;
   }

   .features-short div + div details {
      border-top: none;
   }

   [data-tooltip-icon] {
      display: none;
   }

}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Summary
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-summary > div {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

.g-summary small {
   color: var(--color-font-two);
}

.g-summary ul {
   display: grid;
   margin: max(15px, 1vw) 0 max(25px, 2vw);
}

.g-summary li {
   display: inline-flex;
   align-items: center;
}

/* Badge */
.g-summary li span {
   font-size: 80%;
   line-height: 1;
   display: grid;
   width: 1ch;
   height: 1ch;
   padding: .8em;
   border-radius: var(--radius-full);
   aspect-ratio: 1/1;
   place-content: center;
}

.g-summary li span.yes {
   color: var(--color-font-black);
   background-color: var(--ghost-accent-color);
}

.g-summary li span.no {
   color: var(--color-font-black);
   background-color: var(--color-four);
}

.g-summary p {
   max-width: 74ch;
}

/* RWD — Summary
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1280px) {
   .g-summary > div {
      grid-template-columns: repeat(2, 1fr);
   }

}

@media (max-width:480px) {
   .g-summary > div {
      grid-template-columns: repeat(1, 1fr);
   }

}