/* STYLING FOR ALL BLOG CONTROLLER ACTIONS */

* {
    /* Give full control over margins and block sizes */
    box-sizing: border-box;
    margin: 0;
}

html {
    --blog-header-width-landscape: 80%;
    --blog-header-width-portait: 100%;
    
    
    --blog-content-width-landscape: 80%;
    --blog-content-width-portait: 100%;
    
    --blog-content-space-after: 1rem;   /* Some blog elements will scale based on this value */
    --blog-image-padding: 1rem;         /* Used for uniform space of images floated/contained in grids */

    /* Set max size to wrap text at */
    --image-block-max-width: 800px;
    --image-block-max-height: 600px;

    /* YouTube provided dimensions */
    --youtube-video-width: 560px;
    --youtube-video-height: 315px;
}

body {
    font-size: 100%;   /* Allow for uniform text sizing across browsers (pixels / 16 = em) */
}

/* BLOG - INDEX */

#blog-logo {
    height: auto;
    margin: 0 auto var(--post-element-spacing);

    display: block;
}

.blog-content {   /* Grid to contain dynamic list of blog article cards */
    width: fit-content;
    max-width: 100%;
    margin: auto;
    border: solid 2px var(--nav-border);
    padding: var(--blog-card-grid-spacing);

    background-color: var(--nav-link-active);   /* Styled to match theme */

    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, var(--blog-card-square-length));

    gap: var(--blog-card-grid-spacing) var(--blog-card-grid-spacing);

    --blog-card-square-length: 300px;
    --blog-card-grid-spacing: 2rem;
}
.blog-content .blog-card {   /* Blog card styling */
    height: var(--blog-card-square-length);   /* Create a perfect square */
    border: solid 2px var(--nav-border);
    background-color: var(--nav-link);        /* Styled to match theme */

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.blog-card:hover {   /* Custom styling: colour effect to replace normal link styling */
    background-color: var(--main-theme-05);
}
.blog-content .blog-card figcaption {   /* Blog article title styling */
    padding: 0.5rem 0;

    text-align: center;
    font-weight: bold;
}
.blog-content .blog-card figcaption span {   /* Remove bold styling from date */
    font-weight: normal;
}
.blog-content .blog-card img {   /* Blog article title image styling */
    width: 75%;
    height: auto;
    margin: auto;
}
.blog-content .blog-card p {   /* Blog article intro styling */
    padding: 0 0.5rem;
    text-align: center;
    font-style: italic;
}

a.blog-card-link {   /* Remove link styling to allow custom styling */
    text-decoration: none;
}

a.blog-card-link:hover,
a.blog-card-link:active {   /* Remove link hover styling to allow custom styling */
    color: var(--text-main);
    text-decoration: none;
}


/* BLOG - BLOG POSTS */

.blog-pagination {   /* Common styling for log pagination bars */
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    text-align: center;
}
.blog-pagination a {
    border: solid var(--hover-border-size) transparent;   /* Designate space to prevent on hover "jump" effect */
    padding: 0.25rem;

    --hover-border-size: 2px;
}
.blog-pagination a:hover {
    border: solid var(--hover-border-size) var(--nav-border);
    background-color: var(--nav-link-active);
    color: var(--text-accent);
    font-weight: normal;
}

#blog-title-block {   /* Blog meta data container */
    margin: var(--blog-content-space-after) auto var(--blog-content-space-after);
    border: solid 2px var(--nav-link-active);
}
#blog-title-block #blog-title {   /* Blog title & intro */
    padding: 0.5rem 1rem;
    background-color: var(--nav-link-active);
}
#blog-title-block #blog-title h2 {   /* Customize look of blog intro */
    font-size: 1.25rem;
    font-style: italic;
    font-weight: normal;
    text-align: center;
}
#blog-title-block #blog-details-block {   /* Blog author/topics/date */
    background-color: var(--nav-border);
    color: var(--text-accent);
    font-family: var(--font-family-blog-heading), monospace;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#blog-title-block #blog-details-block span#blog-author,
#blog-title-block #blog-details-block span#blog-topic,
#blog-title-block #blog-details-block span#blog-date {   /* Common padding for span elements */
    display: inline-block;
    padding: 0.5rem 1rem;   /* TODO: Check if you want to lock styling to #blog-title values */
}
#blog-title-block #blog-details-block #blog-author,
#blog-title-block #blog-details-block #blog-date {
    flex: 1;   /* Default sizing */
}
#blog-title-block #blog-details-block #blog-topic {
    border-left: solid 2px var(--nav-link-active);
    border-right: solid 2px var(--nav-link-active);
    background-color: var(--nav-link);
    color: var(--text-main);
    flex: 2;   /* Ensure topic is twice as large as neighbour elements */
}
#blog-title-block #blog-details-block #blog-date {
    text-align: right;   /* Show date on the right hand side */
}

#blog-feature-image-block {   /* Blog feature image container  */
    width: fit-content;
    margin: 0 auto var(--blog-content-space-after);
    border: solid 2px var(--nav-link-active);
}
#blog-feature-image-block .image-container {   /* Image container caps image size */
    max-width: var(--image-block-max-width);
    max-height: var(--image-block-max-height);
    margin: auto;
}
#blog-feature-image-block .image-container img {
    width: 100%;
    height: auto;
}
#blog-feature-image-block figcaption {
    max-width: var(--image-block-max-width);   /* Force text to wrap at max image size */
    padding: 0.5rem;
    font-family: var(--font-family-blog-heading), sans-serif;
}

#blog-content {   /* Container for all text/images after blog title and image */
    margin: auto;

    --blog-paragraph-spacing: calc(var(--blog-content-space-after) * 2);   /* Custom spacing for blog paragraphs */
}
#blog-content .blog-block {   /* Blog sections starting with a subheading */
    margin: 0;   /* Force containing paragraphs to create spacing */
}
#blog-content h3 {
    font-family: var(--font-family-blog-heading), sans-serif;
}
#blog-content figure {   /* Common styling for all image containers */
    border: solid 2px var(--nav-link-active);
}
#blog-content figure figcaption {   /* Common styling for all image captions */
    padding: calc(var(--blog-content-space-after) / 4);
}
#blog-content p {   /* Create a more spacious "airy" feel to blog paragraphs */
    margin: 0 0 var(--blog-paragraph-spacing);

    font-family: var(--font-family-blog-heading), sans-serif;
    line-height: 1.5rem;   /* Add extra line spacing */
}
#blog-content .blog-quote {
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
#blog-content img {
    width: 100%;
    height: auto;
}

.image-grid-left,
.image-grid-right {   /* Common styling for grid containers */
    display: grid;
    column-gap: var(--blog-image-padding);
}
.image-grid-left h3,
.image-grid-right h3 {   /* "Title" for grid containers */
    
    grid-column: 1 / 3;   /* Span both columns */
    grid-row: 1 / 2;      /* Positioned in 1st row */
}
.image-grid-left img,
.image-grid-right img {   /* Common styling for grid images */
    width: 100%;
    height: auto;

    grid-row: 2 / 3;      /* Same row as content */
    align-self: center;
}
.image-grid-left-content,
.image-grid-right-content {   /* Common styling for grid content */
    grid-row: 2 / 3;      /* Same row as image */
}

.image-grid-left {
    grid-template-columns: 1fr 4fr;   /* Designate leftmost column for image */
}
.image-grid-left img {
    grid-column: 1 / 2;   /* Position image in leftmost column */
}
.image-grid-left-content {
    grid-column: 2 / 3;
}
.image-grid-right {
    grid-template-columns: 4fr 1fr;   /* Designate rightmost column for image */
}
.image-grid-right img {
    grid-column: 2 / 3;   /* Position image in rightmost column */
}
.image-grid-right-content {
    grid-column: 1 / 2;
}

.image-float-left,
.image-float-right {   /* Common float container styling */
    width: fit-content;
    max-width: 33%;
    clear: both;
}
.image-float-left {   /* Floated image container */
    margin-right: var(--blog-image-padding);   /* Create padding to the right of image */
    float: left;
}
.image-float-right {   /* Floated image container */
    margin-left: var(--blog-image-padding);   /* Create padding to the left of image */
    float: right;
}
.image-float-left img,
.image-float-right img {   /* Maintain 4:3 aspect ratio */   /* TODO: Make a landscape version of this, if needed */
    max-width: 100%;
    height: auto;
}

figure.image-solo-landscape {
    width: fit-content;

    /* Remove half of preceding space, but match paragraph spacing below */
    margin: calc(0px - var(--blog-paragraph-spacing) / 2) auto var(--blog-paragraph-spacing);
}
figure.image-solo-landscape img {   /* Maintain 4:3 aspect ratio */   /* TODO: Make a landscape version of this */
    max-width: 525px;
    max-height: 375px;
}

.blog-video {   /* Shrink container to size of content and center */
    width: fit-content;

    /* Custom override preceding paragraph padding / center figure / add standard spacing after */
    margin: calc(0px - var(--post-element-spacing)) auto calc(var(--post-element-spacing) * 2);

    --video-max-width: var(--youtube-video-width);
    --video-max-height: var(--youtube-video-height);
}
.blog-video .blog-video-iframe {
    width: var(--video-max-width);
    height: var(--video-max-height);
    border-style: none;   /* Remove default inset border styling */
}
.blog-video figcaption {
    max-width: var(--video-max-width);  /* Force text to wrap at max video size */
}


/* RESPONSIVE MEDIA RULES */

@media only screen and (min-width: 768px) {}

@media only screen and (orientation: landscape) and (min-width: 768px)  {
    /* BLOG - INDEX  */

    #blog-logo {
        width: 33%;
    }

    .blog-content {
        max-width: 60%;
    }

    /* BLOG VIEWS */

    .blog-pagination,
    #blog-title-block {
        width: var(--blog-header-width-landscape);
    }
    
    #blog-content {
        max-width: var(--blog-content-width-landscape);
    }
}

@media only screen and (orientation: portrait) and (min-width: 768px)  {
    /* BLOG - INDEX  */
    
    #blog-logo {
        width: 50%;
    }

    .blog-content {
        max-width: 80%;
    }

    /* BLOG VIEWS */

    .blog-pagination,
    #blog-title-block {
        width: var(--blog-header-width-portait);
    }

    #blog-content {
        max-width: var(--blog-content-width-portait);
    }
}

/* .NET Default */
@media only screen and (min-width: 501px) and (max-width: 768px) {
    /* BLOG VIEWS */
    
    .blog-video {
        width: fit-content;
    }
    .blog-video .blog-video-iframe {
        width: 480px;
        height: 270px;
    } 
    .blog-video figcaption {
        width: 480px;
    }
    
}

@media only screen and (max-width: 500px) {
    /* BLOG VIEWS */
    
    #blog-header {
        max-width: 100%;
        height: auto;
    }    

    #blog-header img {
        width: 100%;
        height: auto;
    }

    .blog-content {
        max-width: 100%;
        height: auto;
    }

    .blog-video {
        width: fit-content;
    }
    .blog-video .blog-video-iframe {
        width: 100%;
        max-width: 400px;
        max-height: 225px;
    }
    .blog-video figcaption {
        width: 100%;
        max-width: 400px;
    }
}