/* =============  Hero Section  ============= */

#case-study-template-hero{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Hero bg is determined by globals.css */

.template-hero-text-container{
    position: relative;
    margin: auto 10%;
    z-index: 10;
    color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    width: 80%;

      /* Tablet/Desktop/XL only */
      @media (min-width: 768px) {
        margin: auto 5%;
        width: 60%;
        }
}

.template-hero-title{
    font-size: clamp(42px, 8vw, 70px);
    line-height: 1.5;
}

.template-hero-description{
    font-family: 'Inter', sans-serif;

    /* Tablet/Desktop/XL only */
    @media (min-width: 768px) {
        width: 660px;
        }
}

.template-hero-tags{
    font-style: italic;
}


/* =============  Universal Responsive Margin and Padding  ============= */

.template-section-2, .template-section-3, .template-section-4{
    margin-left: 5%;
    margin-right: 5%;

    /* XL only */
    @media (min-width: 1200px) {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        }
}

.template-section-1, .template-section-2, .template-section-3, .template-section-4{
    margin-bottom: 80px;

     /* Tablet/Desktop/XL only */
     @media (min-width: 768px) {
        margin-bottom: 120px;
        }
}

/* =============  Overview Section  ============= */

.template-overview-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =============  Grid Section  ============= */

.template-grid-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.template-video-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    margin: 0 auto;

    /* Desktop/XL only */
    @media (min-width: 1200px) {
        width: 1200px;
    }
}

.template-video-item{
    width: 100%;
    height: auto;
    border-radius: 15px;
    -o-object-fit: cover;
    object-fit: cover;
}

#template-image-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    #template-image-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    #template-image-container {
        width: 1200px;
        grid-template-columns: 1fr 1fr;
    }
}

.template-image-item {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
}

@media (min-width: 768px) {
    .template-image-item {
        height: 300px;
    }
}

@media (min-width: 1200px) {
    .template-image-item {
        height: 350px;
    }
}

/* Portrait images for MatterVision Films (mobile first) */
#template-image-container.portrait-images .template-image-item {
  width: 100%;
  padding-top: 60%; /* 0.6 aspect ratio */
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Tablet: slightly less tall portrait */
@media (min-width: 600px) {
  #template-image-container.portrait-images .template-image-item {
    padding-top: 70%; /* 0.7 aspect ratio */
  }
}

/* Desktop: even less tall portrait */
@media (min-width: 1024px) {
  #template-image-container.portrait-images .template-image-item {
    padding-top: 90%; /* 0.9 aspect ratio */
  }
}

/* =============  Action Statement Section  ============= */

#action-statement{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.template-action-statement{
    color: var(--gray);
}