/* Oh Post Slider - Frontend */
.ohps { position: relative; width: 100%; }
.ohps .ohps-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow: hidden; scroll-behavior: smooth; }
.ohps .ohps-slide { padding: var(--ohps-gutter, 16px); }
.ohps .ohps-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--ohps-card-bg); box-shadow: 0 6px 18px rgba(0,0,0,0.08); height: 100%; display: flex; flex-direction: column; }
.ohps .ohps-media { display: block; line-height: 0; position: relative; }
.ohps .ohps-media--link { text-decoration: none; }
.ohps .ohps-img, .ohps .ohps-placeholder { width: 100%; display: block; background: #e9ecef; }
.ohps .ohps-placeholder { display:flex; align-items:center; justify-content:center; color:#6c757d; font-size:14px; }
.ohps .ohps-caption-gradient { position:absolute; left:0; right:0; bottom:0; height:40%; background: var(--ohps-caption-gradient); }

.ohps .ohps-content { padding: 12px 16px 16px; color: var(--ohps-text); }
.ohps .ohps-title { margin: 0 0 8px; font-size: 18px; line-height: 1.3; 
        text-align: center;}
.ohps .ohps-title a {  color: #605413 !important; text-decoration: none; }
.ohps .ohps-title a:hover { text-decoration: underline; }
.ohps .ohps-meta { font-size: 12px; color: var(--ohps-meta); margin-bottom: 8px; }

.ohps-slide {
    height: 94%;
}

.ohps .ohps-excerpt { margin: 0 0 12px; color: var(--ohps-text); }
.ohps .ohps-button { display:inline-block; padding:8px 12px; border-radius: 999px; background: var(--ohps-btn-bg); color: var(--ohps-btn-text); text-decoration:none; }

/* Arrows & dots */
.ohps .ohps-prev, .ohps .ohps-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--ohps-arrow-bg); color: var(--ohps-text);
}
.ohps .ohps-prev { left: 8px; }
.ohps .ohps-next { right: 8px; }

.ohps .ohps-dots { position: absolute; left:0; right:0; bottom: 8px; display:flex; gap:6px; justify-content:center; }
.ohps .ohps-dots button { width:8px; height:8px; border-radius:50%; border:0; background: var(--ohps-dot); cursor:pointer; }
.ohps .ohps-dots button.is-active { background: var(--ohps-dot-active); }

/* Themes */
.ohps.ohps--theme-dark {
    --ohps-card-bg: #0f1115;
    --ohps-text: #f1f5f9;
    --ohps-meta: #cbd5e1;
    --ohps-btn-bg: #22c55e;
    --ohps-btn-text: #0b0f14;
    --ohps-arrow-bg: rgba(255,255,255,0.18);
    --ohps-dot: rgba(255,255,255,0.35);
    --ohps-dot-active: #22c55e;
    --ohps-caption-gradient: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
    --ohps-gutter: 16px;
}
.ohps.ohps--theme-light {
    --ohps-card-bg: #ffffff;
    --ohps-text: #0f172a;
    --ohps-meta: #475569;
    --ohps-btn-bg: #0ea5e9;
    --ohps-btn-text: #ffffff;
    --ohps-arrow-bg: rgba(0,0,0,0.08);
    --ohps-dot: rgba(0,0,0,0.25);
    --ohps-dot-active: #0ea5e9;
    --ohps-caption-gradient: linear-gradient(to top, rgba(255,255,255,0.85), rgba(255,255,255,0));
    --ohps-gutter: 16px;
}

/* Responsive columns */
.ohps .ohps-track { grid-auto-columns: 100%; }
@media (min-width: 640px) {
    .ohps .ohps-track { grid-auto-columns: calc(100% / var(--ohps-slides-sm, 1)); }
}
@media (min-width: 1024px) {
    .ohps .ohps-track { grid-auto-columns: calc(100% / var(--ohps-slides-lg, 2)); }
}
@media (min-width: 1280px) {
    .ohps .ohps-track { grid-auto-columns: calc(100% / var(--ohps-slides-xl, 3)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ohps .ohps-track { scroll-behavior: auto; }
}