/* Quote Style Templates */

/* Main Preview Container - with invisible bounding box */
.quote-preview-container {
  width: 280px;
  height: 400px;
  margin: 0 auto;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  border: 2px solid #e5e7eb;
  overflow: hidden;
  position: relative;
}

/* Show Quote Container - larger for show page */
.show-quote-container {
  width: 350px;
  height: 500px;
}

/* Invisible bounding box for text content */
.quote-preview-container::before {
  content: '';
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  pointer-events: none;
  z-index: 0;
}

/* Thumbnail Preview Containers - inside style options */
.style-option .quote-preview-container {
  width: 140px;
  height: 200px;
  padding: 0.5rem;
  overflow: hidden;
}

/* Mobile responsive - smaller thumbnail containers */
@media (max-width: 768px) {
  .style-option .quote-preview-container {
    width: 100px;
    height: 130px;
    padding: 0.2rem;
    overflow: hidden;
  }
}

/* Base quote styles with improved scaling */
.quote-title {
  transition: all 0.3s ease;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  font-size: clamp(1rem, 4vw, 2rem);
}

.quote-pronunciation {
  transition: all 0.3s ease;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  font-size: clamp(0.75rem, 2vw, 1rem);
}

.quote-description {
  transition: all 0.3s ease;
  line-height: 1.6;
  overflow: hidden;
  position: relative;
  z-index: 1;
  font-size: clamp(0.7rem, 1.5vw, 0.875rem);
}

/* Fix centering for all font sizes */
/* Vintage style removed - now uses left alignment like minimal */

/* Minimal Style - Matches the default template exactly */
.style-minimal {
  font-family: 'Times New Roman', serif;
  background-color: white;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
}

.style-minimal .container {
  width: 80%;
  max-width: 100%;
  padding: 0.625rem;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.style-minimal .quote-title {
  font-size: clamp(1.2rem, 5vw, 2rem);
  font-weight: bold;
  border-bottom: 2px solid #333333;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 0.3125rem;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.style-minimal .quote-pronunciation {
  font-size: clamp(0.7rem, 2.5vw, 0.875rem);
  font-weight: normal;
  margin-bottom: 0.5rem;
  word-wrap: break-word;
}

.style-minimal .quote-description {
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  line-height: 1.4;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Elegant Style - Inverted Minimal */
.style-elegant {
  font-family: 'Times New Roman', serif;
  background-color: #333333;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
}

.style-elegant .container {
  width: 80%;
  max-width: 100%;
  padding: 0.625rem;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.style-elegant .quote-title {
  font-size: clamp(1.2rem, 5vw, 2rem);
  font-weight: bold;
  border-bottom: 2px solid white;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 0.3125rem;
  margin-bottom: 0.5rem;
  color: white;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.style-elegant .quote-pronunciation {
  font-size: clamp(0.7rem, 2.5vw, 0.875rem);
  font-weight: normal;
  margin-bottom: 0.5rem;
  color: white;
  word-wrap: break-word;
}

.style-elegant .quote-description {
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  line-height: 1.4;
  color: white;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Modern Style - Bottom Half Layout */
.style-modern {
  font-family: 'Times New Roman', serif;
  background-color: white;
  color: #333333;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
  flex-direction: column;
}

.style-modern .container {
  width: 80%;
  max-width: 100%;
  padding: 0.625rem;
  text-align: left;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
}

.style-modern .quote-title {
  font-size: clamp(1.2rem, 5vw, 2rem);
  font-weight: bold;
  border-bottom: 2px solid #333333;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 0.3125rem;
  margin-bottom: 0.5rem;
  color: #333333;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.style-modern .quote-pronunciation {
  font-size: clamp(0.7rem, 2.5vw, 0.875rem);
  font-weight: normal;
  margin-bottom: 0.5rem;
  color: #333333;
  word-wrap: break-word;
}

.style-modern .quote-description {
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  line-height: 1.4;
  color: #333333;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Vintage Style - Minimal Template Without Line Separator */
.style-vintage {
  font-family: 'Times New Roman', serif;
  background-color: white;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  margin: 0;
}

.style-vintage .container {
  width: 80%;
  max-width: 100%;
  padding: 0.625rem;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.style-vintage .quote-title {
  font-size: clamp(1.2rem, 5vw, 2rem);
  font-weight: bold;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 0.3125rem;
  margin-bottom: 0.5rem;
  color: #333333;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* No border-bottom - line separator removed */
}

.style-vintage .quote-pronunciation {
  font-size: clamp(0.7rem, 2.5vw, 0.875rem);
  font-weight: normal;
  margin-bottom: 0.5rem;
  color: #333333;
  word-wrap: break-word;
}

.style-vintage .quote-description {
  font-size: clamp(0.6rem, 2vw, 0.75rem);
  line-height: 1.4;
  color: #333333;
  word-wrap: break-word;
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Thumbnail previews - responsive scaling with rem */
.style-option .quote-preview-container .quote-title {
  font-size: clamp(0.4rem, 2vw, 0.6rem) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal;
}

.style-option .quote-preview-container .quote-pronunciation {
  font-size: clamp(0.25rem, 1vw, 0.35rem) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal;
}

.style-option .quote-preview-container .quote-description {
  font-size: clamp(0.2rem, 0.8vw, 0.3rem) !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  word-wrap: break-word;
}

/* Thumbnail text containers */
.style-option .quote-preview-container .quote-title,
.style-option .quote-preview-container .quote-pronunciation {
  margin: 0;
  max-width: 100%;
}

.style-option .quote-preview-container .quote-description {
  margin: 0;
  max-width: 100%;
}

/* Mobile thumbnails - further refined */
@media (max-width: 768px) {
  .style-option .quote-preview-container .quote-title {
    font-size: clamp(0.3rem, 1.8vw, 0.45rem) !important;
  }

  .style-option .quote-preview-container .quote-pronunciation {
    font-size: clamp(0.2rem, 0.8vw, 0.28rem) !important;
  }

  .style-option .quote-preview-container .quote-description {
    font-size: clamp(0.15rem, 0.6vw, 0.22rem) !important;
    -webkit-line-clamp: 2;
  }
}

/* Style option active state */
.style-option.active {
  border-color: #3b82f6 !important;
  background-color: #dbeafe !important;
}

/* Custom font families based on data attribute */
[data-font-family="Arial, sans-serif"] .quote-title,
[data-font-family="Arial, sans-serif"] .quote-pronunciation,
[data-font-family="Arial, sans-serif"] .quote-description {
  font-family: Arial, sans-serif !important;
}

[data-font-family="'Helvetica Neue', Helvetica, sans-serif"] .quote-title,
[data-font-family="'Helvetica Neue', Helvetica, sans-serif"] .quote-pronunciation,
[data-font-family="'Helvetica Neue', Helvetica, sans-serif"] .quote-description {
  font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
}

[data-font-family="'Times New Roman', Times, serif"] .quote-title,
[data-font-family="'Times New Roman', Times, serif"] .quote-pronunciation,
[data-font-family="'Times New Roman', Times, serif"] .quote-description {
  font-family: 'Times New Roman', Times, serif !important;
}

[data-font-family="Georgia, serif"] .quote-title,
[data-font-family="Georgia, serif"] .quote-pronunciation,
[data-font-family="Georgia, serif"] .quote-description {
  font-family: Georgia, serif !important;
}

[data-font-family="Verdana, sans-serif"] .quote-title,
[data-font-family="Verdana, sans-serif"] .quote-pronunciation,
[data-font-family="Verdana, sans-serif"] .quote-description {
  font-family: Verdana, sans-serif !important;
}

[data-font-family="'Trebuchet MS', sans-serif"] .quote-title,
[data-font-family="'Trebuchet MS', sans-serif"] .quote-pronunciation,
[data-font-family="'Trebuchet MS', sans-serif"] .quote-description {
  font-family: 'Trebuchet MS', sans-serif !important;
}

[data-font-family="Impact, sans-serif"] .quote-title,
[data-font-family="Impact, sans-serif"] .quote-pronunciation,
[data-font-family="Impact, sans-serif"] .quote-description {
  font-family: Impact, sans-serif !important;
}


[data-font-family="'Palatino Linotype', serif"] .quote-title,
[data-font-family="'Palatino Linotype', serif"] .quote-pronunciation,
[data-font-family="'Palatino Linotype', serif"] .quote-description {
  font-family: 'Palatino Linotype', serif !important;
}

[data-font-family="'Lucida Console', monospace"] .quote-title,
[data-font-family="'Lucida Console', monospace"] .quote-pronunciation,
[data-font-family="'Lucida Console', monospace"] .quote-description {
  font-family: 'Lucida Console', monospace !important;
}

[data-font-family="Tahoma, sans-serif"] .quote-title,
[data-font-family="Tahoma, sans-serif"] .quote-pronunciation,
[data-font-family="Tahoma, sans-serif"] .quote-description {
  font-family: Tahoma, sans-serif !important;
}