/* ===============================
   MythicRealmsPL Reviews Page Custom Styles
   =============================== */

.reviews-hero {
  margin-top: var(--space-16);
  margin-bottom: var(--space-10);
  text-align: center;
}
.reviews-section {
  margin-bottom: var(--space-16);
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.reviews-filter-group {
  min-width: 180px;
}
.reviews-filter-group select {
  font-size: var(--font-size-md);
  padding: var(--space-2) var(--space-4);
}
.reviews-list {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-6);
}
.review-card {
  display: flex;
  background: linear-gradient(100deg, #221e2b 75%, #251d3a 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-8);
  gap: var(--space-6);
  align-items: flex-start;
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}
.review-card:hover {
  box-shadow: var(--shadow-lg);
}
@media (max-width:700px) {
  .review-card { flex-direction: column; padding: var(--space-4); gap: var(--space-3); }
}
.review-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-gray-700);
  border: 2px solid var(--color-primary);
}
.review-content {
  flex: 1 1 0%;
}
.review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.review-rating {
  color: var(--color-primary);
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 2px;
}
.review-game {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
}
.review-date {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  margin-left: auto;
}
.review-headline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text);
}
.review-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}
.review-actions button {
  background: none;color: var(--color-primary); border: none; padding: 0; cursor: pointer; text-decoration: underline; font-size: inherit;
}

/******* Collector Spotlights *******/
.collector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px,1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.collector-card {
  background: linear-gradient(115deg, #292534 90%, #382870 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow var(--transition-base);
}
.collector-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-primary);
  margin-bottom: var(--space-4);
  background: var(--color-gray-700);
  box-shadow: 0 2px 11px -3px #1a1818;
}
.collector-card blockquote {
  font-style: italic;
  color: var(--color-gray-300);
  margin-bottom: var(--space-3);
  text-align: center;
}
.collector-card cite {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: var(--space-2);
}
.collector-photos {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.collector-photo-thumb {
  width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--color-primary);
  background: var(--color-gray-700);
}

/******* Mythology in Play *******/
.stories-list {
  display: grid; gap: var(--space-8); margin-top: var(--space-8);
}
.story-card {
  background: linear-gradient(120deg, #1a1818 90%, #312d51 100%) url('../img/story-bg-right.svg') right 1.2rem bottom 1.1rem/90px no-repeat;
  border-left: 8px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  position: relative;
}
.story-quote {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}
.story-details {
  color: var(--color-gray-200);
  font-size: var(--font-size-md);
}
.story-author {
  margin-top: var(--space-4);
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
}
@media (max-width:700px) {
  .story-card { padding: var(--space-4); }
}

/******* Rate the Pantheons *******/
.pantheons-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.pantheon-card {
  background: linear-gradient(100deg,#251d36 80%,#392e78 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pantheon-title {
  font-family: var(--font-family-heading);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.pantheon-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.15em;
  margin-bottom: var(--space-2);
}
.pantheon-rating .star {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 1.1em;
  transition: color var(--transition-fast);
}
.pantheon-rating .star.dim {
  color: var(--color-gray-400);
}
.pantheon-comments {
  font-size: var(--font-size-sm);
  color: var(--color-gray-200);
  margin-top: var(--space-2);
  max-height: 110px;
  overflow-y: auto;
}
.pantheon-add-comment {
  margin-top: var(--space-2);
  width: 100%;
}
.pantheon-add-comment input {
  width: 100%;
}
.pantheon-rating-guidelines {
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  background: var(--color-gray-700);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-gray-200);
}

/****** Expert Voices & Press Carousel ******/
.expert-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: var(--space-8);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  min-height: 180px;
}
.expert-card {
  background: linear-gradient(120deg, #251d3a 70%, #383472 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow var(--transition-fast);
  text-align: center;
}
.expert-card-logo {
  width: 55px; height: 55px; margin-bottom: var(--space-3); object-fit: contain; border-radius: var(--radius-md);
  background: var(--color-gray-800);
}
.expert-card-quote {
  font-style: italic;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-md);
}
.expert-card-meta {
  color: var(--color-gray-300);
  font-size: var(--font-size-xs);
}
.carousel-btn {
  background: var(--color-primary);
  border: none;
  color: #fff;
  font-size: var(--font-size-lg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.carousel-btn:hover, .carousel-btn:focus-visible {
  background: var(--color-success);
}

/****** Art & Components Gallery ******/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.gallery-photo-card {
  background: linear-gradient(100deg, #241c32 90%, #382c68 100%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
}
.gallery-photo-img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--space-2);
}
.gallery-photo-comment {
  font-size: var(--font-size-xs); color: var(--color-gray-200); text-align: center; margin-bottom: var(--space-1);
  max-width: 170px;
}
.gallery-photo-meta {
  font-size: var(--font-size-xs); color: var(--color-gray-400);
}

/****** Leave Your Legend CTA & Form ******/
.leave-legend {
  background: linear-gradient(120deg, #1a1818 80%, #2a1d42 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-16);
  margin-bottom: var(--space-12);
}
.legend-form {
  margin-top: var(--space-6);
}
.legend-form .form-group {
  margin-bottom: var(--space-4);
}
.legend-form label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
}
.star-rating .star {
  display: inline-block;
  font-size: 1.5em;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: color var(--transition-fast);
  margin-right: 4px;
}
.star-rating .star.selected,
.star-rating .star.hovered {
  color: var(--color-primary);
}
.legend-success-message,
.legend-error-message {
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
  color: var(--color-success);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.legend-error-message { color: var(--color-danger); }

@media (max-width:900px) {
  .container { padding-left: var(--space-2); padding-right: var(--space-2); }
}
@media (max-width:600px) {
  .leave-legend {
    padding: var(--space-6) var(--space-2);
    margin-top: var(--space-10);
  }
  .reviews-hero { margin-top: var(--space-8);margin-bottom: var(--space-8); }
}