/*
 * RELIZ.AZ - PRESS-RELIZ ARXIVI
 * Main archive page only
 */

/* =========================================================
   HERO
   ========================================================= */

.listing-hero{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(0,52,70,.08);
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255,132,0,.17),
            transparent 22%
        ),
        radial-gradient(
            circle at 67% 100%,
            rgba(0,113,139,.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fbfdfd 0%,
            #eef7f9 56%,
            #fff8ef 100%
        );
}

.listing-hero::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-82px;
    top:-150px;
    border:1px solid rgba(255,132,0,.20);
    border-radius:50%;
    pointer-events:none;
    animation:archive-float 15s ease-in-out infinite alternate;
}

.listing-hero::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:18%;
    bottom:-110px;
    border-radius:50%;
    background:rgba(0,113,139,.04);
    pointer-events:none;
}

.listing-hero-inner{
    position:relative;
    z-index:1;
    padding-top:54px;
    padding-bottom:60px;
}

.listing-kicker{
    display:inline-flex;
    gap:8px;
    align-items:center;
    margin-bottom:10px;
    color:#00728b;
    font-size:12px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.listing-kicker::before{
    content:"";
    width:22px;
    height:3px;
    border-radius:999px;
    background:#ff8500;
}

.listing-title{
    max-width:760px;
    margin:0;
    color:#002d41;
    font-size:clamp(42px,5vw,64px);
    font-weight:850;
    line-height:1.06;
    letter-spacing:-.025em;
}

.listing-description{
    max-width:720px;
    margin-top:17px;
    color:#62757e;
    font-size:17px;
    line-height:1.65;
}


/* =========================================================
   MAIN ARCHIVE AREA
   ========================================================= */

.ad-global-shell{
    align-items:start;
}

.listing-main{
    min-width:0;
    padding-top:42px;
    padding-bottom:68px;
}

.listing-summary{
    margin-bottom:18px;
}

.listing-summary > div{
    display:inline-flex;
    min-height:42px;
    gap:8px;
    align-items:center;
    padding:8px 14px;
    border:1px solid #dbe7eb;
    border-radius:999px;
    color:#61747d;
    background:#f7fbfc;
    font-size:12px;
    font-weight:700;
}

.listing-summary > div::before{
    content:"";
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:#ff8500;
    box-shadow:0 0 0 4px rgba(255,133,0,.10);
}

.listing-summary strong{
    color:#002d41;
    font-size:14px;
    font-weight:900;
}


/* =========================================================
   DATE NAVIGATOR
   ========================================================= */

.archive-navigator{
    position:relative;
    z-index:20;
    overflow:visible;
    margin:0;
    padding:30px;
    border:1px solid #dce8ec;
    border-radius:23px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0,113,139,.08),
            transparent 33%
        ),
        #fff;
    box-shadow:0 18px 44px rgba(0,45,65,.065);
}

.archive-navigator::after{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    right:18px;
    bottom:18px;
    border:1px solid rgba(0,113,139,.09);
    border-radius:50%;
    pointer-events:none;
}

.archive-navigator-head{
    position:relative;
    z-index:1;
    max-width:650px;
}

.archive-navigator-head h2,
.archive-section-head h2{
    margin:0;
    color:#002d41;
    font-size:24px;
    font-weight:850;
    line-height:1.2;
}

.archive-navigator-head p{
    margin:8px 0 0;
    color:#687b84;
    font-size:13px;
    line-height:1.65;
}

.archive-date-form{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:
        minmax(120px,.8fr)
        minmax(170px,1.2fr)
        minmax(120px,.8fr)
        auto;
    gap:13px;
    align-items:end;
    margin-top:24px;
}

.archive-date-field{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:7px;
}

.archive-date-field > span{
    color:#263f49;
    font-size:12px;
    font-weight:800;
}

.archive-date-field select{
    width:100%;
    min-width:0;
    height:48px;
    padding:0 40px 0 14px;
    border:1px solid #d4e1e6;
    border-radius:12px;
    outline:0;
    color:#123846;
    background-color:#f9fcfd;
    font:inherit;
    font-size:14px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.archive-date-field select:hover{
    border-color:#b7d1d9;
    background:#fff;
}

.archive-date-field select:focus{
    border-color:#00728b;
    background:#fff;
    box-shadow:0 0 0 3px rgba(0,114,139,.10);
}

.archive-date-submit{
    min-width:104px;
    min-height:48px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:#ff8500;
    box-shadow:0 10px 22px rgba(255,133,0,.22);
    font-weight:800;
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.archive-date-submit:hover{
    transform:translateY(-2px);
    color:#fff;
    background:#ed7900;
    box-shadow:0 14px 27px rgba(255,133,0,.28);
}


/* =========================================================
   RECENT DATES
   ========================================================= */

.archive-recent{
    margin-top:38px;
}

.archive-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:17px;
}

.archive-days{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.archive-day{
    position:relative;
    overflow:hidden;
    display:flex;
    min-width:0;
    min-height:104px;
    flex-direction:column;
    justify-content:center;
    padding:19px 20px;
    border:1px solid #dfe8eb;
    border-radius:16px;
    color:#002d41;
    text-decoration:none;
    background:#fff;
    box-shadow:0 8px 22px rgba(0,45,65,.035);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.archive-day::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:#00728b;
    opacity:.8;
}

.archive-day:nth-child(4n + 2)::before,
.archive-day:nth-child(4n + 4)::before{
    background:#ff8500;
}

.archive-day::after{
    content:"";
    position:absolute;
    width:70px;
    height:70px;
    right:-40px;
    bottom:-42px;
    border-radius:50%;
    background:rgba(0,113,139,.05);
    transition:transform .22s ease;
}

.archive-day:hover{
    transform:translateY(-4px);
    border-color:#bfd6dd;
    color:#002d41;
    box-shadow:0 15px 32px rgba(0,45,65,.08);
}

.archive-day:hover::after{
    transform:scale(1.25);
}

.archive-day strong{
    position:relative;
    z-index:1;
    color:#002d41;
    font-size:14px;
    font-weight:850;
    line-height:1.35;
}

.archive-day span{
    position:relative;
    z-index:1;
    width:max-content;
    max-width:100%;
    margin-top:8px;
    padding:4px 8px;
    border-radius:999px;
    color:#00728b;
    background:#eaf6f8;
    font-size:11px;
    font-weight:750;
}


/* =========================================================
   MONTHS
   ========================================================= */

.archive-month-summary{
    margin-top:38px;
}

.archive-month-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

.archive-month-stat{
    position:relative;
    display:flex;
    min-width:0;
    min-height:92px;
    flex-direction:column;
    justify-content:center;
    padding:19px 52px 19px 21px;
    border:1px solid #dfe8eb;
    border-radius:16px;
    color:#002d41;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f8fbfc
        );
    text-decoration:none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.archive-month-stat::after{
    content:"→";
    position:absolute;
    top:50%;
    right:20px;
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    border-radius:10px;
    color:#00728b;
    background:#e9f5f7;
    font-size:14px;
    font-weight:900;
    transform:translateY(-50%);
    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease;
}

.archive-month-stat:hover{
    transform:translateY(-3px);
    border-color:#bfd6dd;
    color:#002d41;
    box-shadow:0 14px 30px rgba(0,45,65,.07);
}

.archive-month-stat:hover::after{
    color:#fff;
    background:#ff8500;
    transform:translate(3px,-50%);
}

.archive-month-stat strong{
    color:#002d41;
    font-size:15px;
    font-weight:850;
    line-height:1.3;
}

.archive-month-stat span{
    margin-top:7px;
    color:#6a7d85;
    font-size:11.5px;
    line-height:1.45;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.archive-day:focus-visible,
.archive-month-stat:focus-visible,
.archive-date-submit:focus-visible{
    outline:3px solid rgba(0,114,139,.22);
    outline-offset:3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:980px){

    .archive-date-form{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .archive-date-submit{
        width:100%;
    }

    .archive-days{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .archive-month-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:680px){

    .listing-hero-inner{
        padding-top:38px;
        padding-bottom:44px;
    }

    .listing-title{
        font-size:clamp(36px,11vw,48px);
    }

    .listing-description{
        font-size:15px;
    }

    .listing-main{
        padding-top:28px;
        padding-bottom:48px;
    }

    .archive-navigator{
        padding:23px;
        border-radius:19px;
    }

    .archive-date-form{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:20px;
    }

    .archive-date-field select{
        min-height:50px;
    }

    .archive-date-submit{
        width:100%;
        min-height:50px;
    }

    .archive-recent,
    .archive-month-summary{
        margin-top:30px;
    }

    .archive-days{
        grid-template-columns:1fr;
    }

    .archive-day{
        min-height:92px;
    }

    .archive-month-stats{
        grid-template-columns:1fr;
    }

    .archive-month-stat{
        min-height:88px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:400px){

    .archive-navigator{
        padding:20px;
    }

    .archive-navigator-head h2,
    .archive-section-head h2{
        font-size:21px;
    }

    .archive-day{
        padding:17px 18px;
    }

    .archive-month-stat{
        padding-left:18px;
    }
}


/* =========================================================
   MOTION
   ========================================================= */

.archive-navigator,
.archive-recent,
.archive-month-summary{
    animation:archive-rise .6s ease both;
}

.archive-recent{
    animation-delay:.06s;
}

.archive-month-summary{
    animation-delay:.11s;
}

@keyframes archive-rise{
    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes archive-float{
    from{
        transform:translate3d(0,0,0);
    }

    to{
        transform:translate3d(-18px,18px,0);
    }
}

@media (prefers-reduced-motion:reduce){

    .listing-hero::before,
    .archive-navigator,
    .archive-recent,
    .archive-month-summary{
        animation:none;
    }

    .archive-date-field select,
    .archive-date-submit,
    .archive-day,
    .archive-day::after,
    .archive-month-stat,
    .archive-month-stat::after{
        transition:none;
    }
}

/* =========================================================
   CUSTOM ARCHIVE SELECT
   Desktop / pointer-fine only
   ========================================================= */

@media (hover:hover) and (pointer:fine){

    .archive-date-field{
        position:relative;
    }

    .archive-date-field.is-custom-select select{
        position:absolute;
        width:1px;
        height:1px;
        margin:-1px;
        padding:0;
        overflow:hidden;
        clip:rect(0 0 0 0);
        clip-path:inset(50%);
        border:0;
        white-space:nowrap;
    }

    .archive-select{
        position:relative;
        min-width:0;
    }

    .archive-select-button{
        position:relative;
        display:flex;
        width:100%;
        height:48px;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:0 14px 0 15px;
        border:1px solid #d4e1e6;
        border-radius:12px;
        color:#123846;
        background:#f9fcfd;
        font:inherit;
        font-size:14px;
        text-align:left;
        cursor:pointer;
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            background .18s ease;
    }

    .archive-select-button:hover{
        border-color:#b7d1d9;
        background:#fff;
    }

    .archive-select.is-open .archive-select-button{
        border-color:#00728b;
        background:#fff;
        box-shadow:0 0 0 3px rgba(0,114,139,.10);
    }

    .archive-select-chevron{
        flex:0 0 auto;
        width:8px;
        height:8px;
        margin-top:-4px;
        border-right:2px solid #42646f;
        border-bottom:2px solid #42646f;
        transform:rotate(45deg);
        transition:transform .18s ease;
    }

    .archive-select.is-open .archive-select-chevron{
        margin-top:4px;
        transform:rotate(225deg);
    }

    .archive-select-menu{
        position:absolute;
        z-index:100;
        top:calc(100% + 7px);
        left:0;
        right:0;
        display:none;
        max-height:240px;
        overflow:auto;
        padding:7px;
        border:1px solid #d5e3e7;
        border-radius:14px;
        background:#fff;
        box-shadow:
            0 20px 50px rgba(0,45,65,.15),
            0 3px 10px rgba(0,45,65,.06);
        scrollbar-width:thin;
        scrollbar-color:#bdd4db transparent;
    }

    .archive-select.is-open .archive-select-menu{
        display:block;
        animation:archive-select-open .16s ease both;
    }

    .archive-select-option{
        display:flex;
        width:100%;
        min-height:39px;
        align-items:center;
        padding:8px 10px;
        border:0;
        border-radius:9px;
        color:#244650;
        background:transparent;
        font:inherit;
        font-size:13px;
        text-align:left;
        cursor:pointer;
        transition:
            color .14s ease,
            background .14s ease;
    }

    .archive-select-option:hover,
    .archive-select-option.is-active{
        color:#00485c;
        background:#edf7f9;
    }

    .archive-select-option[aria-selected="true"]{
        position:relative;
        padding-right:34px;
        color:#fff;
        background:#00728b;
        font-weight:800;
    }

    .archive-select-option[aria-selected="true"]::after{
        content:"✓";
        position:absolute;
        right:11px;
        top:50%;
        font-size:12px;
        font-weight:900;
        transform:translateY(-50%);
    }

    .archive-select-option[aria-selected="true"]:hover,
    .archive-select-option[aria-selected="true"].is-active{
        color:#fff;
        background:#006279;
    }

    @keyframes archive-select-open{
        from{
            opacity:0;
            transform:translateY(-5px) scale(.985);
        }

        to{
            opacity:1;
            transform:translateY(0) scale(1);
        }
    }
}

@media (prefers-reduced-motion:reduce){

    .archive-select-button,
    .archive-select-chevron,
    .archive-select-option{
        transition:none;
    }

    .archive-select.is-open .archive-select-menu{
        animation:none;
    }
}