/* ============================================================================
   AliothPress Page Builder — Public Block Styles
   
   These styles render builder blocks on the public site.
   All colors/fonts come from CSS custom properties defined in themes.
   This file does NOT style the builder UI — only the rendered output.
   
   BUTTONS: Base .ap-btn is defined in components.css (design system).
   This file only adds builder-specific button layout (alignment in blocks).
   ============================================================================ */


/* ============================================================================
   BLOCK WRAPPER — Common spacing & alignment
   ============================================================================ */

/* Page template width — sections inherit this for their default content width */
body {
  overflow-x: hidden;
}

.ap-page--default,
.ap-page--landing-narrow,
.ap-page--sidebar {
  --ap-page-content-width: var(--ap-container-narrow);
}

.ap-page--full-width,
.ap-page--landing {
  --ap-page-content-width: var(--ap-container-max);
}

.ap-block {
  position: relative;
  width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Block alignment — positions the block via flexbox, does NOT affect inner text */
.ap-block--align-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ap-block--align-right  { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ap-block--align-left   { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

/* Content alignment — text flow inside the block, independent from position */
.ap-block--content-left   { text-align: left; }
.ap-block--content-center { text-align: center; }
.ap-block--content-right  { text-align: right; }
.ap-block--content-justify { text-align: justify; }

/* Padding utilities */
.ap-p-sm  { padding: var(--ap-space-2); }
.ap-p-md  { padding: var(--ap-space-4); }
.ap-p-lg  { padding: var(--ap-space-8); }
.ap-p-xl  { padding: var(--ap-space-16); }

/* Visibility */
@media (max-width: 768px) {
  .ap-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .ap-hide-desktop { display: none !important; }
}

/* Default block spacing when no explicit margin set */
.ap-block + .ap-block {
  margin-top: var(--ap-space-6);
}

/* Margin utilities — after default spacing so they override it */
.ap-block.ap-mt-sm  { margin-top: var(--ap-space-2); }
.ap-block.ap-mt-md  { margin-top: var(--ap-space-4); }
.ap-block.ap-mt-lg  { margin-top: var(--ap-space-8); }
.ap-block.ap-mt-xl  { margin-top: var(--ap-space-16); }

.ap-block.ap-mb-sm  { margin-bottom: var(--ap-space-2); }
.ap-block.ap-mb-md  { margin-bottom: var(--ap-space-4); }
.ap-block.ap-mb-lg  { margin-bottom: var(--ap-space-8); }
.ap-block.ap-mb-xl  { margin-bottom: var(--ap-space-16); }


/* ============================================================================
   HEADING
   ============================================================================ */

.ap-block--heading h1,
.ap-block--heading h2,
.ap-block--heading h3,
.ap-block--heading h4,
.ap-block--heading h5,
.ap-block--heading h6 {
  font-family: var(--ap-font-heading);
  color: var(--ap-color-text);
  line-height: var(--ap-leading-tight);
  margin: 0;
  width: 100%;
}


/* ============================================================================
   TEXT (Rich Text / Prose)
   ============================================================================ */

.ap-block--text .ap-prose {
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-lg);
  line-height: var(--ap-leading-relaxed);
  color: var(--ap-color-text);
  width: 100%;
}

.ap-block--text .ap-prose p {
  margin-bottom: 1em;
}

.ap-block--text .ap-prose p:last-child {
  margin-bottom: 0;
}

.ap-block--text .ap-prose a {
  color: var(--ap-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--ap-transition-fast);
}

.ap-block--text .ap-prose a:hover {
  color: var(--ap-color-link-hover);
}


/* ============================================================================
   IMAGE
   ============================================================================ */

.ap-block--image {
  line-height: 0;  /* Remove gap below inline img */
}

/* The figure is the size-capped box. Its width is set by the size preset
   below; the block wrapper's .ap-block--align-* flex handles left/center/
   right positioning for ALL alignments (not just center). */
figure.ap-block-image {
  margin: 0;
  max-width: 100%;
}

.ap-block-image picture {
  display: block;
  width: 100%;
}

.ap-block-image img {
  width: 100%;       /* fill the size-capped figure */
  height: auto;
  border-radius: var(--ap-radius-lg);
  display: block;
  margin: 0;
}

/* Size presets map to the media library's generated variant widths
   (config IMAGE_VARIANT_WIDTHS = 400 / 800 / 1200 / 1920):
     small  -> 400w,  medium -> 800w,  full -> content width (up to 1200).
   --ap-img-native is the original pixel width, injected inline by the
   renderer so an image is never upscaled past its real size. When unknown
   (e.g. an image with no generated variants) the fallback keeps the old
   behaviour. max-width:100% on the figure keeps everything responsive. */
.ap-block-image--small  { width: min(400px, var(--ap-img-native, 400px)); }
.ap-block-image--medium { width: min(800px, var(--ap-img-native, 800px)); }
.ap-block-image--full   { width: min(100%,  var(--ap-img-native, 9999px)); }

.ap-block-image figcaption {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  text-align: center;
  margin-top: var(--ap-space-3);
  line-height: var(--ap-leading-normal);
}


/* ============================================================================
   BUTTON — Layout only (base styles in components.css)
   ============================================================================ */

.ap-block--button {
  display: flex;
}

.ap-block--align-center.ap-block--button { justify-content: center; }
.ap-block--align-right.ap-block--button  { justify-content: flex-end; }

/* Builder buttons get a subtle lift on hover for interactive feel */
.ap-block--button .ap-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ap-shadow-md);
}

/* Mobile: compact all buttons equally */
@media (max-width: 768px) {
  .ap-btn--sm { padding: var(--ap-space-1) var(--ap-space-3); font-size: var(--ap-text-xs); }
  .ap-btn--md { padding: var(--ap-space-2) var(--ap-space-4); font-size: var(--ap-text-sm); }
  .ap-btn--lg { padding: var(--ap-space-2) var(--ap-space-5); font-size: var(--ap-text-base); }
}


/* ============================================================================
   DIVIDER
   ============================================================================ */

hr.ap-block-divider {
  border: none;
  border-top: var(--ap-border-width) solid var(--ap-color-border);
  margin: 0;
  width: 100%;
}

hr.ap-block-divider--dashed  { border-top-style: dashed; }
hr.ap-block-divider--dotted  { border-top-style: dotted; }
hr.ap-block-divider--gradient {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ap-color-primary), transparent);
}


/* ============================================================================
   SPACER
   ============================================================================ */

.ap-block-spacer {
  width: 100%;
}


/* ============================================================================
   COLUMNS — Responsive grid
   ============================================================================ */

.ap-columns {
  display: grid;
  gap: var(--ap-space-6);
  align-items: start;
  width: 100%;
}

.ap-cols--1     { grid-template-columns: 1fr; }
.ap-cols--2     { grid-template-columns: 1fr 1fr; }
.ap-cols--3     { grid-template-columns: 1fr 1fr 1fr; }
.ap-cols--4     { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ap-cols--2-1   { grid-template-columns: 2fr 1fr; }
.ap-cols--1-2   { grid-template-columns: 1fr 2fr; }

.ap-column {
  min-width: 0;  /* Prevent content from blowing out grid */
  overflow-wrap: break-word;
  word-break: normal;
}

/* Text and heading content stretches to full column width */
.ap-column .ap-prose,
.ap-column .ap-block--heading > * {
  width: 100%;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .ap-columns {
    grid-template-columns: 1fr !important;
  }
}

/* 4 columns → 2 on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .ap-cols--4 {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================================================
   SECTION — Full-width with background
   
   How full-width works across templates:
     .ap-page--default:    content is in 768px container inside 1200px .ap-container
     .ap-page--full-width: content is in 1200px container
     .ap-page--landing:    content already breaks out to 100vw
   
   .ap-section--full uses the calc(-50vw + 50%) trick to break out of any
   parent container to achieve true edge-to-edge backgrounds. The inner
   content (.ap-section__inner) stays constrained for readability.
   ============================================================================ */

.ap-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ap-radius-lg);
  background: var(--ap-section-bg, var(--ap-footer-bg));
}

/* Section blocks control their own layout — disable flex positioning from wrapper */
.ap-block--section {
  display: block;
}

/* Dark mode: dark bg if set, else theme footer. Independent from light —
   never falls back through --ap-section-bg, to avoid the light background
   bleeding into dark mode when the user configured only light. */
:root:not(.light-theme) .ap-section {
  background: var(--ap-section-bg-dark, var(--ap-footer-bg));
}

@supports (background-image: image-set(url(x) type("image/avif"))) {
  .light-theme .ap-section--has-image-bg-set {
    background-image: var(--ap-section-bg-set);
  }
  :root:not(.light-theme) .ap-section--has-image-bg-dark-set {
    background-image: var(--ap-section-bg-dark-set);
  }
}

/* Dark mode overlay (hidden in light mode) */
.light-theme .ap-section__overlay--dark { display: none; }
:root:not(.light-theme) .ap-section__overlay--light { display: none; }

/* Full width: break out of parent container to span full viewport */
.ap-section--full {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}

/* Padding options */
.ap-section--pad-sm  { padding: var(--ap-space-8) 0; }
.ap-section--pad-md  { padding: var(--ap-space-12) 0; }
.ap-section--pad-lg  { padding: var(--ap-space-24) 0; }
.ap-section--pad-xl  { padding: 140px 0; }

/* Overlay (for image/gradient backgrounds) */
.ap-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Inner container: constrains content for readability */
.ap-section__inner {
  position: relative;
  z-index: 2;
  max-width: var(--ap-page-content-width, var(--ap-container-max));
  margin: 0 auto;
  padding: var(--ap-space-4) clamp(var(--ap-space-6), 8vw, var(--ap-space-20));
}

.ap-section--full .ap-section__inner {
  padding-inline: var(--ap-container-pad);
}

/* Content width variants — controlled from builder panel */
.ap-section--content-narrow .ap-section__inner {
  max-width: var(--ap-container-narrow, 768px);
}

.ap-section--content-wide .ap-section__inner {
  max-width: var(--ap-container-max, 1200px);
}

.ap-section--content-full .ap-section__inner {
  max-width: 100%;
}

/* Text color cascade: ensures all nested block text follows the choice.
   Doubled class selector (.ap-section.ap-section--text-*) for specificity (0,2,x)
   to always beat theme overrides like .light-theme h1 (0,1,1). */
.ap-section.ap-section--text-light {
  color: var(--ap-color-white);
}

.ap-section.ap-section--text-light h1,
.ap-section.ap-section--text-light h2,
.ap-section.ap-section--text-light h3,
.ap-section.ap-section--text-light h4,
.ap-section.ap-section--text-light h5,
.ap-section.ap-section--text-light h6 {
  color: var(--ap-color-white);
}

.ap-section.ap-section--text-light p,
.ap-section.ap-section--text-light li,
.ap-section.ap-section--text-light td,
.ap-section.ap-section--text-light th,
.ap-section.ap-section--text-light blockquote,
.ap-section.ap-section--text-light cite,
.ap-section.ap-section--text-light .ap-prose {
  color: var(--ap-color-white);
}

.ap-section.ap-section--text-light .ap-block-quote cite,
.ap-section.ap-section--text-light .ap-form__label {
  color: var(--ap-color-white);
}

.ap-section.ap-section--text-light a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit) {
  color: var(--ap-color-link);
}

.ap-section.ap-section--text-light a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit):hover {
  color: var(--ap-color-link-hover);
}

.ap-section.ap-section--text-dark {
  color: var(--ap-color-black);
}

.ap-section.ap-section--text-dark h1,
.ap-section.ap-section--text-dark h2,
.ap-section.ap-section--text-dark h3,
.ap-section.ap-section--text-dark h4,
.ap-section.ap-section--text-dark h5,
.ap-section.ap-section--text-dark h6 {
  color: var(--ap-color-black);
}

.ap-section.ap-section--text-dark p,
.ap-section.ap-section--text-dark li,
.ap-section.ap-section--text-dark td,
.ap-section.ap-section--text-dark th,
.ap-section.ap-section--text-dark blockquote,
.ap-section.ap-section--text-dark cite,
.ap-section.ap-section--text-dark .ap-prose {
  color: var(--ap-color-black);
}

.ap-section.ap-section--text-dark a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit) {
  color: var(--ap-color-link);
}

/* Responsive */
@media (max-width: 768px) {
  .ap-section--pad-lg  { padding: var(--ap-space-12) 0; }
  .ap-section--pad-xl  { padding: var(--ap-space-20) 0; }
}


/* ============================================================================
   VIDEO — Responsive embed
   ============================================================================ */

.ap-block-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ap-radius-lg);
}

.ap-aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.ap-aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.ap-aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.ap-block-video iframe,
.ap-block-video video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.ap-block-video video {
  position: relative;
  height: auto;
}

.ap-block-video__facade {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--ap-color-surface-alt, #111);
  cursor: pointer;
  overflow: hidden;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}

.ap-block-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ap-transition-slow);
}

.ap-block-video__facade:hover .ap-block-video__thumb {
  transform: scale(1.03);
}

.ap-block-video__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ap-block-video__play-icon svg {
  width: 64px;
  height: 64px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--ap-radius-full);
  padding: 16px;
  transition: transform var(--ap-transition-fast), background var(--ap-transition-fast);
}

.ap-block-video__facade:hover .ap-block-video__play-icon svg {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.65);
}

.ap-block-video__facade:focus-visible {
  outline: 3px solid var(--ap-color-primary);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .ap-block-video__play-icon svg {
    width: 52px;
    height: 52px;
    padding: 12px;
  }
}


/* ============================================================================
   GALLERY — Grid with optional lightbox
   ============================================================================ */

.ap-gallery {
  display: grid;
  gap: var(--ap-space-2);
  width: 100%;
}

.ap-gallery--gap-sm  { gap: var(--ap-space-1); }
.ap-gallery--gap-md  { gap: var(--ap-space-2); }
.ap-gallery--gap-lg  { gap: var(--ap-space-4); }

.ap-gallery--cols-1 { grid-template-columns: 1fr; }
.ap-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ap-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ap-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

.ap-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ap-radius-md);
  line-height: 0;
}

.ap-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ap-transition-slow);
}

.ap-gallery__item:hover img {
  transform: scale(1.03);
}

.ap-gallery__item figcaption {
  font-size: var(--ap-text-xs);
  color: var(--ap-color-text-muted);
  text-align: center;
  padding: var(--ap-space-1) var(--ap-space-2);
  line-height: var(--ap-leading-normal);
}

.ap-gallery__item a {
  display: block;
  cursor: zoom-in;
}

@media (max-width: 768px) {
  .ap-gallery--cols-3,
  .ap-gallery--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================================
   VIDEO GALLERY — Grid of facade thumbnails with lightbox player
   ============================================================================ */

.ap-video-gallery {
  display: grid;
  gap: var(--ap-space-2);
  width: 100%;         /* prevent shrinking inside flex-aligned .ap-block */
}

.ap-video-gallery--gap-sm  { gap: var(--ap-space-1); }
.ap-video-gallery--gap-md  { gap: var(--ap-space-2); }
.ap-video-gallery--gap-lg  { gap: var(--ap-space-4); }

.ap-video-gallery--cols-1 { grid-template-columns: 1fr; }
.ap-video-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ap-video-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }

.ap-video-gallery__item {
  margin: 0;
  cursor: pointer;
}

.ap-video-gallery__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ap-radius-lg);
  background: var(--ap-color-surface-alt, #111);
  line-height: 0;
}

.ap-video-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ap-transition-slow);
}

.ap-video-gallery__item:hover .ap-video-gallery__thumb img {
  transform: scale(1.03);
}

.ap-video-gallery__vimeo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
  color: rgba(255, 255, 255, 0.25);
}

.ap-video-gallery__vimeo-placeholder svg {
  width: 48px;
  height: 48px;
}

.ap-video-gallery__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.ap-video-gallery__play svg {
  width: 56px;
  height: 56px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--ap-radius-full);
  padding: 14px;
  transition: transform var(--ap-transition-fast), background var(--ap-transition-fast);
}

.ap-video-gallery__item:hover .ap-video-gallery__play svg {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.65);
}

.ap-video-gallery__item figcaption {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-muted);
  padding: var(--ap-space-1) 0;
  line-height: var(--ap-leading-normal);
}

@media (max-width: 768px) {
  .ap-video-gallery--cols-2,
  .ap-video-gallery--cols-3 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   TABLE — Responsive data table
   ============================================================================ */

.ap-block--table {
  display: block;
}

.ap-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ap-radius-md);
}

table.ap-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-sm);
  margin: 0;
}

.ap-table th,
.ap-table td {
  padding: var(--ap-space-3) var(--ap-space-4);
  text-align: left;
  border-bottom: var(--ap-border-width) solid var(--ap-color-border);
  overflow-wrap: break-word;
  word-break: normal;
}

.ap-table th {
  font-weight: var(--ap-font-weight-normal);
  font-size: var(--ap-text-base);
  background: var(--ap-color-surface-alt);
  color: var(--ap-color-text);
  white-space: nowrap;
}

.ap-table--striped tbody tr:nth-child(even) {
  background: var(--ap-color-surface);
}

.ap-table tbody tr:hover {
  background: var(--ap-color-primary-subtle);
}

table.ap-table--auto {
  width: auto;
  margin: 0 auto;
}

.ap-block--align-left table.ap-table--auto {
  margin-left: 0;
  margin-right: auto;
}

.ap-block--align-right table.ap-table--auto {
  margin-left: auto;
  margin-right: 0;
}

.ap-block--content-center .ap-table th,
.ap-block--content-center .ap-table td { text-align: center; }
.ap-block--content-right .ap-table th,
.ap-block--content-right .ap-table td { text-align: right; }
.ap-block--content-justify .ap-table th,
.ap-block--content-justify .ap-table td { text-align: justify; }

@media (max-width: 768px) {
  .ap-table th,
  .ap-table td {
    padding: var(--ap-space-2) var(--ap-space-3);
  }
  table.ap-table {
    font-size: var(--ap-text-xs);
  }
  .ap-table th {
    font-size: var(--ap-text-sm);
    white-space: normal;
  }
}


/* ============================================================================
   ACCORDION — Expandable sections (HTML <details>)
   ============================================================================ */

.ap-accordion {
  width: 100%;
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-lg);
  overflow: hidden;
}

.ap-accordion__item {
  border-bottom: var(--ap-border-width) solid var(--ap-color-border);
}

.ap-accordion__item:last-child {
  border-bottom: none;
}

.ap-accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ap-space-4) var(--ap-space-5);
  font-family: var(--ap-font-body);
  font-weight: var(--ap-font-weight-semibold);
  font-size: var(--ap-text-base);
  cursor: pointer;
  color: var(--ap-color-text);
  background: var(--ap-color-surface);
  transition: background var(--ap-transition-fast);
  list-style: none;  /* Hide default marker */
}

.ap-accordion__title::-webkit-details-marker {
  display: none;
}

.ap-accordion__title::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ap-color-text-muted);
  border-bottom: 2px solid var(--ap-color-text-muted);
  transform: rotate(45deg);
  transition: transform var(--ap-transition-fast);
  flex-shrink: 0;
  margin-left: var(--ap-space-3);
}

.ap-accordion__item[open] .ap-accordion__title::after {
  transform: rotate(-135deg);
}

.ap-accordion__title:hover {
  background: var(--ap-color-primary-subtle);
}

.ap-accordion__content {
  padding: var(--ap-space-4) var(--ap-space-5);
}


/* ============================================================================
   TABS
   ============================================================================ */

.ap-tabs {
  width: 100%;
}

.ap-tabs__nav {
  display: flex;
  border-bottom: 2px solid var(--ap-color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ap-tabs__btn {
  padding: var(--ap-space-3) var(--ap-space-5);
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-sm);
  font-weight: var(--ap-font-weight-semibold);
  color: var(--ap-color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ap-transition-fast), border-color var(--ap-transition-fast);
}

.ap-tabs__btn:hover {
  color: var(--ap-color-text);
}

.ap-tabs__btn.is-active {
  color: var(--ap-color-primary);
  border-bottom-color: var(--ap-color-primary);
}

.ap-tabs__panel {
  padding: var(--ap-space-5) 0;
}


/* ============================================================================
   AUDIO
   ============================================================================ */

.ap-block-audio {
  width: 100%;
}

.ap-block-audio audio {
  width: 100%;
  border-radius: var(--ap-radius-md);
}

.ap-audio__title {
  font-family: var(--ap-font-body);
  font-weight: var(--ap-font-weight-semibold);
  margin-bottom: var(--ap-space-2);
  color: var(--ap-color-text);
}


/* ============================================================================
   QUOTE / BLOCKQUOTE
   ============================================================================ */

blockquote.ap-block-quote {
  width: 100%;
  border-left: 4px solid var(--ap-color-primary);
  padding: var(--ap-space-5) var(--ap-space-6);
  margin: 0;
  background: var(--ap-color-primary-subtle);
  border-radius: 0 var(--ap-radius-md) var(--ap-radius-md) 0;
}

blockquote.ap-block-quote p {
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-lg);
  line-height: var(--ap-leading-relaxed);
  font-style: italic;
  color: var(--ap-color-text);
  margin: 0;
}

blockquote.ap-block-quote cite {
  display: block;
  margin-top: var(--ap-space-3);
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-sm);
  font-style: normal;
  color: var(--ap-color-text-secondary);
}


/* ============================================================================
   CODE BLOCK
   ============================================================================ */

pre.ap-code-block {
  width: 100%;
  background: var(--ap-color-surface);
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-md);
  padding: var(--ap-space-5);
  overflow-x: auto;
  font-size: var(--ap-text-sm);
  line-height: var(--ap-leading-normal);
  margin: 0;
}

pre.ap-code-block code {
  font-family: var(--ap-font-mono);
  color: var(--ap-color-text);
  background: none;
  padding: 0;
}

pre.ap-code-block[data-language]::before {
  content: attr(data-language);
  display: inline-block;
  float: right;
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-xs);
  color: var(--ap-color-text-muted);
  background: var(--ap-color-bg);
  border: var(--ap-border-width) solid var(--ap-color-border);
  padding: 1px 8px;
  border-radius: var(--ap-radius-sm);
  margin: -4px -4px 0 8px;
  text-transform: lowercase;
}

pre.ap-code-block .token.comment,
pre.ap-code-block .token.prolog,
pre.ap-code-block .token.doctype,
pre.ap-code-block .token.cdata {
  color: var(--ap-color-text-muted);
  font-style: italic;
}

pre.ap-code-block .token.punctuation {
  color: var(--ap-color-text-secondary);
}

pre.ap-code-block .token.property,
pre.ap-code-block .token.tag,
pre.ap-code-block .token.boolean,
pre.ap-code-block .token.constant,
pre.ap-code-block .token.symbol,
pre.ap-code-block .token.deleted {
  color: var(--ap-color-error);
}

pre.ap-code-block .token.selector,
pre.ap-code-block .token.string,
pre.ap-code-block .token.char,
pre.ap-code-block .token.builtin,
pre.ap-code-block .token.inserted,
pre.ap-code-block .token.attr-value {
  color: var(--ap-color-success);
}

pre.ap-code-block .token.operator,
pre.ap-code-block .token.entity,
pre.ap-code-block .token.url {
  color: var(--ap-color-info);
}

pre.ap-code-block .token.atrule,
pre.ap-code-block .token.keyword {
  color: var(--ap-color-accent);
}

pre.ap-code-block .token.function,
pre.ap-code-block .token.class-name {
  color: var(--ap-color-primary);
}

pre.ap-code-block .token.number {
  color: var(--ap-color-warning);
}

pre.ap-code-block .token.attr-name {
  color: var(--ap-color-warning);
}

pre.ap-code-block .token.regex,
pre.ap-code-block .token.important,
pre.ap-code-block .token.variable {
  color: var(--ap-color-info);
}


/* ============================================================================
   FORM — Public form block (contact, survey, subscription, custom)
   ============================================================================ */

.ap-form {
  background: var(--ap-color-surface);
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-lg);
  padding: var(--ap-space-8);
  max-width: 720px;
  overflow-wrap: break-word;
  word-break: normal;
}

.ap-form__title {
  font-family: var(--ap-font-heading);
  font-size: var(--ap-text-xl);
  font-weight: var(--ap-font-weight-bold);
  color: var(--ap-color-text);
  margin: 0 0 var(--ap-space-1);
  line-height: var(--ap-leading-tight);
}

.ap-form__desc {
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-secondary);
  margin: 0 0 var(--ap-space-6);
  line-height: var(--ap-leading-normal);
}

.ap-form__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-4);
  position: relative;
}

/* Field wrapper */
.ap-form__field {
  min-width: 0;
}
.ap-form__field--full { width: 100%; flex-basis: 100%; }
.ap-form__field--half { width: calc(50% - var(--ap-space-2)); flex-basis: calc(50% - var(--ap-space-2)); }

@media (max-width: 600px) {
  .ap-form__field--half { width: 100%; flex-basis: 100%; }
}

/* Labels */
.ap-form__label {
  display: block;
  font-size: var(--ap-text-sm);
  font-weight: var(--ap-font-weight-semibold);
  color: var(--ap-color-text);
  margin-bottom: var(--ap-space-1);
  line-height: var(--ap-leading-normal);
}

.ap-form__req {
  color: var(--ap-color-primary);
  margin-left: 2px;
}

/* Inputs, textareas, selects */
.ap-form__input,
.ap-form__textarea,
.ap-form__select {
  width: 100%;
  padding: var(--ap-space-2) var(--ap-space-3);
  font-size: var(--ap-text-sm);
  font-family: var(--ap-font-body);
  color: var(--ap-color-text);
  background: var(--ap-color-bg);
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-md);
  transition: border-color var(--ap-transition-fast), box-shadow var(--ap-transition-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.ap-form__input:focus,
.ap-form__textarea:focus,
.ap-form__select:focus {
  border-color: var(--ap-color-primary);
  box-shadow: 0 0 0 3px var(--ap-color-primary-subtle);
}

.ap-form__input::placeholder,
.ap-form__textarea::placeholder {
  color: var(--ap-color-text-muted);
}

.ap-form__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: var(--ap-leading-normal);
}

.ap-form__select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ap-space-3) center;
  padding-right: var(--ap-space-8);
}

/* Help text below fields */
.ap-form__help {
  font-size: var(--ap-text-xs);
  color: var(--ap-color-text-muted);
  margin-top: var(--ap-space-1);
  line-height: var(--ap-leading-normal);
}

/* Radio & Checkbox groups */
.ap-form__options {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-2);
}

.ap-form__radio,
.ap-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--ap-space-2);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text);
  cursor: pointer;
  line-height: var(--ap-leading-normal);
}

.ap-form__radio input,
.ap-form__checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--ap-color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Consent / GDPR checkbox */
.ap-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ap-space-3);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-secondary);
  cursor: pointer;
  line-height: var(--ap-leading-normal);
}

.ap-form__consent input {
  width: 18px;
  height: 18px;
  accent-color: var(--ap-color-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Star rating */
.ap-form__rating {
  display: flex;
  gap: var(--ap-space-1);
  align-items: center;
}

.ap-form__star {
  display: inline-block;
  background: none;
  border: none;
  font-size: var(--ap-text-3xl);
  color: var(--ap-color-border);
  cursor: pointer;
  padding: 2px;
  transition: color var(--ap-transition-fast), transform var(--ap-transition-fast);
  line-height: 1;
  user-select: none;
}

/* The radio inside each star label is visually hidden but keeps keyboard
   focus and stays in the accessibility tree (never display:none). */
.ap-form__star input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Keyboard focus ring on the star glyph; mouse clicks stay ring-free
   thanks to :focus-visible. */
.ap-form__star:has(input:focus-visible) {
  outline: 2px solid var(--ap-color-primary);
  outline-offset: 2px;
  border-radius: var(--ap-radius-sm, 6px);
}

.ap-form__star:hover,
.ap-form__star.is-hover {
  color: var(--ap-color-primary);
  transform: scale(1.15);
}

.ap-form__star.is-active {
  color: var(--ap-color-primary);
}

/* Submit button — color & sizing via .ap-btn.ap-btn--primary; form-specific overrides only */
.ap-form__submit {
  border: none;
}

.ap-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Success / Error messages */
.ap-form__message {
  width: 100%;
  padding: var(--ap-space-3) var(--ap-space-4);
  border-radius: var(--ap-radius-md);
  font-size: var(--ap-text-sm);
  line-height: var(--ap-leading-normal);
  margin-top: var(--ap-space-2);
}

.ap-form__message--success {
  background: var(--ap-color-success-subtle, rgba(52, 211, 153, 0.1));
  color: var(--ap-color-success);
  border: var(--ap-border-width) solid var(--ap-color-success);
}

.ap-form__message--error {
  background: var(--ap-color-error-subtle, rgba(239, 68, 68, 0.1));
  color: var(--ap-color-error);
  border: var(--ap-border-width) solid var(--ap-color-error);
}

/* Empty form placeholder (no form selected in builder) */
.ap-block-form--empty {
  padding: var(--ap-space-10) var(--ap-space-5);
  text-align: center;
  color: var(--ap-color-text-muted);
  border: 2px dashed var(--ap-color-border);
  border-radius: var(--ap-radius-lg);
  font-size: var(--ap-text-sm);
}

/* Form block alignment: .ap-form is block-level, needs explicit centering */
.ap-block--align-center .ap-form {
  margin-left: auto;
  margin-right: auto;
}

.ap-block--align-right .ap-form {
  margin-left: auto;
  margin-right: 0;
}

/* Constrain form max-width for readability when inside wide/full containers */
.ap-block--align-center .ap-form,
.ap-block--align-left .ap-form {
  max-width: 720px;
}

/* Anti-spam honeypot — invisible to humans, bots fill it and get rejected */
.ap-form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* Responsive */
@media (max-width: 600px) {
  .ap-form {
    padding: var(--ap-space-5) var(--ap-space-4);
  }
  .ap-form__title { font-size: var(--ap-text-lg); }
  .ap-form__star { font-size: var(--ap-text-2xl); }
}


/* ============================================================================
   SLIDESHOW / CAROUSEL
   
   Two modes:
     .ap-slideshow--image  → simple image carousel
     .ap-slideshow--hero   → full-screen slides with text overlay
   
   Two animations: slide (transform) and fade (opacity)
   JS handles transitions via data-animation attribute.
   ============================================================================ */

.ap-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ap-radius-lg);
}

/* Aspect ratio variants */
.ap-slideshow--aspect-16-9  { aspect-ratio: 16 / 9; }
.ap-slideshow--aspect-4-3   { aspect-ratio: 4 / 3; }
.ap-slideshow--aspect-21-9  { aspect-ratio: 21 / 9; }
.ap-slideshow--aspect-1-1   { aspect-ratio: 1 / 1; }

/* Hero mode: content determines height, image covers background.
   Border-radius preserved — only .ap-slideshow--full removes it. */
.ap-slideshow--hero {
  aspect-ratio: auto !important;
}

/* Hero: track sizes to content, not parent */
.ap-slideshow--hero .ap-slideshow__track {
  height: auto;
}

.ap-slideshow--hero .ap-slideshow__slide {
  min-height: 300px;
}

.ap-slideshow--hero .ap-slideshow__slide.is-active {
  position: relative;
}

.ap-slideshow--hero .ap-slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-slideshow--hero .ap-slideshow__content {
  position: relative;
  inset: auto;
  justify-content: flex-start;
}

/* Padding options — on outer element for image mode */
.ap-slideshow--pad-sm  { padding: var(--ap-space-8) 0; }
.ap-slideshow--pad-md  { padding: var(--ap-space-12) 0; }
.ap-slideshow--pad-lg  { padding: var(--ap-space-24) 0; }
.ap-slideshow--pad-xl  { padding: 140px 0; }

/* Hero mode: padding on SLIDE (not outer, not content).
   The slide is the structural equivalent of <section>:
   background image covers it via absolute positioning,
   content flows within the padded area — exactly like section. */
.ap-slideshow--hero.ap-slideshow--pad-sm,
.ap-slideshow--hero.ap-slideshow--pad-md,
.ap-slideshow--hero.ap-slideshow--pad-lg,
.ap-slideshow--hero.ap-slideshow--pad-xl { padding: 0; }

.ap-slideshow--hero.ap-slideshow--pad-sm .ap-slideshow__slide.is-active { padding: var(--ap-space-8) 0; }
.ap-slideshow--hero.ap-slideshow--pad-md .ap-slideshow__slide.is-active { padding: var(--ap-space-12) 0; }
.ap-slideshow--hero.ap-slideshow--pad-lg .ap-slideshow__slide.is-active { padding: var(--ap-space-24) 0; }
.ap-slideshow--hero.ap-slideshow--pad-xl .ap-slideshow__slide.is-active { padding: 140px 0; }

/* Full width: break out of parent container (same as section) */
.ap-slideshow--full {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}

/* Text color cascade — same rules as section.
   Doubled selector for specificity to beat theme overrides. */
.ap-slideshow.ap-slideshow--text-light {
  color: var(--ap-color-white);
}

.ap-slideshow.ap-slideshow--text-light h1,
.ap-slideshow.ap-slideshow--text-light h2,
.ap-slideshow.ap-slideshow--text-light h3,
.ap-slideshow.ap-slideshow--text-light h4,
.ap-slideshow.ap-slideshow--text-light h5,
.ap-slideshow.ap-slideshow--text-light h6 {
  color: var(--ap-color-white);
}

.ap-slideshow.ap-slideshow--text-light p,
.ap-slideshow.ap-slideshow--text-light li,
.ap-slideshow.ap-slideshow--text-light td,
.ap-slideshow.ap-slideshow--text-light th,
.ap-slideshow.ap-slideshow--text-light blockquote,
.ap-slideshow.ap-slideshow--text-light cite,
.ap-slideshow.ap-slideshow--text-light .ap-prose {
  color: var(--ap-color-white);
}

.ap-slideshow.ap-slideshow--text-light .ap-block-quote cite,
.ap-slideshow.ap-slideshow--text-light .ap-form__label {
  color: var(--ap-color-white);
}

.ap-slideshow.ap-slideshow--text-light a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit) {
  color: var(--ap-color-link);
}

.ap-slideshow.ap-slideshow--text-light a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit):hover {
  color: var(--ap-color-link-hover);
}

.ap-slideshow.ap-slideshow--text-dark {
  color: var(--ap-color-black);
}

.ap-slideshow.ap-slideshow--text-dark h1,
.ap-slideshow.ap-slideshow--text-dark h2,
.ap-slideshow.ap-slideshow--text-dark h3,
.ap-slideshow.ap-slideshow--text-dark h4,
.ap-slideshow.ap-slideshow--text-dark h5,
.ap-slideshow.ap-slideshow--text-dark h6 {
  color: var(--ap-color-black);
}

.ap-slideshow.ap-slideshow--text-dark p,
.ap-slideshow.ap-slideshow--text-dark li,
.ap-slideshow.ap-slideshow--text-dark td,
.ap-slideshow.ap-slideshow--text-dark th,
.ap-slideshow.ap-slideshow--text-dark blockquote,
.ap-slideshow.ap-slideshow--text-dark cite,
.ap-slideshow.ap-slideshow--text-dark .ap-prose {
  color: var(--ap-color-black);
}

.ap-slideshow.ap-slideshow--text-dark a:not(.ap-btn):not(.ap-slideshow__btn):not(.ap-form__submit) {
  color: var(--ap-color-link);
}

/* Content width variants */
.ap-slideshow--content-narrow .ap-slideshow__inner {
  max-width: var(--ap-container-narrow, 768px);
}

.ap-slideshow--content-wide .ap-slideshow__inner {
  max-width: var(--ap-container-max, 1200px);
}

.ap-slideshow--content-full .ap-slideshow__inner {
  max-width: 100%;
}

/* Inner container: constrains content width to match section */
.ap-slideshow__inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--ap-space-4) clamp(var(--ap-space-6), 8vw, var(--ap-space-20));
}

/* Track: holds all slides */
.ap-slideshow__track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual slide */
.ap-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 1;
}

.ap-slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
}

/* Slide animation: slides move left/right */
[data-animation="slide"] .ap-slideshow__slide {
  transform: translateX(60px);
}

[data-animation="slide"] .ap-slideshow__slide.is-active {
  transform: translateX(0);
}

[data-animation="slide"] .ap-slideshow__slide.is-exiting-left {
  transform: translateX(-60px);
  opacity: 0;
}

[data-animation="slide"] .ap-slideshow__slide.is-exiting-right {
  transform: translateX(60px);
  opacity: 0;
}

/* Fade animation: crossfade */
[data-animation="fade"] .ap-slideshow__slide {
  transform: none;
}

/* Slide image */
.ap-slideshow__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay for hero mode */
.ap-slideshow__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Hero content overlay — container for nested blocks on slide */
.ap-slideshow__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Allow nested blocks to receive clicks */
.ap-slideshow__content > * {
  pointer-events: auto;
}

/* Slideshow button — positioning only; color & sizing via .ap-btn.ap-btn--primary */
.ap-slideshow__btn {
  text-decoration: none;
}

/* Navigation arrows — glass style, adapts to text color setting */
.ap-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 128, 128, 0.12);
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: none;
  border-radius: var(--ap-radius-full);
  color: inherit;
  cursor: pointer;
  transition: background var(--ap-transition-fast), transform var(--ap-transition-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ap-slideshow__arrow:hover {
  background: rgba(128, 128, 128, 0.2);
  background: color-mix(in srgb, currentColor 20%, transparent);
  transform: translateY(-50%) scale(1.05);
}

.ap-slideshow__arrow svg {
  width: 16px;
  height: 16px;
}

.ap-slideshow__arrow--prev { left: var(--ap-space-4); }
.ap-slideshow__arrow--next { right: var(--ap-space-4); }

/* Dot indicators — minimal, no background container */
.ap-slideshow__dots {
  position: absolute;
  bottom: var(--ap-space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--ap-space-2);
  padding: 0;
  background: none;
}

.ap-slideshow__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ap-radius-full);
  border: none;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity var(--ap-transition-fast), transform var(--ap-transition-fast);
  padding: 0;
}

.ap-slideshow__dot:hover {
  opacity: 0.6;
}

.ap-slideshow__dot.is-active {
  opacity: 0.9;
  transform: scale(1.25);
}

/* Image mode: arrows already 36px, no override needed */

/* Responsive */
@media (max-width: 768px) {
  .ap-slideshow__arrow {
    width: 32px;
    height: 32px;
  }
  .ap-slideshow__arrow svg {
    width: 14px;
    height: 14px;
  }
  .ap-slideshow__arrow--prev { left: var(--ap-space-2); }
  .ap-slideshow__arrow--next { right: var(--ap-space-2); }
  .ap-slideshow__dots { bottom: var(--ap-space-3); }
  .ap-slideshow__dot { width: 6px; height: 6px; }
  .ap-slideshow--pad-lg { padding: var(--ap-space-12) 0; }
  .ap-slideshow--pad-xl { padding: var(--ap-space-20) 0; }
  .ap-slideshow--hero.ap-slideshow--pad-lg,
  .ap-slideshow--hero.ap-slideshow--pad-xl { padding: 0; }
  .ap-slideshow--hero.ap-slideshow--pad-lg .ap-slideshow__slide.is-active { padding: var(--ap-space-12) 0; }
  .ap-slideshow--hero.ap-slideshow--pad-xl .ap-slideshow__slide.is-active { padding: var(--ap-space-20) 0; }
}


/* ============================================================================
   LOGO TICKER — Horizontal scrolling logo/image strip
   ============================================================================ */

.ap-ticker {
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--ap-space-6) 0;
}

.ap-block--ticker {
  display: block;
}

.ap-ticker__track {
  display: flex;
  width: max-content;
  animation: ap-ticker-scroll var(--ap-ticker-speed, 30s) linear infinite;
}

.ap-ticker--pause:hover .ap-ticker__track {
  animation-play-state: paused;
}

.ap-ticker--reverse .ap-ticker__track {
  animation-direction: reverse;
}

.ap-ticker__slide {
  display: flex;
  align-items: center;
  gap: var(--ap-space-10);
  padding-right: var(--ap-space-10);
}

.ap-ticker__slide img {
  height: 80px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter var(--ap-transition-normal), opacity var(--ap-transition-normal);
}

.ap-ticker--sm .ap-ticker__slide img { height: 28px; }
.ap-ticker--md .ap-ticker__slide img { height: 90px; }
.ap-ticker--lg .ap-ticker__slide img { height: 200px; }
.ap-ticker--xl .ap-ticker__slide img { height: 320px; }

@media (max-width: 768px) {
  .ap-ticker--sm .ap-ticker__slide img { height: 24px; }
  .ap-ticker--md .ap-ticker__slide img { height: 56px; }
  .ap-ticker--lg .ap-ticker__slide img { height: 120px; }
  .ap-ticker--xl .ap-ticker__slide img { height: 200px; }
}

.ap-ticker--grayscale .ap-ticker__slide img {
  filter: grayscale(100%);
  opacity: 0.6;
}

.ap-ticker--grayscale .ap-ticker__slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes ap-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ap-ticker__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ap-space-6);
  }
  .ap-ticker__slide[aria-hidden="true"] {
    display: none;
  }
}


/* ============================================================================
   ANIMATIONS (optional, progressive enhancement)
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {
  [data-animation="fade-in"] {
    opacity: 0;
    animation: apFadeIn 0.9s ease-out forwards;
  }
  
  [data-animation="slide-up"] {
    opacity: 0;
    transform: translateY(36px);
    animation: apSlideUp 0.9s ease-out forwards;
  }
  
  @keyframes apFadeIn {
    to { opacity: 1; }
  }
  
  @keyframes apSlideUp {
    to { opacity: 1; transform: translateY(0); }
  }
}


/* ============================================================================
   LIGHTBOX — Minimal fullscreen image viewer for galleries
   ============================================================================ */

.ap-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ap-transition-normal);
}

.ap-lightbox.is-open {
  opacity: 1;
}

.ap-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--ap-color-bg); opacity: 0.95;
  cursor: pointer;
}

.ap-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ap-lightbox__content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--ap-radius-md);
}

.ap-lightbox__caption {
  color: var(--ap-color-text);
  font-size: var(--ap-text-sm);
  margin-top: var(--ap-space-3);
  text-align: center;
}

.ap-lightbox__close {
  position: absolute;
  top: var(--ap-space-4);
  right: var(--ap-space-4);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ap-color-border);
  background: var(--ap-color-surface-alt);
  color: var(--ap-color-text);
  font-size: var(--ap-text-2xl);
  border-radius: var(--ap-radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ap-transition-fast);
}

.ap-lightbox__close:hover {
  background: var(--ap-color-surface);
}

/* Lightbox — prev/next gallery navigation.
   Uses only theme variables so it adapts to any active theme
   in both light and dark mode (no hardcoded colors). */
.ap-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ap-color-border);
  background: var(--ap-color-surface-alt);
  color: var(--ap-color-text);
  border-radius: var(--ap-radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ap-transition-fast), color var(--ap-transition-fast);
}

.ap-lightbox__arrow:hover {
  background: var(--ap-color-surface);
  color: var(--ap-color-primary);
}

.ap-lightbox__arrow:focus-visible {
  outline: 2px solid var(--ap-color-primary);
  outline-offset: 2px;
}

.ap-lightbox__arrow--prev { left: var(--ap-space-4); }
.ap-lightbox__arrow--next { right: var(--ap-space-4); }

.ap-lightbox__arrow svg {
  display: block;
}

@media (max-width: 768px) {
  .ap-lightbox__arrow {
    width: 40px;
    height: 40px;
  }
  .ap-lightbox__arrow--prev { left: var(--ap-space-2); }
  .ap-lightbox__arrow--next { right: var(--ap-space-2); }
}

/* Lightbox — video iframe variant */
.ap-lightbox__content iframe {
  width: 90vw;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ap-radius-lg);
}

/* ============================================================================
   RTL SUPPORT — Arabic, Hebrew
   ============================================================================ */

/* Blockquote border flip */
[dir="rtl"] blockquote.ap-block-quote {
  border-left: none;
  border-right: 4px solid var(--ap-color-primary);
  border-radius: var(--ap-radius-md) 0 0 var(--ap-radius-md);
}

/* Accordion chevron */
[dir="rtl"] .ap-accordion__title::after {
  margin-left: 0;
  margin-right: var(--ap-space-3);
}

/* Slideshow arrows */
[dir="rtl"] .ap-slideshow__arrow--prev {
  left: auto;
  right: var(--ap-space-4);
}
[dir="rtl"] .ap-slideshow__arrow--next {
  right: auto;
  left: var(--ap-space-4);
}

@media (max-width: 640px) {
  [dir="rtl"] .ap-slideshow__arrow--prev {
    right: var(--ap-space-2);
  }
  [dir="rtl"] .ap-slideshow__arrow--next {
    left: var(--ap-space-2);
  }
}

/* Code block line numbers */
[dir="rtl"] .ap-block-code pre {
  text-align: left;
  direction: ltr;
}

/* Form select dropdown arrow */
[dir="rtl"] .ap-form__select {
  background-position: left var(--ap-space-3) center;
  padding-right: var(--ap-space-3);
  padding-left: var(--ap-space-8);
}

/* Content alignment utilities — keep actual direction */
[dir="rtl"] .ap-block--content-left   { text-align: right; }
[dir="rtl"] .ap-block--content-right  { text-align: left; }

/* Video gallery close button */
[dir="rtl"] .ap-vgal__close {
  right: auto;
  left: var(--ap-space-4);
}