/* --------------------------------------------------------- */
/* --- RULES --- */
*{
box-sizing: border-box;
}
:root {
    /*Background Colors*/
    --bg-site-dark:     #272727;
    --bg-card-dark:     #141414;
    /*Font Colors*/
    --font-dark:        #ffffff;
    /*Other Colors*/
    --shadow:           rgba(0, 0, 0, 0.5);
    /*Card Y Size*/
    --cardY:            150px;
}
/* --------------------------------------------------------- */
/* --- FONTS --- */
@font-face {font-family: "Regular"  ; src: url('font/Roboto-Regular.ttf');}
@font-face {font-family: "Black"    ; src: url('font/Roboto-Black.ttf');}
@font-face {font-family: "C-Black"  ; src: url('font/Roboto_Condensed-Black.ttf')}
@font-face {font-family: "Thin"     ; src: url('font/Roboto-Thin.ttf');}
@font-face {font-family: "Light"    ; src: url('font/Roboto-Light.ttf');}
@font-face {font-family: "Bold"     ; src: url('font/Roboto-Bold.ttf');}
/* --------------------------------------------------------- */
/* --- BODY --- */
/* --Body Main -- */
body {
    background-color:   var(--bg-site-dark);
    /*                  V       H*/
    margin:             0       20px;
    /*Font Styling*/
    font-family:        "Regular";
    font-size:          16px;
}
/* --------------------------------------------------------- */
/* --- HEADER --- */
/* -- Header Container -- */
.header-container {
    /*Alignment*/
    display:                    flex;
    align-items:                center;
    justify-content:            space-between;
    padding:                    5px     20px;
    /*Size & Position*/
    margin:                     0px     auto    0px     auto;
    max-width:                  1150px;
    min-width:                  800px;
    /*Appearance*/
    background-color:           var(--bg-card-dark);
    border-radius:              0       0       15px    15px;
    box-shadow:                 0px     0px     10px    var(--shadow);
    text-decoration:            none;
    /*Entry Animation*/
    animation-name:             transformDown;
    animation-duration:         0.25s;
    animation-timing-function:  ease-out;
}
/* -- Header Groups -- */
.header-text-group {
    display:                    flex;
    align-items:                baseline;
    gap:                        10px;
    color:                      var(--font-dark);
}
.header-image-group {
    display:                    flex;
    align-items:                center;
    gap:                        5px;
    /*Disable selection*/
    -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
/* -- Header Content -- */
.header-title {
    font-family:            "Black";
    font-size:              1em;
}
.header-subtitle {
    font-family:            "Light";
    font-size:              1em;
}
.header-image {
    display:                block;
    object-fit:             cover;
    padding:                2px;
    width:                  25px;
    height:                 25px;
    transition:             transform   0.25s   ease;
}
.header-construction {
    font-family:            "Black";
    font-size:              1em;
    color:                  red;
}
/* --------------------------------------------------------- */
/* --- COLUMN --- */
/* -- Column Container -- */
.column-container {
    display:        flex;
    margin:         20px    auto;
    max-width:      1150px;
    min-width:      800px;
    height:         500px;
    gap:            20px;
}
/* -- Column Main -- */
.column {
    /*Alignment*/
    display:                    flex;
    flex:                       1 1 25%;
    /*Appearance*/
    border-radius:              15px;
    background-size:            auto 100%;  /*Size of background image*/
    box-shadow:                 0px 0px 10px var(--shadow);
    overflow:                   hidden;     /*Hide overflowing text*/
    /*Animations*/
        /*Interaction*/
    /*                          Prpty       Lngth   Timing*/
    transition:                 transform   0.5s    ease,   /*Mouse hover*/
                                flex        0.5s    ease;   /*Widen column*/
    position:                   relative;                   /*Dimming effect position*/
        /*Page Load*/
    animation-name:             fadeIn;
    opacity:                    0;                          /*Frame 0 opacity*/
    animation-duration:         0.75s;
    animation-timing-function:  ease-out;
    animation-fill-mode:        forwards;                   /*Retain last keyframe value*/
    /*Text Styling & Alignment*/
    justify-content:            flex-start;
    align-items:                flex-start;
    text-decoration:            none;
    color:                      var(--font-dark);
    /*                          V       H*/
    padding:                    20px    20px;

    /*Disable selection*/
    -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
/* -- Column Contents -- */
.column .column-text {
    position:       relative;               /*Dimming effect position*/
    z-index:        2;                      /*Dimming effect layer*/

    padding-top:    400px;                  /*Default padding*/
    transition:     padding-top 0.5s ease;  /*Padding animation to the top*/
}
/*Column Text Styling*/
.column-text span {                         /*Column header*/
    font-family:    "Light";
    font-size:      1.9em;
    display:        block;

    line-height:    1;
    text-shadow:    0px 0px 20px #000000;
    margin-bottom:  5px;
}
.column-text p {                            /*Column inactive paragraph*/
    font-family:    "Regular";
    font-size:      1em;
    margin:         0;

    text-shadow:    0px 0px 20px #000000;
    text-align:     justify;
}
.column-text .column-description-content {  /*Column active paragraph*/
    font-family:    "Regular";
    font-size:      1em;
    margin-bottom:  0px;
    margin-top:     -20px;                                  /*Funny bug fix because of main .column padding*/

    opacity:        0;
    visibility:     hidden;
    overflow:       hidden;
    max-height:     0;
    /*              Prpty       Lngth   Timing      Delay*/
    transition:     opacity     0.3s    ease-out    0.0s,   /*Descrition fadein duration/delay from active*/
                    visibility  0.3s    ease-out    0.0s,
                    max-height  0.3s    ease-out    0.0s;
}
/*Dimming Layer*/
.column::before {
    content: "";

    z-index: 1;                                     /*Dimming effect layer*/
    position:           absolute;                   /*Inherit parent*/
    top:                0;
    left:               0;
    right:              0;
    bottom:             0;

    background-color:   rgba(0, 0, 0, 0);           /*Dimming before column activation*/
    transition:         background-color 0.5s ease; /*Dimming duration*/

}

/*Dimming Effect & Text Animation*/
.column-description-preview {
    /*          Prpty       Lngth   Timing      Delay*/
    transition: opacity     0.3s    ease-out    0.3s,   /*Preview fadein duration/delay from active*/
                visibility  0.3s    ease-out    0.3s;
}
body.content-mode .column.active .column-description-preview {
    opacity:    0;
    visibility: hidden;
    /*          Prpty       Lngth   Timing      Delay*/
    transition: opacity     0.3s    ease-out    0.0s,   /*Preview fadeout duration/delay from inactive*/
                visibility  0.3s    ease-out    0.0s;
}
body.content-mode .column.active::before {
    background-color:       rgba(0, 0, 0, 0.6);         /*Dimming ammountafter column activation*/
}
body.content-mode .column.active .column-text {
    padding-top:            0;                          /*Top padding after column activation*/
}
body.content-mode .column.active .column-description-content {
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    /*          Prpty       Lngth   Timing      Delay*/
    transition: opacity     0.3s    ease-out    0.3s,   /*Descrition fadein duration/delay from active*/
                visibility  0.3s    ease-out    0.3s,
                max-height  0.3s    ease-out    0.3s;
}

/* -- Individual Columns -- */
.column:nth-child(1) {
    background-image:   url("media/lens.webp");
    animation-delay:    0.1s;
}
.column:nth-child(2) {
    background-image:   url("media/mix.webp");
    animation-delay:    0.15s;
}
.column:nth-child(3) {
    background-image:   url("media/drums.webp");
    animation-delay:    0.2s;
}
.column:nth-child(4) {
     background-image:  url("media/about.webp");
    animation-delay:    0.25s;
}
/* --------------------------------------------------------- */
/* --- CONTENT DISPLAY --- */
/* -- Content Display Main -- */
.content-display {
    max-width:          1150px;
    min-width:          800px;
    /*                  Up      Rgt     Btm     Lft*/
    margin:             20px    auto    0       auto;
}
/*Hide Content Panels By Default*/
.content-panel {
    display:            none;
    /*                  Up      Rgt     Btm     Lft*/
    padding:            20px    20px    10px    20px;
    text-align:         justify;
    background-color:   var(--bg-card-dark);
    color:              var(--font-dark);
    border-radius:      15px;
    /*                  H       V       Blur    Clr*/
    box-shadow:         0px     0px     10px    var(--shadow);

    /*                  Prpty   Lngth   Timing*/
    animation:          fadeIn  0.5s    ease-out;   /*Content display fade inanimation*/
}
/* -- Content Display Contents -- */
/*Content Display Text*/
.content-text-bold {
    font-family:            "Bold";
}
.content-text-group {
    display:                flex;
    color:                  var(--font-dark);
    align-items:            baseline;
    gap:                    10px;
}
.content-title {    /*Content text heading*/
    font-family:            "Bold";
    font-size:              1.9em;
}
.content-subtitle {
    font-family:            "Thin";
    font-size:              1.9em;
}
/*Content Display Card*/
.card-grid-2 {
    display:                grid;
    grid-template-columns:  repeat(2, 1fr);
    gap:                    10px;
    margin-top:             20px;
    margin-bottom:          20px;
}
.card-grid-4 {
    display:                grid;
    grid-template-columns:  repeat(4, 1fr);
    gap:                    10px;
    margin-top:             20px;
    margin-bottom:          20px;
}
.card-main-A {
    display:                flex;
    flex-direction:         column;
    background-color:       var(--bg-site-dark);
    border-radius:          15px;
    gap:                    10px;
    padding:                10px;
    cursor:                 pointer;
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.5s    ease-out;
    min-height:             120px;
    max-height:             120px;
    /*Disable selection*/
    -webkit-user-select:    none;   /* Safari */
    -moz-user-select:       none;   /* Firefox */
    -ms-user-select:        none;   /* IE/Edge */
    user-select:            none;   /* Standard */
}
.card-main-B {
    background-color:       var(--bg-site-dark);
    position:               relative;
    overflow:               hidden;
    border-radius:          15px;
    gap:                    10px;
    padding:                10px;
    min-height:             120px;
    max-height:             120px;
    align-items:            center;
    align-content:          center;
    z-index:                1;
    color:                  var(--font-dark);
    text-decoration:        none;
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.5s    ease-out;
    /*Disable selection*/
    -webkit-user-select:    none;   /* Safari */
    -moz-user-select:       none;   /* Firefox */
    -ms-user-select:        none;   /* IE/Edge */
    user-select:            none;   /* Standard */
}

.card-main-B::before {
    content:                "";
    position:               absolute;
    top:0;left:0;right:0;bottom:0;
    z-index:                -1;

    background-size:        cover;
    background-position:    center;
    filter:                 blur(10px)
                            brightness(0.5)
                            grayscale(100%);
    transform:              scale(1.1);

    transition: filter 0.5s ease, transform 0.5s ease;
}
.card-main-B:hover .card-main-B-text-group {
    opacity: 0;
    transform: translateY(-5px);
}
.card-main-B-text-group {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.card-main-B:hover::before { /* Remove blur and dimming & reset scale */
    filter:                 blur(0px)
                            brightness(1);
    transform:              scale(1.0);
}

.card-image {
    max-width:              100px;
    min-width:              100px;
    height:                 100px;
    border-radius:          10px;
    background-color:       lightgrey;
}
.card-content-preview {
    display:                flex;
    gap:                    10px;
    /*                      Prpty       Lngth   Timing*/
    transition:             opacity     0.25s   ease-out,
                            visibility  0s      ease-out,
                            max-height  0s      ease-out;
}
.card-content-expanded {
    display:                flex;
    gap:                    10px;
    opacity:                0;              /*Hide by default*/
    visibility:             hidden;
    max-height:             0;
    overflow:               visible;
    margin-top:             -10px;          /*Funny bug fix because of main padding*/
    text-align:             left;
    text-shadow:            0px 0px 15px #000000;
}
.card-main-A.active .card-content-preview {
    /* Fade out and collapse */
    opacity:                0;
    visibility:             hidden;
    max-height:             0px;
}
.card-main-A.active .card-content-expanded {
    /* Fade in and expand */
    opacity:                1;
    visibility:             visible;
    max-height:             100px;
    /*                      Prpty       Lngth   Timing*/
    transition:             opacity     0.25s   ease-out,
                            visibility  0s,
                            max-height  0s      ease-out;
}
/*Card Text & Sidebar*/
.card-text-bold {
    font-family:            "C-Black";
    margin:                 0;
    font-size:              1.25em;
}
.card-text-small {
    font-family:            "Thin";
    margin:                 0;
    font-size:              0.9em;
}
.card-text-regular {
    font-family:            "Regular";
    margin:                 0;
}
.card-main-A-text-group {
    text-align:             justify;
    gap:                    5px;
}
.card-main-B-text-group {
    text-align:             center;
}
.expanded-text-group {
    flex:                   1;
    display:                flex;
    gap:                    10px;
    text-align:             left;
}
.expanded-sidebar {
    display:                flex;
    flex:                   0 0 45px;
    flex-direction:         column;

    gap:                    10px;
}
.link-csfd {
    width:                  45px;
    height:                 45px;
    border-radius:          10px;
    background-image:       url("media/icons/csfd.webp");
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.25s   ease;
}
.link-imdb {
    width:                  45px;
    height:                 45px;
    border-radius:          10px;
    background-image:       url("media/icons/imdb.webp");
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.25s   ease;
}
.link-csfd-inactive {
    width:                  45px;
    height:                 45px;
    border-radius:          10px;
    background-image:       url("media/icons/csfd_BW.webp");
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.25s   ease;
    cursor: no-drop;
}
.link-imdb-inactive {
    width:                  45px;
    height:                 45px;
    border-radius:          10px;
    background-image:       url("media/icons/imdb_BW.webp");
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.25s   ease;
    cursor: no-drop;
}
/* -- JavaScript Integration -- */
.content-panel.active {
    display:                block;
}
/* -- Individual Card Images -- */
/* - FILM CARDS - */
 /* FEATURE LENGTH */
#film-content       div:nth-of-type(2)      .card-main-A:nth-child(1)     .card-image {
background-image:   url("media/thumb/jackpot.webp");
}
#film-content       div:nth-of-type(2)      .card-main-A:nth-child(1).active {
background-image:   linear-gradient(to right,   #853c19,#d49639,#853c19);
}
#film-content       div:nth-of-type(2)      .card-main-A:nth-child(2)      .card-image {
background-image:   url("media/thumb/srnky.webp");
}
#film-content       div:nth-of-type(2)      .card-main-A:nth-child(2).active {
background-image:   linear-gradient(to right,   #c78a33,#236c5b);
}
/* SHORT LENGTH */
#film-content       div:nth-of-type(4)      .card-main-A:nth-child(1)     .card-image {
background-image:   url("media/thumb/kumstyri.webp");
}
#film-content       div:nth-of-type(4)      .card-main-A:nth-child(1).active {
background-image:   linear-gradient(to right,   #1a2023,#545c60);
}
#film-content       div:nth-of-type(4)      .card-main-A:nth-child(2)     .card-image {
background-image:   url("media/thumb/pokoj.webp");
}
#film-content       div:nth-of-type(4)      .card-main-A:nth-child(2).active {
background-image:   linear-gradient(to right,   #d4b27e,#b1a780,#b1a780);
}
#film-content       div:nth-of-type(4)      .card-main-A:nth-child(3)     .card-image {
background-image:   url("media/thumb/hans.webp");
}
#film-content       div:nth-of-type(4)      .card-main-A:nth-child(3).active {
background-image:   linear-gradient(to right,   #a29484,#cdc3b7);
}
/* SERIES*/
#film-content       div:nth-of-type(6)      .card-main-A:nth-child(1)     .card-image {
background-image:   url("media/thumb/nsdm.webp");
}
#film-content       div:nth-of-type(6)      .card-main-A:nth-child(1).active {
background-image:   linear-gradient(to right,   #1d6164,#c8a26b,#324f2b);
}
#film-content       div:nth-of-type(6)      .card-main-A:nth-child(2)     .card-image {
background-image:   url("media/thumb/d&j.webp");
}
#film-content       div:nth-of-type(6)      .card-main-A:nth-child(2).active {
background-image:   linear-gradient(to right,   #585858,#695457,#a09e9f);
}
#film-content       div:nth-of-type(6)      .card-main-A:nth-child(3)     .card-image {
background-image:   url("media/thumb/krematorium.webp");
}
#film-content       div:nth-of-type(6)      .card-main-A:nth-child(3).active {
background-image:   linear-gradient(to right,   #601c07,#822e14,#d08e39);
}
/* INSCENATIONS */
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(1)     .card-image {
background-image:   url("media/thumb/adam.webp");
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(1).active {
background-image:   linear-gradient(to right,   grey,lightgrey,grey);
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(2)     .card-image {
background-image:   url("media/thumb/lakomec.webp");
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(2).active {
background-image:   linear-gradient(to right,   #625e5d,#4a4a4c,#3c3d40,#333539,#3b3b3d,#4a4a4c,#5d5757);
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(3)     .card-image {
background-image:   url("media/thumb/sonata.webp");
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(3).active {
background-image:   linear-gradient(to right,   #c97f4e,#45414f,#302e3e);
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(4)     .card-image {
background-image:   url("media/thumb/blbec.webp");
}
#film-content       div:nth-of-type(8)      .card-main-A:nth-child(4).active {
background-image:   linear-gradient(to right,   #302e3e,#45414f,#302e3e);
}
/* MISCELLANEOUS */
#film-content       .card-main-B:nth-child(1)::before   {background-image:   url("media/thumb/mojmir_pohovor.webp");}
#film-content       .card-main-B:nth-child(2)::before   {background-image:   url("media/thumb/ster.webp");}
#film-content       .card-main-B:nth-child(3)::before   {background-image:   url("media/thumb/teritorium.webp");}
#film-content       .card-main-B:nth-child(4)::before   {background-image:   url("media/thumb/boris1.webp");}
#film-content       .card-main-B:nth-child(5)::before   {background-image:   url("media/thumb/olymp.webp");}
#film-content       .card-main-B:nth-child(6)::before   {background-image:   url("media/thumb/boris2.webp");}
#film-content       .card-main-B:nth-child(7)::before   {background-image:   url("media/thumb/prezident.webp");}
#film-content       .card-main-B:nth-child(8)::before   {background-image:   url("media/thumb/obs.webp");}
#film-content       .card-main-B:nth-child(9)::before   {background-image:   url("media/thumb/bestof1.webp");}
#film-content       .card-main-B:nth-child(10)::before  {background-image:   url("media/thumb/bigdyl.webp");}
#film-content       .card-main-B:nth-child(11)::before  {background-image:   url("media/thumb/3dny.webp");}
#film-content       .card-main-B:nth-child(12)::before  {background-image:   url("media/thumb/kumtrailer.webp");}
#film-content       .card-main-B:nth-child(13)::before  {background-image:   url("media/thumb/stvoriteltrailer.webp");}
#film-content       .card-main-B:nth-child(14)::before  {background-image:   url("media/thumb/pokojtrailer.webp");}
#film-content       .card-main-B:nth-child(15)::before  {background-image:   url("media/thumb/lakomectrailer.webp");}
#film-content       .card-main-B:nth-child(16)::before  {background-image:   url("media/thumb/d&jtrailer.webp");}
#film-content       .card-main-B:nth-child(17)::before  {background-image:   url("media/thumb/novedivadlo.webp");}
#film-content       .card-main-B:nth-child(18)::before  {background-image:   url("media/thumb/blbectrailer.webp");}
/* --------------------------------------------------------- */
/* --- ANIMATIONS --- */
/* -- Interaction Animations -- */
/*Column Animations*/
.column:hover {             /*On hover*/
    transform:              translateY(-5px) scale(1.0);
}
.column:active {            /*On click*/
    transform:              translateY(-5px) scale(0.98);
    transition-duration:    0.1s;
}
/*Header Image Animations*/
.header-image:hover {       /*On hover*/
    transform:              scale(1.1);
}
.header-image:active{       /*On click*/
    transform:              scale(1.0);
}
/*Card Animations*/
.card-main-A:hover {      /*On hover*/
    transform:              translateY(-5px) scale(1.0);
}
.card-main-A:not(.prevent-active):active {
    transform:              translateY(-5px) scale(0.98);
    transition-duration:    0.1s;
}
a.card-main-B:hover {      /*On hover*/
    transform:              translateY(-5px) scale(1.0);
}
a.card-main-B:active{
    transform:              translateY(-5px) scale(0.98);
    transition-duration:    0.1s;
}
/*Card Image Animations*/
.link-csfd:hover {       /*On hover*/
    transform:              scale(1.05);
}
.link-csfd:active{       /*On click*/
    transform:              scale(1.0);
    transition-duration:    0.1s;
}
.link-imdb:hover {       /*On hover*/
    transform:              scale(1.05);
}
.link-imdb:active{       /*On click*/
    transform:              scale(1.0);
    transition-duration:    0.1s;
}
/* -- Content Mode Animations -- */
body.content-mode .column {
    /*                      Grow  Shrink  Basis*/
    flex:                   1     1       250px;    /*Minimum passive column size*/
}
body.content-mode .column.active {
    /*                      Grow  Shrink  Basis*/
    flex:                   10    1       50%;
    align-items:            flex-start;             /*Align active column items to the top*/
}
/* --------------------------------------------------------- */
/* --- KEYFRAMES --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes transformDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}