/* Telar - Digital Storytelling Framework CSS */
/* CSS Variables with hardcoded paisajes defaults as ultimate fallback */
:root {
  /* Text colors */
  --color-heading: #2c3e50;
  --color-body: #333333;
  --color-link: #8b4513;
  --color-button-text: #FFFFFF;
  --color-panel-layer1-text: #2c3e50;
  --color-panel-layer2-text: #FFFFFF;
  --color-panel-glossary-text: #333333;
  /* Background colors */
  --color-button-bg: #2c3e50;
  --color-panel-layer1-bg: #A8C5D4;
  --color-panel-layer2-bg: #3d2645;
  --color-panel-glossary-bg: #F5EDE1;
  /* Fonts */
  --font-headings: "Playfair Display", serif;
  --font-body: "Source Sans Pro", sans-serif;
}

/* Typography */
body {
  font-family: var(--font-body);
  color: var(--color-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  color: var(--color-heading);
}

/* Display headings - ensure proper word wrapping on mobile */
.navbar-brand {
  white-space: normal !important;
}

@media (max-width: 767px) {
  .display-4 {
    font-size: 2.5rem;
  }
}
/* Navigation */
.site-header .navbar-brand {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  color: var(--color-heading);
}

.navbar-toggler {
  margin-left: auto;
}

/* Footer */
.site-footer {
  border-top: 1px solid #dee2e6;
}

.footer-link {
  color: #6c757d;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* Page Content */
.page-content {
  font-size: 1.25rem;
  font-weight: 300;
}

.page-content h1 {
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.page-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 400;
}

.page-content p {
  margin-bottom: 1.5rem;
}

.page-content a {
  color: var(--color-link);
  text-decoration: underline;
}

.page-content a:hover {
  opacity: 0.8;
}

/* Site Description - Links appear darker than body text, show theme color and underline on hover */
.site-description a {
  color: var(--color-body);
  text-decoration: none;
  transition: all 0.3s ease;
  filter: brightness(0.7);
}

.site-description a:hover {
  color: var(--color-link);
  text-decoration: underline;
  filter: brightness(1);
}

/* Story Layout - Split Screen with Card Stacking */
.story-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.narrative-column {
  flex: 0 0 40%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  position: relative;
  scroll-snap-type: y proximity;
  scroll-padding-top: 10vh;
}

.viewer-column {
  flex: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

/* Viewer Card Stacking System */
#viewer-cards-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.viewer-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.card-below {
  transform: translateY(100%);
  opacity: 0;
}

.card-active {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================================
   GRACEFUL PANEL TRANSITIONS ON MOBILE (v0.4.0)

   Mobile viewer transitions: Remove slide animation, use fade only for faster
   perceived performance. Desktop retains slide-up animation.
   ============================================================================ */
@media (max-width: 767px) {
  .viewer-card {
    /* Override desktop slide animation - fade only on mobile */
    transition: opacity 300ms ease-out !important;
    /* Always at 0 position, no slide */
    transform: translateY(0) !important;
  }
  .viewer-card.card-active {
    opacity: 1;
  }
  .viewer-card.card-below {
    opacity: 0;
    /* Still moved down for z-index purposes, but instantly (no animation) */
    transform: translateY(100%) !important;
  }
}
/* Skeleton loading shimmer - subtle loading indicator during viewer initialization */
#viewer-cards-container.skeleton-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Subtle gradient that sweeps across */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
  animation: skeleton-shimmer 2s infinite;
  z-index: 999;
  pointer-events: none; /* Don't block viewer interactions */
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Story Steps Container - Fixed height for absolute positioning */
.story-steps {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Story Step - Absolute positioned cards that stack */
.story-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2rem;
  background: #fff;
  border-left: 3px solid transparent;
  transform: translateY(100%);
  opacity: 0;
  transition: border-color 0.3s ease, opacity 0.4s ease-out, transform 0.4s ease-out;
  /* Flex layout for content and button */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Main content wrapper - centered vertically */
.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

/* Active state - slides up to visible position */
.story-step.is-active {
  border-left-color: var(--color-primary);
  opacity: 1;
  transform: translateY(0);
}

/* Return Home Button - at bottom of last step */
.step-home-button {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid #e0e0e0;
  width: 100%;
}

/* Intro Step - First step in narrative column */
.story-intro {
  /* Uses same absolute positioning as normal steps */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: none !important;
  background: #f5f7fa;
  /* Start visible (like normal step) */
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.intro-content {
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.intro-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  line-height: 1.2;
}

.intro-byline {
  font-size: 1.1rem;
  color: #5a6c7d;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.intro-description {
  font-size: 1.25rem;
  color: #5a6c7d;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.intro-hint {
  margin-top: 3rem;
  opacity: 0.6;
}

/* Responsive hint text - show appropriate hint for device */
.hint-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hint-desktop {
    display: none;
  }
  .hint-mobile {
    display: inline;
  }
}
.btn-home {
  position: fixed !important;
  top: 2rem !important;
  left: 2rem !important;
  text-decoration: none;
  color: #5a6c7d;
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5e0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  z-index: 1040 !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-home:hover {
  background: white;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Home button icon - hidden on desktop */
.btn-home-icon {
  display: none;
}

/* Outro Step - End card in narrative column only */
.story-outro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: none !important;
  background: #f5f7fa;
}

.outro-content {
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

.outro-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.outro-text {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #5a6c7d;
}

.story-step h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.story-step p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Panels - Theme-aware trigger buttons */
.panel-trigger {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--color-button-bg);
  color: var(--color-button-text);
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.panel-trigger:hover {
  background: var(--color-button-bg);
  color: var(--color-button-text);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

/* Layer 1 Panel - Light blue background, wide coverage */
#panel-layer1 {
  width: 65% !important;
  max-width: 900px;
  background: var(--color-panel-layer1-bg);
}

#panel-layer1 .offcanvas-header {
  background: var(--color-panel-layer1-bg);
  border-bottom: none;
  padding: 1.5rem 2rem;
}

#panel-layer1 .offcanvas-body {
  background: var(--color-panel-layer1-bg);
  color: var(--color-panel-layer1-text);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

#panel-layer1 .offcanvas-title {
  color: var(--color-panel-layer1-text);
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 400;
}

/* Layer 2 Panel - Dark purple background, narrower than layer1 */
#panel-layer2 {
  width: 55% !important;
  max-width: 800px;
  background: var(--color-panel-layer2-bg);
}

#panel-layer2 .offcanvas-header {
  background: var(--color-panel-layer2-bg);
  border-bottom: none;
  padding: 1.5rem 2rem;
}

#panel-layer2 .offcanvas-body {
  background: var(--color-panel-layer2-bg);
  color: var(--color-panel-layer2-text);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

#panel-layer2 .offcanvas-title {
  color: var(--color-panel-layer2-text);
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 400;
}

/* Panel buttons styling */
#panel-layer1 .btn-close,
#panel-layer2 .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

#panel-layer1 .btn-close:hover,
#panel-layer2 .btn-close:hover {
  opacity: 1;
}

#panel-layer1-back,
#panel-layer2-back {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

#panel-layer1-back:hover,
#panel-layer2-back:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Glossary Panel - Cream/beige background */
#panel-glossary {
  width: 45% !important;
  max-width: 600px;
  background: var(--color-panel-glossary-bg);
}

#panel-glossary .offcanvas-header {
  background: var(--color-panel-glossary-bg);
  border-bottom: none;
  padding: 1.5rem 2rem;
}

#panel-glossary .offcanvas-body {
  background: var(--color-panel-glossary-bg);
  color: var(--color-panel-glossary-text);
  padding: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
}

#panel-glossary .offcanvas-title {
  color: var(--color-panel-glossary-text);
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 400;
}

#panel-glossary .btn-close {
  filter: none;
  opacity: 0.7;
}

#panel-glossary .btn-close:hover {
  opacity: 1;
}

/* Glossary back button uses default Bootstrap outline-secondary styling */
/* Viewer Containers */
#viewer-container {
  width: 100%;
  height: 100%;
}

#object-viewer {
  width: 100%;
  height: 600px;
}

/* UniversalViewer - Clean Story Viewer Display */
/* Hide all UV controls in story pages for clean presentation */
.viewer-instance .headerPanel,
.viewer-instance .footerPanel,
.viewer-instance .leftPanel,
.viewer-instance .rightPanel,
.viewer-instance .mobilePanel,
.viewer-instance .btn,
.viewer-instance .download,
.viewer-instance .share,
.viewer-instance .embed,
.viewer-instance .more,
.viewer-instance .pagingToggle,
.viewer-instance .searchButton,
.viewer-instance .bookmark,
.viewer-instance .zoomIn,
.viewer-instance .zoomOut,
.viewer-instance .goHome {
  display: none !important;
}

/* Extra aggressive hiding for left panel thumbnails/color bars */
.viewer-card .leftPanel,
.viewer-card .thumbsView,
.viewer-card .galleryView,
.uv .leftPanel,
.uv .thumbsView,
.uv .galleryView {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
}

/* Keep only the essential image viewing area */
.viewer-instance .centerPanel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Remove UV branding, titles, and info overlays */
.viewer-instance .informationBox,
.viewer-instance .moreInfoButton,
.viewer-instance .attribution,
.viewer-instance .title,
.viewer-instance .subtitle,
.viewer-instance .titlePanel,
.viewer-instance .metadata,
.viewer-instance h1,
.viewer-instance h2 {
  display: none !important;
}

/* UniversalViewer - Clean Object Page Display */
/* Hide all UV controls on object pages for clean presentation */
#object-viewer .headerPanel,
#object-viewer .footerPanel,
#object-viewer .leftPanel,
#object-viewer .rightPanel,
#object-viewer .mobilePanel,
#object-viewer .btn,
#object-viewer .download,
#object-viewer .share,
#object-viewer .embed,
#object-viewer .more,
#object-viewer .pagingToggle,
#object-viewer .searchButton,
#object-viewer .bookmark,
#object-viewer .zoomIn,
#object-viewer .zoomOut,
#object-viewer .goHome {
  display: none !important;
}

/* Keep only the essential image viewing area */
#object-viewer .centerPanel {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Remove UV branding, titles, and info overlays */
#object-viewer .informationBox,
#object-viewer .moreInfoButton,
#object-viewer .attribution,
#object-viewer .title,
#object-viewer .subtitle,
#object-viewer .titlePanel,
#object-viewer .metadata,
#object-viewer h1,
#object-viewer h2 {
  display: none !important;
}

/* Story Cards - Paisajes Colonial Style */
.story-card {
  display: block;
  color: inherit;
  transition: transform 0.3s ease;
}

.story-card:hover {
  transform: translateY(-5px);
}

.story-card .card {
  transition: box-shadow 0.3s ease;
}

.story-card:hover .card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.story-card .card-body {
  text-align: left;
}

.story-card h3 {
  font-family: var(--font-headings);
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-top: 1rem;
  font-weight: 400;
}

.story-thumbnail {
  width: 100%;
  border-radius: 0.25rem 0.25rem 0 0;
}

.story-thumbnail-placeholder {
  font-family: var(--font-headings);
  font-size: 3rem;
  font-weight: 700;
  border-radius: 0.25rem 0.25rem 0 0;
}

/* Story Byline */
.story-byline {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Collection Gallery */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.collection-item {
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.collection-item:hover {
  transform: translateY(-5px);
}

.collection-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
}

.collection-item h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
}

/* Glossary Index */
.glossary-list {
  padding: 2rem 0;
}

.glossary-letter {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
}

.glossary-term {
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 3px solid var(--color-secondary);
  background: #f8f9fa;
}

.glossary-term h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.glossary-term-link {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.glossary-term-link:hover {
  color: var(--color-link);
  text-decoration: underline;
  opacity: 0.8;
}

/* Glossary Inline Links (in story panel content) */
.glossary-inline-link {
  background-color: var(--color-panel-glossary-bg);
  color: var(--color-panel-glossary-text);
  padding: 0.02em 0.4em; /* Minimal vertical padding for very snug fit */
  border-radius: 6px; /* Increased for more rounded corners */
  text-decoration: none;
  font-size: 0.95em;
  display: inline-block;
  transition: opacity 0.2s ease;
}

.glossary-inline-link:hover {
  opacity: 0.85;
  text-decoration: none;
  color: var(--color-panel-glossary-text);
}

/* Glossary Link Error Indicator (nonexistent terms) */
.glossary-link-error {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.02em 0.4em; /* Minimal vertical padding for very snug fit */
  border-radius: 6px; /* Increased for more rounded corners */
  border: 1px solid #ffc107;
  font-size: 0.95em;
  display: inline-block;
}

/* Global Button Styling - Rounded like panel-trigger buttons */
.btn {
  border-radius: 20px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Theme-aware button colors */
.btn-primary {
  background-color: var(--color-button-bg) !important;
  border-color: var(--color-button-bg) !important;
  color: var(--color-button-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-button-bg) !important;
  border-color: var(--color-button-bg) !important;
  opacity: 0.9;
  color: var(--color-button-text) !important;
}

/* Footnotes Styling */
/* Footnote reference links in text (superscript numbers) */
.offcanvas-body a[href^="#_ftn"] {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  font-weight: 600;
  padding: 0 0.15em;
}

/* Layer 1 (light blue) footnote references */
#panel-layer1 .offcanvas-body a[href^="#_ftn"] {
  color: var(--color-link);
}

#panel-layer1 .offcanvas-body a[href^="#_ftn"]:hover {
  color: #1a252f;
  text-decoration: underline;
}

/* Layer 2 (dark purple) footnote references */
#panel-layer2 .offcanvas-body a[href^="#_ftn"] {
  color: var(--color-link);
}

#panel-layer2 .offcanvas-body a[href^="#_ftn"]:hover {
  color: #C5DBE8;
  text-decoration: underline;
}

/* Horizontal rule separator before footnotes */
.offcanvas-body hr {
  margin: 2.5rem 0 1.5rem 0;
  border: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  opacity: 0.5;
}

#panel-layer2 .offcanvas-body hr {
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Footnote section styling */
.offcanvas-body p:has(a[href^="#_ftnref"]) {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

/* Footnote number at start of footnote */
.offcanvas-body a[href^="#_ftnref"] {
  font-size: 0.85em;
  text-decoration: none;
  font-weight: 600;
  margin-right: 0.5em;
}

/* Layer 1 footnote numbers */
#panel-layer1 .offcanvas-body a[href^="#_ftnref"] {
  color: var(--color-link);
}

#panel-layer1 .offcanvas-body a[href^="#_ftnref"]:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Layer 2 footnote numbers */
#panel-layer2 .offcanvas-body a[href^="#_ftnref"] {
  color: var(--color-link);
}

#panel-layer2 .offcanvas-body a[href^="#_ftnref"]:hover {
  color: #E8DCC4;
  text-decoration: underline;
}

/* Blockquote Styling */
.offcanvas-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid;
  font-style: italic;
  position: relative;
}

/* Layer 1 (light blue) blockquotes */
#panel-layer1 .offcanvas-body blockquote {
  border-left-color: var(--color-primary);
  background: rgba(44, 62, 80, 0.05);
  color: var(--color-primary);
}

/* Layer 2 (dark purple) blockquotes */
#panel-layer2 .offcanvas-body blockquote {
  border-left-color: var(--color-panel-layer1-bg);
  background: rgba(168, 197, 212, 0.1);
  color: #C5DBE8;
}

/* Blockquote paragraph spacing */
.offcanvas-body blockquote p {
  margin-bottom: 0;
}

.offcanvas-body blockquote p:last-child {
  margin-bottom: 0;
}

/* General Hyperlinks in Panels (non-footnote links) */
.offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]) {
  color: var(--color-link);
  text-decoration: underline;
}

.offcanvas-body a:not([href^="#_ftn"]):not([href^="#_ftnref"]):hover {
  opacity: 0.8;
}

/* Panel Images */
.offcanvas-body img {
  max-width: 300px;
  height: auto;
  display: block;
  margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
  .story-container {
    flex-direction: column;
    height: auto;
  }
  .viewer-column {
    flex: 0 0 60vh;
    order: 1;
    position: relative;
    height: 60vh;
    margin-bottom: 0;
  }
  .narrative-column {
    flex: 0 0 40vh;
    height: 40vh !important;
    order: 2;
    overflow-y: auto !important;
  }
  /* Mobile Button Navigation System */
  /* Fix story steps container height */
  .story-steps {
    height: auto;
    min-height: 40vh;
    position: relative;
  }
  /* Hide all story steps by default on mobile */
  .story-step {
    display: none;
    position: static !important;
    height: auto !important;
    min-height: 40vh;
    max-height: 40vh;
    padding: 1.5rem;
    overflow: hidden;
    transform: none !important;
    opacity: 1 !important;
  }
  /* Show only the active step */
  .story-step.mobile-active {
    display: flex;
  }
  /* Mobile intro styling - smaller text, left-aligned */
  .story-intro .intro-content {
    text-align: left;
    max-width: 100%;
    padding: 1rem;
  }
  .story-intro .intro-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .story-intro .intro-byline {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  .story-intro .intro-description {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .story-intro .intro-hint {
    font-size: 0.9rem;
    margin-top: 1.5rem;
  }
  /* Move panel trigger buttons to bottom on mobile */
  .story-step .step-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .story-step .panel-trigger {
    margin-top: auto;
    align-self: flex-start;
  }
  /* Mobile Navigation Buttons - positioned on right side */
  .mobile-nav {
    position: fixed;
    right: 1rem;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .mobile-nav button {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 1.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav button:hover:not(:disabled) {
    background: rgb(255, 255, 255);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .mobile-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  /* Panel System - full width bottom sheets */
  /* Layer 1 Panel - most content, tallest panel */
  #panel-layer1 {
    width: 100% !important;
    height: 65vh !important;
    max-width: 100% !important;
    max-height: 65vh !important;
  }
  /* Layer 2 Panel - medium content */
  #panel-layer2 {
    width: 100% !important;
    height: 60vh !important;
    max-width: 100% !important;
    max-height: 60vh !important;
  }
  /* Glossary Panel - brief definitions, shortest panel */
  #panel-glossary {
    width: 100% !important;
    height: 55vh !important;
    max-width: 100% !important;
    max-height: 55vh !important;
  }
  /* Touch Target Optimization - 44x44px minimum for accessibility */
  .panel-trigger {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Mobile home button - match navigation button style */
  .btn-home {
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    top: 1rem !important;
    left: 1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  /* Hide text on mobile, show only icon */
  .btn-home-text {
    display: none;
  }
  .btn-home-icon {
    display: block !important; /* Override desktop hide */
    font-size: 1.5rem;
  }
  .offcanvas-header .btn-close {
    width: 33px;
    height: 33px;
    padding: 0.5rem;
  }
  /* Mobile Offcanvas Panel Positioning - Option 2B (Right-Slide with Fixed Size & Top/Bottom Gaps) */
  .offcanvas-end {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 300ms ease-out;
    border-radius: 0 !important;
    transform: translateX(100%);
  }
  .offcanvas-end.show {
    transform: translateX(0);
  }
  /* Layer 1 - "Go Deeper" panels */
  #panel-layer1.offcanvas-end {
    top: 12vh !important;
    height: 76vh !important;
    max-height: 76vh !important;
    width: 98vw !important;
    max-width: 98vw !important;
    z-index: 1050;
  }
  /* Layer 2 - "Learn More" panels */
  #panel-layer2.offcanvas-end {
    top: 10vh !important;
    height: 76vh !important;
    max-height: 76vh !important;
    width: 96vw !important;
    max-width: 96vw !important;
    z-index: 1051;
  }
  /* Glossary */
  #panel-glossary.offcanvas-end {
    top: 8vh !important;
    height: 76vh !important;
    max-height: 76vh !important;
    left: 6vw !important;
    width: 94vw !important;
    max-width: 94vw !important;
  }
  .offcanvas-body {
    overflow-y: auto;
  }
  /* Hide Back buttons on mobile - X button is sufficient */
  #panel-layer1-back,
  #panel-layer2-back,
  #panel-glossary-back {
    display: none !important;
  }
  /* Center close button when Back button is hidden */
  .offcanvas-header {
    justify-content: flex-end;
  }
  /* Unified panel scrolling - header transparent, buttons float over content */
  .offcanvas {
    display: flex !important;
    flex-direction: column !important;
  }
  .offcanvas-header {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background: transparent !important;
    border: none !important;
    padding: 1rem !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    min-height: auto !important;
  }
  .offcanvas-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    position: static !important;
    padding: 1.5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }
  /* Title is now inside body - add top margin to clear floating close button */
  .offcanvas-body .offcanvas-title {
    margin-top: max(3rem, env(safe-area-inset-top) + 2.5rem);
    margin-bottom: 1.5rem;
  }
  /* Float close button over content - match navigation button style */
  .offcanvas-header .btn-close {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Remove white filter on mobile - show dark X like arrows/home */
    filter: none !important;
    opacity: 1 !important;
  }
  /* Back button gets same treatment on desktop */
  .offcanvas-header .btn-outline-secondary {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  /* Glossary Index - reduce spacing on mobile */
  .glossary-letter {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  .glossary-term {
    margin-bottom: 0.5rem;
    padding: 0.75rem;
  }
  .glossary-term h3 {
    font-size: 1.1rem;
  }
  .glossary-term-link {
    font-size: 1rem;
  }
  /* Glossary inline links - slightly smaller on mobile */
  .glossary-inline-link,
  .glossary-link-error {
    padding: 0.1em 0.35em;
    font-size: 0.9em;
  }
}
/* Mobile responsive grid - override auto-fill behavior */
@media (max-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .collection-item img {
    height: 180px;
  }
}
/* Single column for screens up to 441px (iPhone Pro Max at 440px stays 1 column) */
@media (max-width: 441px) {
  .collection-grid {
    grid-template-columns: 1fr;
  }
  .collection-item img {
    height: 200px;
  }
}
/* ============================================================================
   HEIGHT-BASED RESPONSIVE DESIGN FOR SMALL MOBILE SCREENS (v0.4.0)
   Progressive reductions in typography and spacing for phones with limited
   vertical space (iPhone SE, small Android devices). Ensures "Learn More"
   buttons and other UI elements remain visible and accessible.
   ============================================================================ */
/* Tier 1: Small Mobile - phones with 700px or less height */
@media (max-width: 768px) and (max-height: 700px) {
  .story-step {
    padding: 1.3rem !important;
  }
  .story-step h2 {
    font-size: 1.5rem;
    margin-bottom: 0.9rem;
  }
  .story-step p {
    font-size: 1rem;
    margin-bottom: 1.3rem;
  }
  .panel-trigger {
    font-size: 0.85rem;
    padding: 0.45rem 1.1rem;
  }
  /* Offcanvas panels - 10-15% reduction */
  .offcanvas-body {
    padding: 1.75rem !important;
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .offcanvas-body .offcanvas-title {
    font-size: 1.75rem;
    margin-bottom: 1.3rem;
  }
  .offcanvas-body blockquote {
    margin: 1.3rem 0;
    padding: 0.9rem 1.3rem;
  }
  .offcanvas-body hr {
    margin: 2.2rem 0 1.3rem 0;
  }
  .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.85rem;
    margin-bottom: 0.65rem;
  }
  /* Site-wide content - 10-15% reduction */
  .page-content {
    font-size: 1.125rem;
  }
  .page-content h1 {
    margin-bottom: 1.3rem;
  }
  .page-content h2 {
    margin-top: 2.2rem;
    margin-bottom: 0.9rem;
  }
  .page-content p {
    margin-bottom: 1.3rem;
  }
  .collection-grid {
    gap: 1.75rem;
    padding: 1.75rem 0;
  }
  .collection-item h3 {
    font-size: 1.1rem;
    margin-top: 0.9rem;
  }
  .navbar-brand {
    font-size: 1.35rem;
  }
}
/* Tier 2: Tiny Mobile - phones with 667px or less height (iPhone SE, etc.) */
@media (max-width: 768px) and (max-height: 667px) {
  /* Adjust viewer:panel ratio from 60:40 to 55:45 for more step panel space */
  .viewer-column {
    flex: 0 0 55vh !important;
    height: 55vh !important;
  }
  .narrative-column {
    flex: 0 0 45vh !important;
    height: 45vh !important;
  }
  .story-steps {
    min-height: 45vh !important;
  }
  .story-step {
    min-height: 45vh !important;
    max-height: 45vh !important;
    padding: 1.2rem !important;
  }
  .story-step h2 {
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
  }
  .story-step p {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
  }
  .panel-trigger {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }
  /* Offcanvas panels - 20-25% reduction */
  .offcanvas-body {
    padding: 1.5rem !important;
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .offcanvas-body .offcanvas-title {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }
  .offcanvas-body blockquote {
    margin: 1.2rem 0;
    padding: 0.8rem 1.2rem;
  }
  .offcanvas-body hr {
    margin: 2rem 0 1.2rem 0;
  }
  .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.75rem;
    margin-bottom: 0.6rem;
  }
  .offcanvas-body img {
    max-width: 250px;
    margin: 0.8rem 0;
  }
  /* Site-wide content - 20-25% reduction */
  .page-content {
    font-size: 1rem;
  }
  .page-content h1 {
    margin-bottom: 1.2rem;
  }
  .page-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
  }
  .page-content p {
    margin-bottom: 1.2rem;
  }
  .collection-grid {
    gap: 1.5rem;
    padding: 1.5rem 0;
  }
  .collection-item img {
    height: 200px;
  }
  .collection-item h3 {
    font-size: 1rem;
    margin-top: 0.8rem;
  }
  .navbar-brand {
    font-size: 1.25rem;
  }
  /* Navigation buttons - smaller for tiny screens */
  .mobile-nav button {
    width: 45px !important;
    height: 45px !important;
  }
}
/* Tier 3: Micro Mobile - very small Android phones with 600px or less height */
@media (max-width: 768px) and (max-height: 600px) {
  /* Maintain 55:45 ratio, further reduce typography */
  .story-step {
    padding: 1rem !important;
  }
  .story-step h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  .story-step p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .panel-trigger {
    font-size: 0.75rem;
    padding: 0.35rem 0.9rem;
  }
  /* Offcanvas panels - 30-35% reduction */
  .offcanvas-body {
    padding: 1.3rem !important;
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .offcanvas-body .offcanvas-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .offcanvas-body blockquote {
    margin: 1rem 0;
    padding: 0.7rem 1rem;
  }
  .offcanvas-body hr {
    margin: 1.75rem 0 1rem 0;
  }
  .offcanvas-body p:has(a[href^="#_ftnref"]) {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }
  .offcanvas-body img {
    max-width: 200px;
    margin: 0.7rem 0;
  }
  /* Site-wide content - 30-35% reduction */
  .page-content {
    font-size: 0.875rem;
  }
  .page-content h1 {
    margin-bottom: 1rem;
  }
  .page-content h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }
  .page-content p {
    margin-bottom: 1rem;
  }
  .collection-grid {
    gap: 1.25rem;
    padding: 1.25rem 0;
  }
  .collection-item img {
    height: 175px;
  }
  .collection-item h3 {
    font-size: 0.9rem;
    margin-top: 0.7rem;
  }
  .navbar-brand {
    font-size: 1.125rem;
  }
  /* Navigation buttons - smaller for micro screens */
  .mobile-nav button {
    width: 45px !important;
    height: 45px !important;
  }
}
/* Small Phones: 576px and below - adjust collection grid spacing */
@media (max-width: 576px) {
  .collection-grid {
    gap: 0.75rem;
  }
  .collection-item img {
    height: 150px;
  }
}
/* Hide UniversalViewer UI controls for cleaner viewing */
.uv .leftPanel,
.uv .rightPanel,
.uv .footerPanel .options,
.uv .headerPanel .options,
.uv .moreInfo,
.uv .download,
.uv .share,
.uv .bookmark,
.uv .toggle {
  display: none !important;
}

/* Keep only essential navigation controls */
.uv .footerPanel .zoom {
  display: block;
}

/* Telar Alert Standardization */
.telar-alert {
  max-width: 900px !important;
  margin-bottom: 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* Step Indicator Toggle */
.hide-step-indicators .step-indicator {
  display: none !important;
}

/* ========================================
   WIDGET SYSTEM STYLES
   ======================================== */
/* Base Widget Container */
.telar-widget {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Widget Error Display */
.telar-widget-error {
  padding: 1rem;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-weight: 500;
  margin: 1rem 0;
}

/* ========================================
   CAROUSEL WIDGET
   ======================================== */
.telar-widget-carousel {
  padding: 0;
  background: transparent;
  border: none;
}

.telar-widget-carousel .carousel {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.telar-widget-carousel .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 600px;
}

.telar-widget-carousel .carousel-caption {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  border-radius: 4px;
  bottom: 2rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
}

.telar-widget-carousel .carousel-caption .caption-text {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
}

.telar-widget-carousel .carousel-caption .caption-credit {
  margin-bottom: 0;
  font-size: 0.85rem;
  opacity: 0.9;
  color: #fff;
}

.telar-widget-carousel .carousel-control-prev,
.telar-widget-carousel .carousel-control-next {
  width: 8%;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.telar-widget-carousel .carousel-control-prev:hover,
.telar-widget-carousel .carousel-control-next:hover {
  opacity: 1;
}

.telar-widget-carousel .carousel-control-prev-icon,
.telar-widget-carousel .carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 0.5rem;
}

.telar-widget-carousel .carousel-indicators {
  margin-bottom: 1rem;
}

.telar-widget-carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.telar-widget-carousel .carousel-indicators button.active {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

/* ========================================
   COMPARISON WIDGET (Before/After Slider)
   ======================================== */
.telar-widget-comparison {
  padding: 0;
  background: transparent;
  border: none;
}

.comparison-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.comparison-before,
.comparison-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.comparison-before {
  z-index: 1;
}

.comparison-after {
  z-index: 2;
  width: 50%; /* Controlled by slider */
  overflow: hidden;
}

.comparison-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Comparison Slider Input */
.comparison-slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

/* Divider Line */
.comparison-divider {
  position: absolute;
  top: 0;
  left: 50%; /* Controlled by slider */
  width: 3px;
  height: 100%;
  background: var(--color-link);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transition: left 0.05s ease;
}

.comparison-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: var(--color-button-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.comparison-arrow {
  color: var(--color-button-text);
  font-size: 1.2rem;
  font-weight: bold;
  user-select: none;
}

/* Comparison Labels */
.comparison-label {
  position: absolute;
  top: 1.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 3;
  backdrop-filter: blur(4px);
}

.comparison-label-before {
  left: 1.5rem;
}

.comparison-label-after {
  right: 1.5rem;
}

/* Comparison Credits */
.comparison-credits {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.85rem;
  color: #666;
}

.comparison-credit {
  flex: 1;
}

.comparison-credit-before {
  text-align: left;
}

.comparison-credit-after {
  text-align: right;
}

/* ========================================
   TABS WIDGET
   ======================================== */
.telar-widget-tabs {
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.telar-widget-tabs .nav-tabs {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  margin-bottom: 0;
  padding: 0.5rem 1rem 0;
}

.telar-widget-tabs .nav-link {
  color: var(--color-body);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  transition: all 0.3s ease;
  background: transparent;
}

.telar-widget-tabs .nav-link:hover {
  color: var(--color-link);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.telar-widget-tabs .nav-link.active {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
  background: #fff;
  font-weight: 600;
}

.telar-widget-tabs .tab-content {
  padding: 0;
}

.telar-widget-tabs .tab-pane-content {
  padding: 2rem;
  line-height: 1.8;
}

.telar-widget-tabs .tab-pane-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

.telar-widget-tabs .tab-pane-content p {
  margin-bottom: 1rem;
}

.telar-widget-tabs .tab-pane-content h1,
.telar-widget-tabs .tab-pane-content h2,
.telar-widget-tabs .tab-pane-content h3,
.telar-widget-tabs .tab-pane-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* ========================================
   ACCORDION WIDGET
   ======================================== */
.telar-widget-accordion {
  padding: 0;
  background: transparent;
  border: none;
}

.telar-widget-accordion .accordion {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.telar-widget-accordion .accordion-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.telar-widget-accordion .accordion-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.telar-widget-accordion .accordion-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.telar-widget-accordion .accordion-header {
  margin-bottom: 0;
}

.telar-widget-accordion .accordion-button {
  font-family: var(--font-headings);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  background: rgba(0, 0, 0, 0.02);
  padding: 1.25rem 1.5rem;
  transition: all 0.3s ease;
}

.telar-widget-accordion .accordion-button:not(.collapsed) {
  background: var(--color-button-bg);
  color: var(--color-button-text);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.telar-widget-accordion .accordion-button:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-link), 0.25);
}

.telar-widget-accordion .accordion-button::after {
  transition: transform 0.3s ease;
}

.telar-widget-accordion .accordion-body {
  padding: 1.5rem;
  line-height: 1.8;
}

.telar-widget-accordion .accordion-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}

.telar-widget-accordion .accordion-body p {
  margin-bottom: 1rem;
}

.telar-widget-accordion .accordion-body h1,
.telar-widget-accordion .accordion-body h2,
.telar-widget-accordion .accordion-body h3,
.telar-widget-accordion .accordion-body h4 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */
@media (max-width: 768px) {
  .telar-widget {
    margin: 1.5rem 0;
    padding: 1rem;
  }
  /* Carousel Mobile */
  .telar-widget-carousel .carousel-item img {
    max-height: 400px;
  }
  .telar-widget-carousel .carousel-caption {
    padding: 1rem;
    bottom: 1rem;
    width: 95%;
  }
  .telar-widget-carousel .carousel-caption .caption-text {
    font-size: 0.9rem;
  }
  .telar-widget-carousel .carousel-caption .caption-credit {
    font-size: 0.75rem;
  }
  .telar-widget-carousel .carousel-control-prev-icon,
  .telar-widget-carousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
  }
  /* Comparison Mobile */
  .comparison-slider {
    aspect-ratio: 4/3;
  }
  .comparison-handle {
    width: 40px;
    height: 40px;
  }
  .comparison-arrow {
    font-size: 1rem;
  }
  .comparison-label {
    top: 1rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  .comparison-label-before {
    left: 1rem;
  }
  .comparison-label-after {
    right: 1rem;
  }
  .comparison-credits {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .comparison-credit-before,
  .comparison-credit-after {
    text-align: left;
  }
  /* Tabs Mobile */
  .telar-widget-tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .telar-widget-tabs .nav-link {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .telar-widget-tabs .tab-pane-content {
    padding: 1.25rem;
    font-size: 0.95rem;
  }
  /* Accordion Mobile */
  .telar-widget-accordion .accordion-button {
    font-size: 1rem;
    padding: 1rem;
  }
  .telar-widget-accordion .accordion-body {
    padding: 1rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  /* Extra small screens */
  .telar-widget-carousel .carousel-item img {
    max-height: 300px;
  }
  .comparison-slider {
    aspect-ratio: 1/1;
  }
  .telar-widget-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}

/*# sourceMappingURL=telar.css.map */