.table_content {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  /* Kad elements redzams */
  .table_content.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Ātra noslīdēšana uz augšu */
  .table_content.hiding {
    opacity: 0.3;
    transform: translateY(50px);
    transition: opacity 0.4s ease-in, transform 0.4s ease-in;
  }

.atsauksme_rating {
  color: gold;
  font-size: 26px; /* vari pielāgot */
  margin-left: 0.5rem;
  font-weight: bold;
}

*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

/* General styling */
img {
  max-width: 100%;
}

/* Hide radio buttons */
input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Cards container */
.atsauksme_cards {
  --img-w: 200px;
  --duration: 300ms;
  --img-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  width: min(100% - 4rem, 800px);
  margin-inline: auto;
  display: grid;
  counter-reset: atsauksme-counter;
  position: relative;
}

/* Single card styling */
.atsauksme_card {
  --cards-grid-cols: auto;
  --cards-grid-rows: var(--img-w) auto;
  --cards-grid-gap: 2rem;
  --cards-footer-justify: center;
  grid-area: 1/1;
  display: grid;
  place-items: center;
  grid-template-columns: var(--cards-grid-cols);
  grid-template-rows: var(--cards-grid-rows);
  gap: var(--cards-grid-gap);
  z-index: -1;
  padding: 20px 0;
}

/* Responsive layout */
@media (min-width: 600px) {
  .atsauksme_card {
    --cards-grid-cols: var(--img-w) auto;
    --cards-grid-rows: auto;
    --cards-grid-gap: 4rem;
    --cards-footer-justify: start;
  }
}

.atsauksme_card {
  z-index: 1; /* visas kartes sākumā zemāk */
  transition: z-index 0ms;
}

input:checked + .atsauksme_card {
  z-index: 10 !important; /* aktīvā kartīte vienmēr augšā */
}

/* Card image styling */
.atsauksme_card-img {
  width: 200px;
  height: 200px;
  aspect-ratio: 1/1;
  rotate: var(--angle, 0deg);
  border-radius: 10px;
  border: 3px solid #222;
  overflow: hidden;
  transform-origin: center;
  object-fit: cover;
  box-shadow: 0 0 5px 3px rgba(0,0,0,0.05);
}

/* Animations for cards based on which radio is checked */
input:nth-of-type(1):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-1 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
input:nth-of-type(2):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-2 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
/* ... repeat for 3 to 7 ... */
input:nth-of-type(3):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-3 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
input:nth-of-type(4):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-4 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
input:nth-of-type(5):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-5 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
input:nth-of-type(6):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-6 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}
input:nth-of-type(7):checked + .atsauksme_card ~ .atsauksme_card > .atsauksme_card-img {
  animation: straighten-img-7 calc(var(--duration) * 2) forwards;
  animation-timing-function: var(--img-easing);
}

/* Straighten keyframes */
@keyframes straighten-img-1, 
@keyframes straighten-img-2, 
@keyframes straighten-img-3, 
@keyframes straighten-img-4, 
@keyframes straighten-img-5, 
@keyframes straighten-img-6, 
@keyframes straighten-img-7 {
  50% { --angle: 0deg; }
}

/* Card stacking z-index logic */
input:checked + .atsauksme_card { z-index: 10 !important; }
.atsauksme_card:has(+input:checked) { z-index: 9; }
.atsauksme_card:has(+input + .atsauksme_card + input:checked) { z-index: 8; }
.atsauksme_card:has(+input + .atsauksme_card + input + .atsauksme_card + input:checked) { z-index: 7; }
.atsauksme_card:has(+input + .atsauksme_card + input + .atsauksme_card + input + .atsauksme_card + input:checked) { z-index: 6; }
.atsauksme_card:has(+input + .atsauksme_card + input + .atsauksme_card + input + .atsauksme_card + input + .atsauksme_card + input:checked) { z-index: 5; }

.atsauksme_card-data {
  display: flex;
  flex-direction: column; /* sakārto saturu vertikāli */
  gap: 0.5rem;
  height: 200px; /* fiksēts augstums kartes saturam */
}

.atsauksme_card-data > h2 {
  font-size: 26px; /* Vārda fonta izmērs px */
  transition: var(--duration) ease-in-out;
  transition-delay: var(--data-delay, 0ms);
  opacity: var(--data-opacity, 0);
  translate: 0 var(--data-y, 14px);
}
.atsauksme_card-data > p {
  transition: var(--duration) ease-in-out;
  transition-delay: var(--data-delay, 0ms);
  opacity: var(--data-opacity, 0);
  translate: 0 var(--data-y, 14px);
  font-size: 16px;
  line-height: 1.5;     /* labāka lasāmība */
  min-height: 80px;     /* fiksēts augstums, lai visi p bloki vienādi */
  overflow: hidden;     /* ja teksts ir garāks, pārpalikums slēpts */
}
.atsauksme_card-data > footer {
  margin-top: auto; /* liek footer apakšā */
  display: flex;
  justify-content: start;
  gap: 1rem;
}
.atsauksme_card-data > footer label {
  cursor: pointer;
  pointer-events: var(--card-events, auto); /* tagad var klikot */
  opacity: var(--data-opacity, 1);
  color: var(--label-clr-txt, #000);
  background-color: var(--label-clr-bg, #EEE);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

/* Hover and focus styles for labels */
input:checked:focus-visible + .atsauksme_card > .atsauksme_card-data > footer label,
.atsauksme_card-data > footer label:hover {
  --label-clr-txt: #fff;
  --label-clr-bg: #c50000;
}

/* Reveal data when card is selected */
input:checked + .atsauksme_card {
  --data-opacity: 1;
  --data-y: 0;
  --data-delay: var(--duration);
  --card-events: auto;
  transition: z-index 0ms;
}

/* Reveal card image */
input:checked + .atsauksme_card > .atsauksme_card-img {
  animation: reveal-img calc(var(--duration) * 2) forwards;
}

@keyframes reveal-img {
  50% {
    translate: -150% 0;
    --angle: 0deg;
  }
}