/**
 * Flip Card Details - Interactive flip card with details list
 * Features front side with image & details, back side with button & decorative elements
 */

/* .wml-fcd-container */
.wml-fcd-container {
  --hue: 150;
  --primary: hsl(var(--hue), 50%, 50%);
  --white-1: hsl(0, 0%, 90%);
  --white-2: hsl(0, 0%, 80%);
  --dark: hsl(var(--hue), 25%, 10%);
  --grey: hsl(0, 0%, 50%);
  --border-radius: 24px;

  width: 310px;
  height: 500px;
  perspective: 1000px;
  margin: 0 auto;
}

/* .wml-fcd-flip-card */
.wml-fcd-flip-card {
  width: inherit;
  height: inherit;
  position: relative;
  transform-style: preserve-3d;
  transition: .6s .1s;
}

/* Hover and focus-within states */
.wml-fcd-container:hover .wml-fcd-flip-card,
.wml-fcd-container:focus-within .wml-fcd-flip-card {
  transform: rotateY(180deg);
}

/* Card front and back base styles */
.wml-fcd-card-front,
.wml-fcd-card-back {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  background: var(--dark);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Card front */
.wml-fcd-card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* Card back */
.wml-fcd-card-back {
  transform: rotateY(180deg);
  z-index: 1;
}

/* Figure */
.wml-fcd-figure {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Image background overlay */
.wml-fcd-img-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsla(var(--hue), 25%, 10%, .5);
}

/* Front card image background */
.wml-fcd-card-front .wml-fcd-img-bg {
  clip-path: polygon(0 20%, 100% 40%, 100% 100%, 0 100%);
}

/* Front card image background accent line */
.wml-fcd-card-front .wml-fcd-img-bg::before {
  content: "";
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(18deg);
  width: 100%;
  height: 6px;
  border: 1px solid var(--primary);
  border-left-color: transparent;
  border-right-color: transparent;
  transition: .1s;
}

/* Hover state for accent line */
.wml-fcd-container:hover .wml-fcd-card-front .wml-fcd-img-bg::before {
  width: 6px;
  border-left-color: var(--primary);
  border-right-color: var(--primary);
}

/* Back card image background */
.wml-fcd-card-back .wml-fcd-img-bg {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 60%);
}

/* Image */
.wml-fcd-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
  display: block;
}

/* Figcaption */
.wml-fcd-caption {
  display: inline-block;
  width: auto;
  margin-top: 12%;
  padding: 8px 22px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 2px;
  word-spacing: 6px;
  position: absolute;
  top: 0;
  color: var(--white-1);
  background: hsla(var(--hue), 25%, 10%, .5);
  border-radius: 4px;
}

/* Caption alignment - right (default) */
.wml-fcd-caption--right {
  right: 12px;
  left: auto;
  text-align: right;
}

/* Caption alignment - left */
.wml-fcd-caption--left {
  left: 12px;
  right: auto;
  text-align: left;
}

/* Caption alignment - center */
.wml-fcd-caption--center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

/* Details List */
.wml-fcd-list {
  padding-top: 50%;
  margin: 0;
  width: 70%;
  height: 100%;
  list-style: none;
  color: var(--white-1);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Details list position - center (default) */
.wml-fcd-list--center {
  margin-left: auto;
  margin-right: auto;
}

/* Details list position - left */
.wml-fcd-list--left {
  margin-left: 0;
  margin-right: auto;
  padding-left: 15%;
}

/* Details list position - right */
.wml-fcd-list--right {
  margin-left: auto;
  margin-right: 0;
  padding-right: 15%;
}

/* List items */
.wml-fcd-list li {
  width: 100%;
  margin-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.wml-fcd-list li:nth-child(2n) {
  color: var(--white-2);
}

/* List item divider */
.wml-fcd-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .2;
}

/* Button */
.wml-fcd-button {
  font-family: inherit;
  font-weight: bold;
  color: var(--white-1);
  letter-spacing: 2px;
  padding: 9px 20px;
  border: 1px solid var(--grey);
  border-radius: 1000px;
  background: transparent;
  transition: .3s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  z-index: 10;
  margin: 0 auto;
}

.wml-fcd-button:hover,
.wml-fcd-button:focus {
  color: var(--primary);
  background: hsla(var(--hue), 25%, 10%, .2);
  border-color: currentColor;
}

.wml-fcd-button:active {
  transform: translate(2px);
}

/* Design Container */
.wml-fcd-design-container {
  --tr: 90;
  --op: .5;
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Design elements */
.wml-fcd-design {
  display: block;
  background: var(--grey);
  position: absolute;
  opacity: var(--op);
  transition: .3s;
}

/* Vertical lines (1-4) */
.wml-fcd-design--1,
.wml-fcd-design--2,
.wml-fcd-design--3,
.wml-fcd-design--4 {
  width: 1px;
  height: 100%;
}

.wml-fcd-design--1,
.wml-fcd-design--2 {
  top: 0;
  transform: translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%));
}

.wml-fcd-design--1 {
  left: 20%;
}

.wml-fcd-design--2 {
  left: 80%;
}

.wml-fcd-design--3,
.wml-fcd-design--4 {
  bottom: 0;
  transform: translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%));
}

.wml-fcd-design--3 {
  left: 24%;
}

.wml-fcd-design--4 {
  left: 76%;
}

/* Horizontal lines (5-8) */
.wml-fcd-design--5,
.wml-fcd-design--6,
.wml-fcd-design--7,
.wml-fcd-design--8 {
  width: 100%;
  height: 1px;
}

.wml-fcd-design--5,
.wml-fcd-design--6 {
  left: 0;
  transform: translateX(calc((var(--tr) - (var(--tr) * 2)) * 1%));
}

.wml-fcd-design--5 {
  top: 41%;
}

.wml-fcd-design--6 {
  top: 59%;
}

.wml-fcd-design--7,
.wml-fcd-design--8 {
  right: 0;
  transform: translateX(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%));
}

.wml-fcd-design--7 {
  top: 44%;
}

.wml-fcd-design--8 {
  top: 56%;
}

/* Button hover state affects design elements */
.wml-fcd-button:hover + .wml-fcd-design-container,
.wml-fcd-button:active + .wml-fcd-design-container,
.wml-fcd-button:focus + .wml-fcd-design-container {
  --tr: 20;
  --op: .7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wml-fcd-container {
    width: 280px;
    height: 450px;
  }

  .wml-fcd-caption {
    font-size: 14px;
    padding: 6px 18px;
  }

  .wml-fcd-list {
    width: 80%;
  }

  .wml-fcd-list li {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .wml-fcd-container {
    width: 260px;
    height: 420px;
  }

  .wml-fcd-caption {
    font-size: 12px;
    padding: 5px 15px;
  }

  .wml-fcd-button {
    font-size: 13px;
    padding: 8px 18px;
  }
}

/* Root wrapper */
.wml-flip-card-details {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: fit-content;
}