@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root{--sky:#9edcf5;--sky-light:#eaf8fd;--burg:#920019;--burg-dark:#720012;--ink:#171717;--line:#d7dfe3;--max:1500px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;}
body{color:var(--ink);background:var(--sky-light);font-family: 'Roboto', sans-serif;font-size: 15px;line-height: 1.5;}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1{font-size:1.4em;text-transform: uppercase;color:var(--burg);}

.latest-news .views-field-title a,.latest-news, .latest-news a {font-size: 12.7px;}

/* top strip */
.topline{height:25px;background:var(--burg);color:#fff;font-size:10px;font-weight:700}
.topinner{height:100%;display:flex;align-items:center;justify-content:space-between;letter-spacing:.7px}

/* header */
.header{background:#99d9f3;border-bottom:1px solid #7bc7e4}
.headerinner{height:69px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand strong{display:block;color:var(--burg);font-size:27px;line-height:1;font-weight:900;white-space:nowrap}
.brand small{display:block;color:#555;font-size:10px;letter-spacing:4px;margin-top:6px}
.crest{width:47px;height:55px;flex:0 0 47px;background:var(--burg);color:#fff;border:2px solid #fff;outline:1px solid var(--burg);clip-path:polygon(50% 0,100% 12%,92% 75%,50% 100%,8% 75%,0 12%);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:10px}

/* Drupal menu */
.mainnav{margin-left:auto;display:flex;align-items:center}
.mainnav ul.menu,.mainnav ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.mainnav li.menu-item,.mainnav li{list-style:none;margin:0;padding:0}
.mainnav a{display:block;padding:11px 12px;font-size:16px;font-weight:800;text-transform: capitalize;white-space:nowrap}
.mainnav a:hover,.mainnav a.is-active,.mainnav .active{background:var(--burg);color:#fff}

/* hero */
.hero{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:2.09fr 1fr;height:auto;align-items:stretch}
.hero-photo{min-width:0;min-height:0;display:flex;align-items:stretch;overflow:hidden}.hero-photo img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.hero-panel{background:linear-gradient(135deg,#b8ebfb,#73c7e7);padding:39px 33px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden}
.hero-panel:after{content:"";position:absolute;width:260px;height:260px;border:66px solid var(--burg);border-radius:50%;right:-145px;bottom:-135px;opacity:.98}
.welcome{font-weight:800;letter-spacing:2.5px;color:var(--burg);font-size:15px;position:relative;z-index:2}
.hero h1{font-size:52px;line-height:.88;color:var(--burg);margin:8px 0 20px;font-weight:900;position:relative;z-index:2}
.hero p{font-size:12px;margin:0;position:relative;z-index:2}
.button{background:var(--burg);color:#fff;padding:11px 14px;margin-top:25px;width:max-content;font-size:11px;font-weight:800;position:relative;z-index:2}
.button:hover{background:var(--burg-dark)}

/* three homepage panels */
.three{padding:15px 0 0;max-width:1500px;width:100%;margin:0 auto}
.three>.wrap{max-width:none;padding-left:0;padding-right:0}.cards{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:13px;padding:0}
.card{background:#fff;border:1px solid #dce3e6;box-shadow:0 1px 5px #0001;min-height:210px}
.card h2{background:var(--burg);color:#fff;font-size:18px;line-height:1;margin:0;padding:11px 12px;font-weight:900}
.cardbody{padding:18px 16px;}
.cardbody table{font-size: 14px;}
.match{text-align:center}
.match-teams{display:flex;justify-content:center;align-items:center;gap:10px}
.team{font-weight:900;font-size:15px;line-height:1.05}
.versus{font-size:22px;color:var(--burg);font-weight:900}
.date{display:block;color:var(--burg);margin:15px 0 6px;font-size:14px}
.match span{color:#666;font-size:12px}
.news{padding:7px 0;border-bottom:1px solid var(--line)}
.news b{display:block;font-size:15px}
.news small{color:#777;font-size:12px}
.more{display:inline-block;margin-top:11px;color:var(--burg);font-weight:800;font-size:12px}
table{width:100%;border-collapse:collapse;font-size:10px}
th,td{text-align:left;padding:5px 3px;border-bottom:1px solid var(--line)}
th{font-size:8px;text-transform:uppercase}
.ours{background:#d9f2fb;color:var(--burg);font-weight:900}

/* quick links */
.quick{margin-top:14px;background:linear-gradient(90deg,#71c6e6,#b7ebfa);padding:17px 0 14px}
.quickgrid{display:grid;grid-template-columns:repeat(6,1fr);max-width:1500px;width:100%;margin:0 auto}
.quickgrid a{text-align:center;padding:2px 5px}
.quickgrid i{display:flex;width:40px;height:40px;background:var(--burg);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-style:normal;font-size:17px;margin:0 auto 5px}
.quickgrid b{display:block;font-size:12px}
.quickgrid small{color:#444;font-size:11px}

.footer{background:#111;color:#aaa;padding:25px 0;margin-top:0}.footer strong{color:#fff}.footer p{margin:5px 0 0}
.innerpage{min-height:500px;padding-top:35px;padding-bottom:50px;background:#fff}

@media(max-width:1100px){
    .hero{width:100%;grid-template-columns:2fr 1fr}
    .headerinner{height:auto;min-height:69px;padding-top:7px;padding-bottom:7px}
    .mainnav{margin-left:auto}
    .mainnav ul.menu,.mainnav ul{flex-wrap:wrap;justify-content:flex-end}
    .hero h1{font-size:46px}
}
@media(max-width:760px){
    .wrap{padding:0 15px}
    .headerinner{display:block}
    .brand{padding:3px 0 8px}
    .brand strong{font-size:21px}
    .mainnav{overflow:auto;justify-content:flex-start}
    .mainnav ul.menu,.mainnav ul{flex-wrap:nowrap;justify-content:flex-start}
    .mainnav a{font-size:10px;padding:9px 7px}
    .hero{grid-template-columns:1fr;height:auto}
    .hero-photo{height:auto}.hero-photo img{width:100%;height:auto;object-fit:contain}
    .hero-panel{min-height:300px;padding:35px 28px}
    .hero h1{font-size:48px}
    .cards{grid-template-columns:1fr}
    .three{padding-left:15px;padding-right:15px}
    .quickgrid{grid-template-columns:repeat(3,1fr);gap:14px 0}
}
@media(max-width:450px){
    .brand strong{font-size:18px}.brand small{font-size:8px;letter-spacing:3px}.crest{width:42px;height:49px;flex-basis:42px}
    .hero-photo{height:auto}.hero-photo img{width:100%;height:auto;object-fit:contain}.hero h1{font-size:41px}.quickgrid{grid-template-columns:repeat(2,1fr)}
}

/* Drupal blocks */
.mainnav .block-menu,.mainnav .block-system-menu-block,.hero .block,.three .block,.quick .block{margin:0}

/* Editable front-page block regions */
.three .card > .block { margin:0; }
.three .card > .block > h2 { background:var(--burg);color:#fff;font-size:18px;line-height:1;margin:0;padding:11px 12px;font-weight:900; }
.three .card > .block > .content { padding:18px 16px; }


/* Larger typography for Drupal Views / Latest News inside front cards */
.three .card .views-field-title,
.three .card .views-field-title a { font-size:15px; line-height:1.25; font-weight:800; color:var(--ink); }
.three .card .views-field-field-category,
.three .card .views-field-created { font-size:12px; line-height:1.3; color:#777; }

.view-all-news {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    color: #850018;
    text-decoration: none;
    margin:0 0 20px 20px;
}

.view-all-news:hover {
    color: #57000f;
}
.ours{
    background: rgb(223, 244, 252);
    color: var(--burg);
    font-weight: 900;
}

/* ===== GALLERY ALBUMS ===== */

.view-gallery-albums{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0 20px;
    justify-content:stretch;
    align-items:start;
}

.view-gallery-albums > .contextual{
    position:absolute;
    top:0;
    right:0;
    z-index:10;
}

.view-gallery-albums .views-row{
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 1px 5px #0001;
    overflow:hidden;
}

/* Remove Drupal UL/LI bullets and default spacing */
.view-gallery-albums .views-field-field-images ul,
.view-gallery-albums .views-field-field-images ol{
    list-style:none;
    margin:0;
    padding:0;
}

.view-gallery-albums .views-field-field-images li{
    list-style:none;
    margin:0;
    padding:0;
}

/* Image fills the complete album box */
.view-gallery-albums .views-field-field-images{
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
    overflow:hidden;
}

.view-gallery-albums .views-field-field-images .field-content,
.view-gallery-albums .views-field-field-images .field__content,
.view-gallery-albums .views-field-field-images .field__item,
.view-gallery-albums .views-field-field-images a{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
}

.view-gallery-albums .views-field-field-images img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    object-position:center;
    margin:0;
    padding:0;
    border:0;
    transition:transform .25s ease;
}

/* Slight zoom when the album image is a link */
@media (hover:hover) and (pointer:fine){
    .view-gallery-albums .views-field-field-images a:hover img{
        transform:scale(1.025);
    }
}

/* Album title */
.view-gallery-albums .views-field-title{
    margin:0;
    padding:0;
}

.view-gallery-albums .views-field-title .field-content{
    margin:0;
    padding:0;
}

.view-gallery-albums .views-field-title a{
    display:block;
    width:100%;
    margin:0;
    background:var(--burg);
    color:#fff !important;
    padding:12px 14px;
    font-size:clamp(14px,1.35vw,14px);
    line-height:1.15;
    min-height:44px;
    display:flex;
    align-items:center;
    font-weight:900;
    text-transform:uppercase;
    text-decoration:none;
}

.view-gallery-albums .views-field-title a:hover{
    background:var(--burg-dark);
    color:#fff !important;
}

@media(max-width:950px){
    .view-gallery-albums{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .view-gallery-albums{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
        padding:0 15px;
    }
}

@media(max-width:600px){
    .view-gallery-albums{
        grid-template-columns:1fr;
        gap:18px;
        padding:0 12px;
    }

    .view-gallery-albums .views-row{
        width:100%;
    }

    .view-gallery-albums .views-field-title a{
        padding:12px 14px;
        font-size:16px;
    }
}

/* =====================================================
   GALLERY NODE
   ===================================================== */

.node--type-gallery .field__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 25px 0 40px;
    padding: 0;
    box-sizing: border-box;
}

/* Each photo */
.node--type-gallery .field__items .contextual-region {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #d7dfe3;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    overflow: hidden;
    box-sizing: border-box;
}

/* Drupal contextual menu */
.node--type-gallery .field__items .contextual-region > .contextual {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

/* All inner wrappers */
.node--type-gallery .field__items .contextual-region > div:not(.contextual),
.node--type-gallery .field__items .contextual-region > div > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Actual image */
.node--type-gallery .field__items .contextual-region img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 6 / 3;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* =====================================================
   TABLET
   ===================================================== */
@media only screen

  and (min-width: 1100px)

  and (max-width: 1400px)

  and (orientation: landscape) {

    

 .node--type-gallery .field__items {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;

    }
        .node--type-gallery .field__items {
        min-width: 0;
        max-width: 100%;
    }
        .node--type-gallery .field__items img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    

}

@media (max-width: 1200px) {

    .node--type-gallery .field__items {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;

    }
        .node--type-gallery .field__items {
        min-width: 0;
        max-width: 100%;
    }
        .node--type-gallery .field__items img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

}


@media (max-width: 1000px) {

    .node--type-gallery .field__items {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 14px;
    }
    .node--type-gallery .field__items {
        min-width: 0;
        max-width: 100%;
    }

    .node--type-gallery .field__items img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

}

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

@media (max-width: 700px) {

    .node--type-gallery .field__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }
    .node--type-gallery .field__items {
        min-width: 0;
        max-width: 100%;
    }

    .node--type-gallery .field__items img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

}

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

@media (max-width: 450px) {

    .node--type-gallery .field__items {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 6px;
    }

    .node--type-gallery .field__items {
        min-width: 0;
        max-width: 100%;
    }

    .node--type-gallery .field__items img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

}

/* =====================================================
   BASIC PAGE - right aligned inline images
   ===================================================== */

.node--type-basic-page p:has(> img[align="right"]),
.node--type-basic-page p:has(> img[align="left"]) {
    display: flow-root;
}

/* Keep the original right alignment */
.node--type-basic-page img[align="right"] {
    float: right;
    max-width: 100%;
    height: auto;
    margin-left: 20px;
    margin-bottom: 10px;
}

/* Keep left aligned images */
.node--type-basic-page img[align="left"] {
    float: left;
    max-width: 100%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* Mobile */
@media (max-width: 700px) {
    .node--type-basic-page img[align="right"],
    .node--type-basic-page img[align="left"] {
        float: none;
        display: block;
        max-width: 100%;
        height: auto;
        margin: 15px auto;
    }
}
/* Keep footer below floated images in Basic Pages */
.node--type-basic-page {
    display: flow-root;
}

.node--type-basic-page > div {
    display: flow-root;
}

.footer {
    clear: both;
}

.brand .club-crest{
    display:block;
    width:auto;
    height:64px;
    max-width:260px;
    object-fit:contain;
    object-position:left center;
}

@media(max-width:760px){
    .brand .club-crest{
        height:56px;
        max-width:230px;
    }
}

.all-news .views-row{border-bottom: 2px solid #8b0000;}

/* Front page Gallery block */

/* Front page Gallery card */
.card.gallery {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.card.gallery > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.card.gallery h2 {
    flex: 0 0 auto;
}

.card.gallery .cardbody {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.card.gallery .gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-image: url('/themes/custom/spartak/images/gallery_block.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}