@import "css/common.css";

:root
{  --episode-gap: 8px;
}
.episode-header
{  display: flex;  
   flex-direction: row;  
   align-items: top;                            /* vertical */   
   gap: 0px;                                  
   background-color: var(--debug) cyan;
   padding-right: 10px;
   outline: 2px solid black; 
}
.episode-image img
{  display: block;                              /* do not allot space for descenders */
   width: var(--episode-image-width);
   height: auto;
}
.episode-information
{  width: 100%;
   margin-top: var(--episode-gap);
   margin-left: var(--episode-gap);
   background-color: var(--debug) lightGreen;
   color: black;
}
.episode-container
{  background-color: var(--debug) lightGray;   
   padding-bottom: 8px;
   outline: 2px solid black;
}
.episode
{  display: grid;   
   grid-template-columns: calc( 10ch + var(--episode-gap) ) 1fr;              
   /* 10 character date yyyy-mm-dd */ 
   color: var(--unclickable);                                        /* for header text */
   background-color: var(--debug) lightGreen;
}
.episode-date,
.episode-title
{  display: block;
   margin-left: var(--episode-gap);
   background-color: var(--debug) #E0E0E0;
   overflow: hidden;
}
.role-container
{  display: grid;
   grid-template-columns: repeat(3, 1fr);    
   justify-items: center; 
   background-color: var(--debug) lightGreen;
   gap: var(--episode-gap);
   padding-bottom: 0px;
   outline: 2px solid black;
}
.role
{  display: flex;
   flex-direction: column;
   width: 100%;
   color: black;                  
   background-color: var(--debug) lightGray;
   align-items: center;                          /* horizontally  */
   padding-top: 8px;  
   padding-bottom: 8px;
}