/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
    scroll-behavior: smooth;
    font-size: clamp(0.95rem,2.5vw,1.12rem);
}

#before-img img, #after-img img {
    transition: object-fit 0.3s ease;  /* Smooth fit change if switching */
    will-change: transform;  /* Optimize for mobile */
}

@media (min-width: 1023px) and (max-width: 1278px) {
    .lg-max-w-390px {
        max-width: 390px;
    }
}

@media (min-width: 1536px) {
    .max-w-290px {
        max-width: 290px;
    }
}

@media (min-width: 1278px) and (max-width: 1536px) {
  .max-w-215px {
      max-width: 215px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .md-max-w-300px {
        max-width: 300px;
    }

    .md-max-w-375px {
        max-width: 375px;
    }

    .md-max-w-225px {
        max-width: 225px;
    }
}

.form-lucid {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.pagy.series-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagy.series-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.1s ease;
    color: #374151;
    background-color: white;
}

.pagy.series-nav a:hover:not([aria-current="page"]):not([aria-disabled="true"]) {
    background-color: hsl(29, 40%, 98%);           /* ue-bronze-100 */
    border-color: hsl(30, 42%, 89%);               /* ue-bronze-200 */
    color: hsl(30, 43%, 33%);                      /* ue-bronze-700 */
}

.pagy.series-nav a[aria-current="page"] {
    background-color: hsl(30, 43%, 49%);           /* ue-bronze-600 */
    color: white;
    border-color: hsl(30, 43%, 49%);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pagy.series-nav a[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}

/* Prev / Next buttons */
.pagy.series-nav a[aria-label="Previous"],
.pagy.series-nav a[aria-label="Next"] {
    padding: 0 12px;
    font-size: 18px;
    font-weight: 400;
}