/* ==========================================================================
   Colors Section — Osmo Colour Studio
   Inspired by colours.osmouk.com
   ========================================================================== */

.colors-section {
    --cs-primary: #3fa535;
    --cs-primary-dark: #358c2d;
    --cs-bg: #f5f5f3;
    --cs-bg-warm: #faf9f7;
    --cs-border: #e8e6e1;
    --cs-border-light: #f0eee9;
    --cs-text: #2c2c2c;
    --cs-text-light: #7a7a7a;
    --cs-text-muted: #a0a0a0;
    --cs-white: #fff;
    --cs-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --cs-shadow: 0 4px 12px rgba(0,0,0,0.08);
    --cs-shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --cs-radius: 8px;
    --cs-radius-lg: 12px;
    --cs-transition: 0.2s ease;
}

/* ---------- Header ---------- */

.colors-section__header {
    text-align: center;
    margin-bottom: 3rem;
}

.colors-section__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.colors-section__lead {
    font-size: 1.125rem;
    color: var(--cs-text-light);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- Initial View — Tiles ---------- */

.colors-section__initial-view {
    display: block;
}

.colors-section__colors-view {
    display: none;
}

.colors-section__tiles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.colors-section__tiles-group {
    margin-bottom: 0;
}

.colors-section__tiles-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cs-text-muted);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.colors-section__tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Zastosowanie: zawsze 2 kolumny (2 kafelki = pełna szerokość) */
.colors-section__tiles--applications {
    grid-template-columns: 1fr 1fr;
}

/* Palety: dopasuj kolumny do ilości */
@media (min-width: 768px) {
    .colors-section__tiles--palettes {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

/* Tile card */

.colors-section__tile {
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: transform var(--cs-transition), box-shadow var(--cs-transition), border-color var(--cs-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

.colors-section__tile:hover,
.colors-section__tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--cs-shadow-lg);
    border-color: var(--cs-primary);
    outline: none;
}

.colors-section__tile:active {
    transform: translateY(-1px);
    box-shadow: var(--cs-shadow);
}

/* Application tiles */

.colors-section__tile--application {
    background: linear-gradient(135deg, var(--cs-bg-warm) 0%, var(--cs-white) 100%);
}

.colors-section__tile--application[data-application="interior"] {
    background: linear-gradient(135deg, #fff8e1 0%, #fffdf5 100%);
    border-color: #f0e4b8;
}

.colors-section__tile--application[data-application="interior"]:hover,
.colors-section__tile--application[data-application="interior"]:focus-visible {
    border-color: #d4a017;
}

.colors-section__tile--application[data-application="exterior"] {
    background: linear-gradient(135deg, #e8f5e9 0%, #f6fdf6 100%);
    border-color: #c5deb0;
}

.colors-section__tile--application[data-application="exterior"]:hover,
.colors-section__tile--application[data-application="exterior"]:focus-visible {
    border-color: var(--cs-primary);
}

.colors-section__tile-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    color: var(--cs-text);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity var(--cs-transition);
}

.colors-section__tile:hover .colors-section__tile-icon {
    opacity: 1;
}

/* Palette tile — color preview strip */

.colors-section__tile-palette-preview {
    display: flex;
    width: 100%;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    transition: transform var(--cs-transition);
}

.colors-section__tile:hover .colors-section__tile-palette-preview {
    transform: scaleY(1.15);
}

/* Each preview uses a gradient strip of representative palette colors */

[data-palette="osmo-standard"] .colors-section__tile-palette-preview {
    background: linear-gradient(90deg,
        #8B7355 0%, #8B7355 14%,
        #C4A265 14%, #C4A265 28%,
        #D4B896 28%, #D4B896 42%,
        #6B4226 42%, #6B4226 57%,
        #A0522D 57%, #A0522D 71%,
        #F5DEB3 71%, #F5DEB3 85%,
        #3E2723 85%, #3E2723 100%
    );
}

[data-palette="elements"] .colors-section__tile-palette-preview {
    background: linear-gradient(90deg,
        #87CEEB 0%, #87CEEB 16%,
        #F8F5E0 16%, #F8F5E0 33%,
        #C1582E 33%, #C1582E 50%,
        #6B8E23 50%, #6B8E23 66%,
        #4682B4 66%, #4682B4 83%,
        #D2691E 83%, #D2691E 100%
    );
}

[data-palette="ral-classic"] .colors-section__tile-palette-preview {
    background: linear-gradient(90deg,
        #F3E03B 0%, #F3E03B 14%,
        #E15501 14%, #E15501 28%,
        #C1121C 28%, #C1121C 42%,
        #2874B2 42%, #2874B2 57%,
        #3D642D 57%, #3D642D 71%,
        #1E1E1E 71%, #1E1E1E 85%,
        #F4F4F4 85%, #F4F4F4 100%
    );
}

[data-palette="ncs-2050"] .colors-section__tile-palette-preview {
    background: linear-gradient(90deg,
        #E8C840 0%, #E8C840 16%,
        #D05A3A 16%, #D05A3A 33%,
        #B23A5C 33%, #B23A5C 50%,
        #4A7FB5 50%, #4A7FB5 66%,
        #3A8C5C 66%, #3A8C5C 83%,
        #6B5B8A 83%, #6B5B8A 100%
    );
}

[data-palette="bs-4800"] .colors-section__tile-palette-preview {
    background: linear-gradient(90deg,
        #8DB580 0%, #8DB580 16%,
        #D4C090 16%, #D4C090 33%,
        #98AFC7 33%, #98AFC7 50%,
        #B87070 50%, #B87070 66%,
        #707070 66%, #707070 83%,
        #E8D5B7 83%, #E8D5B7 100%
    );
}

.colors-section__tile-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cs-text);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.colors-section__tile-desc {
    font-size: 0.85rem;
    color: var(--cs-text-light);
}

/* ---------- Toolbar (back + info + search) ---------- */

.colors-section__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cs-border-light);
}

.colors-section__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    color: var(--cs-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--cs-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.colors-section__back-btn:hover {
    border-color: var(--cs-primary);
    color: var(--cs-primary);
    box-shadow: var(--cs-shadow-sm);
}

.colors-section__selected-info {
    font-size: 0.9rem;
    color: var(--cs-text-light);
    flex: 1;
    min-width: 0;
}

.colors-section__selected-info strong {
    color: var(--cs-text);
    font-weight: 600;
}

/* Search */

.colors-section__search {
    position: relative;
    flex: 0 1 280px;
    min-width: 200px;
}

.colors-section__search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs-text-muted);
    pointer-events: none;
}

.colors-section__search-input {
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 2.5rem;
    border: 1px solid var(--cs-border);
    border-radius: 100px;
    font-size: 0.9rem;
    color: var(--cs-text);
    background: var(--cs-white);
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
    outline: none;
}

.colors-section__search-input::placeholder {
    color: var(--cs-text-muted);
}

.colors-section__search-input:focus {
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(63, 165, 53, 0.1);
}

.colors-section__search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--cs-text-muted);
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color var(--cs-transition), background var(--cs-transition);
}

.colors-section__search-clear:hover {
    color: var(--cs-text);
    background: var(--cs-bg);
}

.colors-section__search-status {
    text-align: center;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--cs-text-light);
    background: var(--cs-bg);
    border-radius: var(--cs-radius);
}

@media (max-width: 640px) {
    .colors-section__toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .colors-section__search {
        flex: 1 1 100%;
    }
    .colors-section__selected-info {
        text-align: center;
    }
}

/* ---------- Palette Selector ---------- */

.colors-section__palette-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.colors-section__palette-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.colors-section__palette-tab {
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--cs-border);
    border-radius: 100px;
    background: var(--cs-white);
    color: var(--cs-text-light);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--cs-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.colors-section__palette-tab:hover {
    color: var(--cs-text);
    border-color: var(--cs-text-light);
    box-shadow: var(--cs-shadow-sm);
}

.colors-section__palette-tab--active {
    background: var(--cs-primary);
    color: var(--cs-white);
    border-color: var(--cs-primary);
}

.colors-section__palette-tab--active:hover {
    background: var(--cs-primary-dark);
    border-color: var(--cs-primary-dark);
    color: var(--cs-white);
}

.colors-section__palette-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0,0,0,0.08);
    line-height: 1;
}

.colors-section__palette-tab--active .colors-section__palette-count {
    background: rgba(255,255,255,0.25);
}

/* ---------- Palette Panels ---------- */

.colors-section__palette-panel {
    display: none;
}

.colors-section__palette-panel--active {
    display: block;
    animation: csFadeIn 0.25s ease;
}

@keyframes csFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Color Grid ---------- */

.colors-section__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .colors-section__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .colors-section__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (min-width: 1400px) {
    .colors-section__grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ---------- Color Item ---------- */

.colors-section__item {
    cursor: pointer;
    overflow: hidden;
    background: var(--cs-white);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
    transition: transform var(--cs-transition), box-shadow var(--cs-transition);
    border: 1px solid transparent;
}

.colors-section__item:hover,
.colors-section__item:focus-visible {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--cs-shadow);
    outline: none;
    border-color: rgba(0,0,0,0.05);
}

.colors-section__item:focus-visible {
    box-shadow: 0 0 0 2px var(--cs-primary), var(--cs-shadow);
}

.colors-section__item:active {
    transform: translateY(-1px) scale(1.01);
}

.colors-section__item-color {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Wood grain texture overlay */
.colors-section__item-color::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            2deg,
            transparent 0px,
            transparent 3px,
            rgba(0,0,0,0.03) 3px,
            rgba(0,0,0,0.03) 4px,
            transparent 4px,
            transparent 12px
        ),
        repeating-linear-gradient(
            178deg,
            transparent 0px,
            transparent 8px,
            rgba(0,0,0,0.02) 8px,
            rgba(0,0,0,0.02) 9px,
            transparent 9px,
            transparent 20px
        ),
        repeating-linear-gradient(
            1deg,
            transparent 0px,
            transparent 18px,
            rgba(0,0,0,0.04) 18px,
            rgba(0,0,0,0.04) 19.5px,
            transparent 19.5px,
            transparent 45px
        ),
        radial-gradient(
            ellipse 120% 4px at 30% 20%,
            rgba(0,0,0,0.05) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 80% 3px at 70% 55%,
            rgba(0,0,0,0.04) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 150% 5px at 50% 80%,
            rgba(0,0,0,0.05) 0%,
            transparent 100%
        );
    mix-blend-mode: multiply;
}

.colors-section__item-number {
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity var(--cs-transition);
}

.colors-section__item:hover .colors-section__item-number {
    opacity: 1;
}

.colors-section__item-info {
    padding: 0.55rem 0.6rem;
    background: var(--cs-white);
    text-align: center;
}

.colors-section__item-title {
    font-size: 0.75rem;
    color: var(--cs-text);
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ---------- Disclaimer ---------- */

.colors-section__disclaimer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--cs-text-muted);
    margin-top: 2rem;
    font-style: italic;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.colors-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.colors-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.colors-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.colors-modal__content {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--cs-white);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-lg);
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.colors-modal[aria-hidden="false"] .colors-modal__content {
    transform: scale(1) translateY(0);
}

.colors-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cs-transition), transform var(--cs-transition);
    color: var(--cs-text);
    box-shadow: var(--cs-shadow-sm);
}

.colors-modal__close:hover {
    background: var(--cs-white);
    transform: scale(1.1);
}

.colors-modal__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

@media (max-width: 640px) {
    .colors-modal__layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.colors-modal__color-preview {
    display: flex;
    align-items: stretch;
}

.colors-modal__color-swatch {
    width: 100%;
    min-height: 250px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    position: relative;
}

/* Wood grain texture overlay — modal (larger, more visible) */
.colors-modal__color-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            2deg,
            transparent 0px,
            transparent 5px,
            rgba(0,0,0,0.03) 5px,
            rgba(0,0,0,0.03) 6.5px,
            transparent 6.5px,
            transparent 22px
        ),
        repeating-linear-gradient(
            178deg,
            transparent 0px,
            transparent 14px,
            rgba(0,0,0,0.02) 14px,
            rgba(0,0,0,0.02) 15.5px,
            transparent 15.5px,
            transparent 36px
        ),
        repeating-linear-gradient(
            1deg,
            transparent 0px,
            transparent 30px,
            rgba(0,0,0,0.04) 30px,
            rgba(0,0,0,0.04) 32px,
            transparent 32px,
            transparent 70px
        ),
        radial-gradient(
            ellipse 200% 6px at 25% 15%,
            rgba(0,0,0,0.05) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 160% 5px at 60% 40%,
            rgba(0,0,0,0.04) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 180% 7px at 40% 65%,
            rgba(0,0,0,0.05) 0%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 220% 4px at 55% 85%,
            rgba(0,0,0,0.03) 0%,
            transparent 100%
        );
    mix-blend-mode: multiply;
}

@media (max-width: 640px) {
    .colors-modal__color-swatch {
        min-height: 180px;
    }
}

.colors-modal__details {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 640px) {
    .colors-modal__details {
        padding: 1.75rem;
    }
}

.colors-modal__palette-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    background: var(--cs-primary);
    color: var(--cs-white);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1.25rem;
    width: fit-content;
    border-radius: 100px;
}

.colors-modal__number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--cs-text);
    margin: 0 0 0.25rem 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.colors-modal__title {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--cs-text-light);
    margin: 0 0 1.5rem 0;
}

.colors-modal__content-text {
    font-size: 0.95rem;
    color: var(--cs-text);
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.colors-modal__content-text:empty {
    display: none;
}

.colors-modal__hex-code {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border-light);
    border-radius: var(--cs-radius);
}

.colors-modal__hex-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.colors-modal__hex-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cs-text);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.colors-modal__copy-btn {
    margin-left: auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-white);
    cursor: pointer;
    color: var(--cs-text-light);
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--cs-transition);
}

.colors-modal__copy-btn:hover {
    color: var(--cs-primary);
    border-color: var(--cs-primary);
    background: rgba(63, 165, 53, 0.05);
}

.colors-modal__copy-btn--copied {
    color: var(--cs-primary);
    border-color: var(--cs-primary);
}

.colors-modal__copy-label {
    font-weight: 500;
}

.colors-modal__disclaimer {
    font-size: 0.75rem;
    color: var(--cs-text-muted);
    margin: 1.5rem 0 0;
    font-style: italic;
}