/**
 * Kobol catalog styles
 * 
 * @package    Kobol
 * @subpackage Realm Catalog
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 * 
 */

.universe_list                { text-align: center; }
.universe_list .universe_logo { width: 100%; max-width: 256px; }
.universe_list .excerpt       { height: 4em; font-style: italic; margin-bottom: 20px; }

.listing_section { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; }

@media all and (max-width: 480px) {
    .listing_section { display: block; }
    
}

.kc_listing .kc_item { margin-bottom:  20px; }

@media all and (min-width: 710px)
{
    .multicol.cols-4 .col { width: calc(25% - 26px); }
}

.filter_control .fa { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

.listing_section .logo_col img { width: 100%; }

.data_table    { width: 100%; border-collapse: collapse; }
.data_table th ,
.data_table td { padding: 5px; font-family: arial, helvetica, sans-serif;
                 font-size: 1em; line-height: normal; text-align: left; vertical-align: top; }
.data_table th { padding-left:  0; width: 20%; }
.data_table td { padding-right: 0; width: 80%; }
.data_table ul { margin-top: 0; margin-bottom: 0; padding-left: 1em; }
.data_table li { }

.data_table tr             ,
.data_table tr             { border-bottom: 2px dotted silver; }
.data_table tr:first-child ,
.data_table tr:first-child { border-top: 2px dotted silver; }

.listing_section .content_col { display: grid; grid-template-rows: 1fr auto; }

.kc_listing                       { text-align: center; }
.kc_listing h1, .kc_listing h2    { text-align: left; }
.kc_listing .kc_item              { text-align: left; }
.kc_listing .title                { margin-bottom: 5px; }
.kc_listing .excerpt              { font-family: arial, helvetica, sans-serif; font-size: 0.9em; line-height: 1em;
                                    font-style: italic; }
.kc_listing .excerpt   *          { margin: 0; }
.kc_listing .thumbnail            { width: 100%; }
.kc_listing .kc_item .attributes  { font-family: arial, helvetica, sans-serif; font-size: 0.9em; line-height: 1em; }
.kc_listing .kc_item .attribute   { margin-bottom: 2px; padding: 2px; 
                                    max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

h1.with_logo { position: relative; padding-left: 2.5em; }
h1.with_logo .universe_logo { position: absolute; left: 0; top: -0.5em; height: 2em; }

.board_shot img { width: 100%; }

.attacks li .icon { position: relative; vertical-align: top; height: 1.2em; }

.cardspec svg { width: 100%; height: unset; }

.storybook_step { display: grid; grid-template-columns: auto 1fr; gap: 10px; }

.storybook_step .step_content     { font-style: italic; }
.storybook_step .step_content > * { margin-top: 0; margin-bottom: 0; }

.book_tree      .excerpt          { font-style: italic; }
.book_tree      .excerpt      > * { margin-top: 0; margin-bottom: 0; }