.azbuka-catalog{
    --az-bg:transparent;
    --az-card:#ffffff;
    --az-text:#092b3d;
    --az-muted:#526d7b;
    --az-accent:#00a7d7;
    --az-radius:22px;
    --az-gap:14px;
    color:var(--az-text);
}

.azbuka-catalog *,
.azbuka-catalog *::before,
.azbuka-catalog *::after{box-sizing:border-box;}

/*
 * Clean reference-inspired composition.
 * Background and outer side paddings intentionally removed.
 */
.azbuka-catalog__grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:235px 235px 300px 270px;
    grid-template-areas:
        "hero hero hero hero hero hero hero hero cottage cottage cottage cottage"
        "hero hero hero hero hero hero hero hero balcony balcony balcony balcony"
        "entrance entrance entrance entrance sliding sliding sliding sliding facade facade facade facade"
        "metal metal metal metal metal metal install install install install install install";
    gap:var(--az-gap);
    padding:0;
    border-radius:0;
    background:transparent;
}

.azbuka-service-card{
    min-width:0;
    min-height:0;
    height:100%;
    position:relative;
    display:flex;
    overflow:hidden;
    border-radius:var(--az-radius);
    background:var(--az-card);
    border:1px solid rgba(11,54,74,.035);
    box-shadow:0 1px 0 rgba(6,45,63,.025);
}

/* No card movement / card hover animation. */
.azbuka-service-card:hover{
    transform:none;
    box-shadow:0 1px 0 rgba(6,45,63,.025);
    border-color:rgba(11,54,74,.035);
}

.azbuka-service-card--i-1{grid-area:hero;}
.azbuka-service-card--i-2{grid-area:balcony;}
.azbuka-service-card--i-3{grid-area:entrance;}
.azbuka-service-card--i-4{grid-area:sliding;}
.azbuka-service-card--i-5{grid-area:cottage;}
.azbuka-service-card--i-6{grid-area:facade;}
.azbuka-service-card--i-7{grid-area:metal;}
.azbuka-service-card--i-8{grid-area:install;}

.azbuka-service-card__content{
    position:relative;
    z-index:2;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-width:0;
    padding:24px 26px;
}

.azbuka-service-card__eyebrow{
    display:inline-flex;
    align-self:flex-start;
    margin:0 0 10px;
    padding:5px 9px;
    border-radius:999px;
    background:#f0fbfe;
    color:#168fb5;
    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.azbuka-service-card__title{
    margin:0 0 14px;
    color:var(--az-text);
    font-size:21px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.025em;
    text-transform:uppercase;
}

/* Titles look clickable before hover, not only after it. */
.azbuka-service-card__title a{
    color:inherit;
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    transition:color .18s ease;
}
.azbuka-service-card__title a:hover,
.azbuka-service-card__title a:focus-visible{
    color:var(--az-accent);
}
.azbuka-service-card__title a::after{
    content:"↗";
    display:inline-block;
    font-size:.72em;
    line-height:1;
    font-weight:600;
    opacity:.38;
    transform:translate(0,0);
    transition:opacity .18s ease,transform .18s ease;
}
.azbuka-service-card__title a:hover::after,
.azbuka-service-card__title a:focus-visible::after{
    opacity:1;
    transform:translate(2px,-2px);
}

.azbuka-service-card__description{
    color:var(--az-muted);
    font-size:14px;
    line-height:1.55;
    max-width:96%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

/* Child services: larger, uppercase and visibly interactive. */
.azbuka-catalog .azbuka-service-card__links{
    display:grid;
    gap:11px;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
}
.azbuka-catalog .azbuka-service-card__links li{
    margin:0!important;
    padding:0!important;
    list-style:none!important;
    color:var(--az-text);
    font-size:15px;
    line-height:1.35;
    font-weight:500;
    text-transform:uppercase;
}
.azbuka-catalog .azbuka-service-card__links li::before,
.azbuka-catalog .azbuka-service-card__links li::marker{display:none!important;content:""!important;}
.azbuka-service-card__links a{
    position:relative;
    z-index:4;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:inherit;
    text-decoration:none;
    transition:color .18s ease;
}
.azbuka-service-card__links a svg{
    display:block;
    width:12px;
    height:12px;
    flex:0 0 12px;
    fill:currentColor;
    opacity:.42;
    transform:translateX(0);
    transition:opacity .18s ease,transform .18s ease;
}
.azbuka-service-card__links a:hover,
.azbuka-service-card__links a:focus-visible{
    color:var(--az-accent);
}
.azbuka-service-card__links a:hover svg,
.azbuka-service-card__links a:focus-visible svg{
    opacity:1;
    transform:translateX(3px);
}

/* Front design follows the reference: no boxed CTA buttons. */
.azbuka-service-card__button{display:none!important;}

.azbuka-service-card__media{
    position:relative;
    display:block;
    overflow:hidden;
    min-width:0;
    background:#e7ecef;
}
.azbuka-service-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    backface-visibility:hidden;
    transform:translateZ(0) scale(1.001);
    transition:transform .28s cubic-bezier(.22,.7,.26,1);
}
/* Only the photo animates: quicker and more noticeable zoom. */
.azbuka-service-card__media:hover img,
.azbuka-service-card__media:focus-visible img{
    transform:translateZ(0) scale(1.095);
}

/* 1. Plastic windows */
.azbuka-service-card--i-1{flex-direction:row;}
.azbuka-service-card--i-1 .azbuka-service-card__content{
    flex:0 0 45%;
    padding:30px 30px 28px;
}
.azbuka-service-card--i-1 .azbuka-service-card__media{flex:1 1 55%;}
.azbuka-service-card--i-1 .azbuka-service-card__title{
    margin-bottom:20px;
    font-size:25px;
    line-height:1.08;
}
.azbuka-service-card--i-1 .azbuka-service-card__links{gap:13px;}
.azbuka-service-card--i-1 .azbuka-service-card__links li{
    font-size:16px;
    line-height:1.4;
}

/* 5. Cottage */
.azbuka-service-card--i-5{flex-direction:column;}
.azbuka-service-card--i-5 .azbuka-service-card__content{
    flex:1 1 46%;
    padding:23px 26px 18px;
}
.azbuka-service-card--i-5 .azbuka-service-card__media{
    order:2;
    flex:1 1 54%;
    width:100%;
}

/* 2. Balcony */
.azbuka-service-card--i-2{flex-direction:column;}
.azbuka-service-card--i-2 .azbuka-service-card__media{
    order:-1;
    flex:0 0 55%;
    width:100%;
}
.azbuka-service-card--i-2 .azbuka-service-card__content{
    flex:1 1 45%;
    padding:18px 26px 20px;
}

/* Middle row */
.azbuka-service-card--i-3,
.azbuka-service-card--i-4,
.azbuka-service-card--i-6{flex-direction:column;}
.azbuka-service-card--i-3 .azbuka-service-card__content,
.azbuka-service-card--i-6 .azbuka-service-card__content{
    flex:1 1 47%;
    padding:22px 25px 18px;
}
.azbuka-service-card--i-3 .azbuka-service-card__media,
.azbuka-service-card--i-6 .azbuka-service-card__media{
    order:2;
    flex:1 1 53%;
    width:100%;
}
.azbuka-service-card--i-4 .azbuka-service-card__media{
    order:-1;
    flex:0 0 55%;
    width:100%;
}
.azbuka-service-card--i-4 .azbuka-service-card__content{
    flex:1 1 45%;
    padding:20px 25px;
}

/* Bottom doors */
.azbuka-service-card--i-7,
.azbuka-service-card--i-8{flex-direction:row;}
.azbuka-service-card--i-7 .azbuka-service-card__content,
.azbuka-service-card--i-8 .azbuka-service-card__content{
    flex:0 0 43%;
    padding:25px 26px;
    justify-content:center;
}
.azbuka-service-card--i-7 .azbuka-service-card__media,
.azbuka-service-card--i-8 .azbuka-service-card__media{
    order:2;
    flex:1 1 57%;
}

.azbuka-service-card--i-7 .azbuka-service-card__media{background:#ededed;}
.azbuka-service-card--i-7 .azbuka-service-card__media img{
    object-fit:contain;
    object-position:center;
    padding:18px 24px;
}
.azbuka-service-card--i-8 .azbuka-service-card__media img{object-position:42% 50%;}

@media (max-width:1180px){
    .azbuka-catalog__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:auto;
        grid-template-areas:
            "hero hero"
            "cottage balcony"
            "entrance sliding"
            "facade facade"
            "metal install";
    }
    .azbuka-service-card{min-height:320px;height:auto;}
    .azbuka-service-card--i-1{min-height:440px;}
    .azbuka-service-card--i-6{min-height:300px;}
    .azbuka-service-card--i-7,
    .azbuka-service-card--i-8{min-height:260px;}
}

@media (max-width:760px){
    .azbuka-catalog__grid{
        display:grid;
        grid-template-columns:1fr;
        grid-template-areas:
            "hero"
            "balcony"
            "entrance"
            "sliding"
            "cottage"
            "facade"
            "metal"
            "install";
        gap:10px;
        padding:0;
        border-radius:0;
    }
    .azbuka-service-card,
    .azbuka-service-card--i-1,
    .azbuka-service-card--i-2,
    .azbuka-service-card--i-3,
    .azbuka-service-card--i-4,
    .azbuka-service-card--i-5,
    .azbuka-service-card--i-6,
    .azbuka-service-card--i-7,
    .azbuka-service-card--i-8{
        min-height:0;
        height:auto;
        flex-direction:column;
        border-radius:16px;
    }
    .azbuka-service-card--i-1 .azbuka-service-card__content,
    .azbuka-service-card--i-2 .azbuka-service-card__content,
    .azbuka-service-card--i-3 .azbuka-service-card__content,
    .azbuka-service-card--i-4 .azbuka-service-card__content,
    .azbuka-service-card--i-5 .azbuka-service-card__content,
    .azbuka-service-card--i-6 .azbuka-service-card__content,
    .azbuka-service-card--i-7 .azbuka-service-card__content,
    .azbuka-service-card--i-8 .azbuka-service-card__content{
        order:2;
        flex:auto;
        padding:20px;
        justify-content:flex-start;
    }
    .azbuka-service-card--i-1 .azbuka-service-card__media,
    .azbuka-service-card--i-2 .azbuka-service-card__media,
    .azbuka-service-card--i-3 .azbuka-service-card__media,
    .azbuka-service-card--i-4 .azbuka-service-card__media,
    .azbuka-service-card--i-5 .azbuka-service-card__media,
    .azbuka-service-card--i-6 .azbuka-service-card__media,
    .azbuka-service-card--i-7 .azbuka-service-card__media,
    .azbuka-service-card--i-8 .azbuka-service-card__media{
        order:1;
        flex:0 0 200px;
        width:100%;
        height:200px;
    }
    .azbuka-service-card--i-1 .azbuka-service-card__title{font-size:21px;}
    .azbuka-service-card__title{font-size:19px;}
    .azbuka-service-card__description{font-size:14px;-webkit-line-clamp:4;}
    .azbuka-service-card--i-1 .azbuka-service-card__links li{font-size:15px;}
    .azbuka-service-card--i-7 .azbuka-service-card__media img{padding:14px 20px;}
}