/*
=================================================

Hi! I have attempted not to lean too much 
on robots to write this CSS for me.
 
But of course the robots are more familiar 
with CSS than I am. (Especially when it 
comes to flexbox.)

So in a few instances the robots wrote a 
first pass, or answered a question for me 
about how a particular attribute works.

And of course I have snippets of CSS
scattered across different pages, inside 
of HTML <style> tags. Will I clean those
up? Perhaps someday!

The site is built mobile-first, because
(despite what a surprising number of 
professional web designers might think) 
2011 did happen, and linear time 
progressed forward from there.

Was that mean...? That might have been 
a little bit mean. -CJ

=================================================
*/ 

/* 

I did rely on a robot to write what it called a 
=================================================
Modern CSS Reset
=================================================

*/

/* 1. Use a more intuitive box-sizing model */

*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margins and paddings */

* {
    margin: 0;
    padding: 0;
}

/* 3. Improve text rendering. Center content. */

body {
    -webkit-font-smoothing: antialiased;
    
    /* Centered column layout */
    display: flex;
    flex-direction: column;
    align-items: center; 
}

/* 4. Set media defaults */

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 5. Inherit fonts for form controls */

input, button, textarea, select {
    font: inherit;
}

/* 6. Avoid text overflows */

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 
=================================================
Site Logo
=================================================
*/

.site-logo {

  /* Mobile size */
    width: 108px;         
    height: 108px;

    margin-top: 50px;      
    margin-bottom: 20px;

  /* Prevents distortion */
    object-fit: contain;   
}


/* 
=================================================
Typography
=================================================
*/

body {
  
  /* Body text defaults - Mobile widths */
  
    line-height: 1.7;
    font-family: 'Mozilla Text', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    color: #333;    

}

p + p {

/* Paragraph spacing after the first paragraph */
  margin-top: 1.2em;
}

h1 {
    font-family: 'Mozilla Headline', sans-serif;
    font-size: 2.75rem;
    color: #222;
    text-align: center;
    line-height: 3.0rem;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;

    width: 90%;
}

h2 {
  font-family: 'Mozilla Headline', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 20px;
  margin-bottom: 10px;
}

ul {
  list-style-type: none; /* Removes bullets */
  padding: 0; /* Removes default left indent */
  margin: 0;  /* Removes default margin */
}

/* For times where I'm trying to prevent text wraps */
.nowrap {
    white-space: nowrap;
}

/* Some additional custom classes */

.datePub {
/* Date published. WOK and writing.html */
  font-size: .83rem;
  color: #aaa;
}

.image-caption {
/* Small text below an image */
  display: block;
  text-align: center;
  font-style: italic;
  font-size: .75rem;
  line-height: 1.55;
  margin-top: -12px;
  margin-bottom: 18px;
}

.footnote {
  font-size: .75rem;
}

/* --- Playlist Styles --- */
/* --- Applies to UL (WOK) ---*/

.playlists {
  display: block;
  list-style-type: none; 
  font-size: 1rem; 
  line-height: 1.4rem;
  margin-top: 20px;
  margin-bottom: 30px;
}

.playlists li {
  margin-bottom: 6px;
}


/* --- Body Text Link Styles --- */

a {
    color: #87c02c;
    text-decoration: none;
    font-weight: 600;
}

.link-back a {
  display: block;
  text-align: center;
  font-size: .95rem;
  font-weight: 400;
}


/* Inline Capsule Links */

a.pill-link {
    display: inline-block;
    padding: 0.05em 0.5em;
    background-color: #c0e567;
    color: #000000;
    
    /* Not this big, but ensures the capsule is rounded */
    border-radius: 999px;   
    
    /* Type is slightly scaled to sit within paragraph line-height */
    font-size: 0.9em;       
    font-weight: 500;
    
    /* No underlines */
    text-decoration: none;
    
    /* Keeps multi-word pills from breaking */
    white-space: nowrap;    
    vertical-align: middle;

    /* Hover animation */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

a.pill-link:hover {
    /* Hover effect */
    background-color: #87c02c; 
}



/* 
=================================================
Page Layout
=================================================
*/

/* --- Header Graphic (Index page) --- */

.header-graphic {
  
/* Constrain mobile width */
    width: 90%;          
    
/* Set an upper width limit */ 
    max-width: 1200px;     

    margin-bottom: 40px;
}

.header-graphic img {

    width: 100%;
    height: auto;
    object-fit: cover;

/* Mobile hero aspect ratio */
    aspect-ratio: 4 / 5;   
}

/* --- Main Text Container (Index Page) --- */

.index-container {
    width: 84%;     
    
/* Constrain upper width to match header graphic */       
    max-width: 1200px;     
    margin-bottom: 50px;

/* Text is larger on the home page */       
    font-size: 1.5rem;  
}


/* --- Main Text Container (All other pages) --- */

.standard-container {
    width: 84%;


/* Constrain max width to 600 px */       
    max-width: 600px;      
    margin-bottom: 50px;

}
/* Styling for inline graphics */

.inline-graphic, .design-sample, .film-sample {
  margin-top: 26px;
  margin-bottom: 26px;
}

.playlist-art {
  margin-top: 20px;
  margin-bottom: 20px;
}


/* Styling for inline video embeds */

video {
    width: 100%;
    height: auto;
    
    /* Rounded corners */
    border-radius: 8px; 
}


/* 
=================================================
Footer
=================================================
*/

.site-footer {
    margin-bottom: 60px;
    font-size: 1rem;       
}

.footer-nav {
    list-style: none;
    display: flex;
    
    /* Mobile: gives each word its own line */
    flex-direction: column; 
    align-items: center;
    gap: 15px;
}

.footer-nav li a {
    text-decoration: none;
    color: #75b017;
    font-weight: 400;
}


/* 
=================================================
Design - Page Layout
=================================================
*/

.design-container {
    width: 84%;           
    max-width: 1200px;     
    margin-bottom: 50px;
}

.gallery-intro {
    margin-bottom: 30px;
}

/* I got help from the robots for this gallery */

.design-gallery {
    display: grid;
    
    /* Mobile: Single column */
    /* grid-template-columns: 1fr; */

     /* 2 columns on mobile */
     grid-template-columns: repeat(2, 1fr);
     gap: 14px;

    width: 100%;




}

.design-card {
    display: block;
    overflow: hidden;
    
    /* Rounded corners */
    border-radius: 8px;   

    /* Hover animation */
    transition: opacity 0.15s ease;
}

.design-card:hover {

    /* Hover effect */
    opacity: 0.7;
}

.design-card img {
    width: 100%;
    height: auto;
    
    /* Enforces square aspect ratio */
    aspect-ratio: 1 / 1;   

    /* Crops image to fit square without stretching */
    object-fit: cover;    
}



/* 
=================================================
 Photo Gallery - Page Layout
=================================================
 */
     
/* I also got help from the robots for this 
photo gallery. I knew what I wanted it to 
do but it would have taken a while to figure out 
the math on my own */
     
     
 .photo-container {
     width: 84;            
     max-width: 1200px;
     margin-bottom: 50px;
 }
 
 .photo-gallery {
     display: flex;
     flex-wrap: wrap;

     /* Keeps row alignment tight */
     align-items: flex-start; 
     gap: 16px;
     width: 100%;
     margin-bottom: 35px;

 }
 
 .photo-item {
  
/* This distributes the row width proportionally 
based on the aspect ratio of the photos...?
Not sure quite how the math works, but it works  */

     flex-grow: calc(var(--w) / var(--h));
     
/* Target height baseline hint for mobile */
     flex-basis: calc(var(--w) / var(--h) * 160px);
     
     min-width: 0;
     border-radius: 8px;
     overflow: hidden;

     /* Hover animation */
     transition: opacity 0.15s ease;
 }
 
 .photo-item:hover {
    opacity: 0.8;
 }
  
 .photo-item img {
   
 /* This shows the full image without cropping */   
     width: 100%;
     height: auto;         
 }
 
 /* This absorbs the leftover space on the last row 
 so that trailing photos don't grow to crazy heights */
 .photo-gallery::after {
     content: "";
     flex-grow: 999999;
 }
 

/* 
 =================================================
 Links Page - Page Layout
 =================================================
 */
 
 .links-container {
     width: 90%;
     max-width: 600px;      
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-bottom: 50px;
 }
 
 .link-button {
     display: block;
     width: 100%;
     padding: 16px 24px;
     background-color: #87c02c;
     color: #ffffff;
     text-align: center;
     text-decoration: none;
     font-family: 'Mozilla Text', sans-serif;
     font-size: 1.25rem;

/* Rounded rectangle edges */
     font-weight: 500;
     border-radius: 12px;   
     transition: background-color 0.2s ease;
 }
 
 .link-button:hover,
 .link-button:focus {
     background-color: #688f29;
     outline: none;
 }



/* 
=================================================
Tablet Styles (768px and wider)
=================================================
*/

@media (min-width: 768px) {
  
/* Site Logo size on Tablet */

    .site-logo {
        width: 120px;
        height: 120px;
    }

 
 /* Home page changes on Tablet */

    .site-title {
        font-size: 3rem;
        margin-bottom: 24px;
    }

    .header-graphic {
        width: 80%;
    }

    .header-graphic img {
        /* Tablet Aspect Ratio */
        aspect-ratio: 16 / 9;
    }

/* Container width changes on Tablet */

    .index-container {
        width: 80%;
        font-size: 1.75rem; /* Smooth scaling on tablet for index */
    }

    .design-container {
         width: 80%; 
         text-align: center;
     }

     .photo-container {
         width: 80%;
     }


/* Gallery changes on Tablet */
    
     .design-gallery {
        /* 3 columns on tablets */
         grid-template-columns: repeat(3, 1fr); 
         gap: 14px;
     }

      .photo-item {
      /* Target row height on Tablet */
           flex-basis: calc(var(--w) / var(--h) * 220px);
       }

/* Footer changes on Tablet and larger */

    .footer-nav {
          flex-direction: row; /* Tablet: sits on a single line */
          gap: 0;
      }
      
      .footer-nav li:not(:last-child)::after {
          content: "•";
          margin: 0 15px;
          color: #999;
      }
      

/* Shrinks album art on Tablet and larger */

     .playlist-art {
          width: 50%;
       } 

}


/* 
=================================================
Desktop Styles (1024px and wider)
=================================================
*/

@media (min-width: 1024px) {

/* Site Logo on Desktop */
 
    .site-logo {
        width: 130px;
        height: 130px;

        /* More space from the top */
        margin-top: 60px;      
    }

 /* Home page changes on Desktop */

    .site-title {
        font-size: 3.0rem;
    margin-bottom: 30px;
    }

    .header-graphic {
        width: 100%;
    }

    .header-graphic img {
        /* Desktop Aspect Ratio */
        aspect-ratio: 3 / 1;
    }


/* Container width changes on Desktop */

    .index-container {
        width: 60%;

        /* Body font size is bigger */
        font-size: 2rem;    
    }    

    .design-container {
         width: 85%;        
         max-width: 1200px; 
     }

     .photo-container {
         width: 85%;        
         max-width: 1200px;
     }


/* Gallery changes on Desktop */
    
    .gallery-intro {
       max-width: 960px;
       text-align: center;
       margin-left: auto;
       margin-right: auto;
       font-size: 1.5rem;
    }
    
     .design-gallery {
     /* 4 columns on desktop */
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
     }

        .photo-item {
     /* Target photo row height on Desktop */
         flex-basis: calc(var(--w) / var(--h) * 280px);
     }


 }    
     
     
     
     
/* 
      =================================================
      EXPERIMENTAL TESTING AREA
      =================================================
      */
 
 
     .image-container {
          position: relative;
          display: inline-block; /* Fits tightly around the image */
          width: 100%;          /* Allows fluid responsiveness */
      }
      
      .base-image {
          display: block;
          width: 100%;
          height: auto;
      }
      
      .gif-overlay {
          position: absolute;
  
          top: 35%;   /* Distance from top of base image */
          left: 38%;    /* Distance from left of base image */
          width: 23.2%;   /* Width relative to base image */
          height: auto;
          pointer-events: none;
  
      }
     
     
@media (min-width: 480px) {
/* Adjustments  to GIF overlay */      

     .gif-overlay {

        top: 34.5%;   /* Distance from top of base image */
        left: 38.5%;    /* Distance from left of base image */
        width: 23.2%;   /* Width relative to base image */

    }
}
     
@media (min-width: 600px) {
/* Adjustments  to GIF overlay */      

     .gif-overlay {

        top: 34%;   /* Distance from top of base image */
        left: 38.5%;    /* Distance from left of base image */
        width: 23.2%;   /* Width relative to base image */

    }
}