/* Reset and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}


body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}


ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}


:target {
  scroll-margin-block: 5ex;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables */
:root {
    --font-color: #342E37; 
    --font-color-black: #050505; 
    --background-color: #F5F5F5; 
    --title-color: #DB3C34; 
    --spacer-unit: 40px; /* Base unit for spacing */
    /*--fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);*/
    --fs-200: clamp(0.90rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-300: clamp(0.94rem, calc(0.92rem + 0.69vw), 1.75rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
    
}

/* Import external font */
@font-face {
    font-family: 'mainfont';
    src: url('includes/font/ABCSocial-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



/* Apply the external font */
body {
    font-family: 'mainfont', sans-serif;
    font-weight: 300;  
    line-height: 1.6;    
    background-color: var(--background-color);

}


/* Container for the grid */
.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 2em 0 0 0;
    color: var(--font-color);
}

section {
    margin: 0 0 6em 0;
    padding: 0;
}


h1 {
    color: var(--title-color);    
    font-size: var(--fs-200);
    line-height: 1.05;
    margin-bottom: 0.5em;
    font-weight: 300;
}
h2 {
    text-transform: uppercase;
    font-size: var(--fs-400);
    line-height: 1.05;
    font-weight: 300;
}
h2.hd-title {
    letter-spacing: 0.5px;
}

h3 {
    font-size: var(--fs-400);
    line-height: 1.05;
    font-weight: 300;
    color: var(--font-color-black);
}
h3.hd-title {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.box {
  height: 200px;
    padding: 1em;
    margin: 0 0 2em 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}
p {
    margin: 2em 0 0 0em;
    font-size: var(--fs-400);
    line-height: 1.25;
    letter-spacing: 0.3px;
}

p.txt-intro   {
    font-weight: 300;
    color: var(--font-color);
    font-size: var(--fs-500);
}

p strong 
{
    font-weight: 300;
    color: var(--font-color-black);
}

ul {
    margin: 1em 0 0 0;
    font-size: var(--fs-400);
    list-style-type:none
    /* line-height: 1.25;
    letter-spacing: 0.3px;*/
}
li {
    margin: 0 0 0.3em 1.1em;
    padding-left: 1em;
    position: relative; 
    line-height: 1.25;
}
ul > li:before {
    content: "—"; /* en dash here */
    position: absolute;
    margin-left: -2em; 
}


a {
   color: var(--font-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    
}

a:visited {
    color: var(--font-color);
    
}

.spacer-top {
    margin: 0 0 20px 0;
}



.grid-8col {
  display: grid;
  grid-template-columns: 8% 8% 8% 26% 26% 8% 8% 8%;
  gap: 0;
}

.grid-8col * {
  border: 0px solid red;

}





 .grid-8col .col-span-1  { grid-column: span 1; }
  .grid-8col .col-span-2  { grid-column: span 2; }
  .grid-8col .col-span-3  { grid-column: span 3; }
  .grid-8col .col-span-4  { grid-column: span 4; }
  .grid-8col .col-span-5  { grid-column: span 5; }
  .grid-8col .col-span-6  { grid-column: span 6; }
  .grid-8col .col-span-7  { grid-column: span 7; }
  .grid-8col .col-span-8  { grid-column: span 8; }

  /* Offsets (desktop) */
  .grid-8col .offset-1 { grid-column-start: 2; }
  .grid-8col .offset-2 { grid-column-start: 3; }
  .grid-8col .offset-3 { grid-column-start: 4; }
  .grid-8col .offset-4 { grid-column-start: 5; }
  .grid-8col .offset-5 { grid-column-start: 6; }
  .grid-8col .offset-6 { grid-column-start: 7; }
  .grid-8col .offset-7 { grid-column-start: 8; }


  /* Vertical alignment (mobile: default is top) */
.align-top    { align-self: start; }
.align-center { align-self: center; }
.align-bottom { align-self: end; }

.col-content {
  grid-column-start: 2;
  grid-column-end: 8;
}


/* Case 1 styles */
.grid-8col-case-1 {
  display: grid;
  grid-template-columns: 8% 8% 8% 26% 26% 8% 8% 8%;
  grid-template-rows: 20% 40% 20% 20%;
  position: relative;
  /* grid-auto-rows: minmax(200px, auto); */
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  border: 0px solid red; /* Optional: to visualize the grid */
}

.case-1-hero-box {
  /*grid-column-start: 1; */
  grid-column: 1 / span 6;
  grid-row: 1 / span 3; 
  background-color: #000000;
  border: 0px solid red; /* Optional: to visualize the grid */
  z-index: 2;
  height: 100%;
  align-self: end;  

}

.case-1-hero-box > img  {
  width: 100;
  height: auto;  
  background-color: #000000;
  transition-delay: 50ms;
}


.case-1-clr-theme-box {
  grid-column: 5 / span 4;
  grid-row: 1 / span 3; 
  background-color: #DB4030;
  height: 80%;
  align-self: end;
  z-index: 0; 
}

.case-1-mobile-box {

  /* grid-column-start: 2; */
  /* grid-column-end: 5; */
  grid-column: 2 / span 3;
  grid-row: 3 / span 2; 
  
  /* grid-row-start: 3; */
  /* grid-row-end: 5; */
  background-color: black;
  position: relative;
  border: 0px solid purple; /* Optional: to visualize the grid */
  width: 100%;
  z-index: 4; 

}

.case-1-mobile-box > img {
  width: 100%;
  height: auto;
  transition-delay: 100ms;
}


.case-1-mobile-box-video {
  grid-column: 5 / span 5;
  grid-row: 3 / span 2; 
  background-color: #000000;
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  z-index: 1;
  justify-items: center;
  align-items: center;
  z-index: 4; 
}

.case-1-mobile-box-video > video {
  width: 80%;
  height: auto;
  justify-items: center;
  border: 0px solid yellow; /* Optional: to visualize the grid */
  margin: 26% 0 0 12%;
  background-color: #000000;
  transition-delay: 150ms;
}




/* Desktop: 8 custom columns */
@media (min-width: 768px) {

  .grid-8col-case-1 {
    grid-template-rows: 10% 40% 40% 10%;
  }    
  
  .case-1-hero-box {
    /*grid-column-start: 1; */
    grid-column: 1 / span 5;
    grid-row: 1 / span 3;
    height: 100%;
    position: relative;
    bottom:0; 
    display: flex;
    align-items: flex-end;
  }

  .case-1-hero-box > img {
    left: 0;
    bottom: 0;    
  }

  .case-1-mobile-box-video {
    grid-column: 5 / span 3;
    grid-row: 2 / span 1; 
    justify-items: center;
    align-items: start;
  }

  .case-1-mobile-box-video > video {
    margin: 14% 0 0 12%;
  }

  .case-1-mobile-box {

    grid-column: 5 / span 3;
    grid-row: 3 / span 2; 
    background-color: black;
    position: relative;
    display: flex;
    align-items: flex-end;

  
  }
  .case-1-mobile-box > img {
    width: 70%;
    height: auto;
    background-color: black;
    margin-left:12%;
  }

  .case-1-clr-theme-box {
    grid-column: 3 / span 4;
    grid-row: 4 / span 5; 
    height: 100%;
    align-self: start;
}

}
/* End Case 1 styles */


/* Case 2 styles */

.grid-8col-case-2 {
  display: grid;
  grid-template-columns: 8% 8% 8% 26% 26% 8% 8% 8%;
  grid-template-rows: 57% 43%;
  position: relative;
  /* grid-auto-rows: minmax(200px, auto); */
  align-items: stretch;
  justify-items: stretch;
  gap: 0; 
  border: 0px solid red; /* Optional: to visualize the grid */
}


.case-2-video-box {
  position: relative;
  grid-column: 2 / span 7;
  grid-row: 1 / span 1;
  height: 100%;
  margin: 0;
  overflow: hidden;
  display: block;
  transition-delay: 50ms; /* Optional: to delay the appearance */
}

.case-2-video-box > video {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  z-index: 1;
  margin:0;
  padding: 0;
}

.case-2-bottom-panel-post {
  grid-column: 1 / span 4;
  grid-row: 2 / span 1;
  border: 0px solid yellow; /* Optional: to visualize the grid */
  overflow: hidden;
  margin:0;
  padding: 0;
  transition-delay: 100ms; /* Optional: to delay the appearance */
}

.case-2-bottom-panel-mockup {
  grid-column: 5 / span 3;
  grid-row: 2 / span 1;
  margin:0;
  overflow: hidden;
  padding: 0;
  transition-delay: 50ms; /* Optional: to delay the appearance */
}

.case-2-bottom-panel-post > img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

.case-2-bottom-panel-mockup > img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Desktop: 8 custom columns */
@media (min-width: 768px) {
  .case-2-video-box {  
    grid-column: 2 / span 7;
  }
}


/* End Case 2 styles */








.case-col-line {
  margin-top: 14%;
  border-top: #050505 solid 1px;
  margin-right: 0.4rem;
}


.case-hd {
  margin: 0.7em 0 2em 0;
}


.case-3-video-box {
  grid-column-start: 1;
  grid-column-end: 8;
  margin: 0;
  border: 0px solid red; /* Optional: to visualize the box */
  position: relative;
}


.case-3-video-box > video {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  z-index: 2;
  margin:0;
  object-fit: cover; /* Ensures the video covers the box */
  object-position: center; /* Centers the video */
  border: 0px;
}
.case-3-bottom-panel {  
  grid-column: 2 / span 7;
  overflow: hidden; 
  position: relative;

}

.case-3-bottom-panel > img {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  z-index: 1;
  margin:0;
  object-fit: cover; /* Ensures the image covers the box */
  object-position: center; /* Centers the image */
}

h4 { 
  font-size: var(--fs-900);
  line-height: 1.05;
  font-weight: 300;
  color: var(--font-color-black);
  margin: 0.5em 0;

}

footer {
  height: 50vh;
  margin-bottom: 12em;
}

.footer-box {
  grid-column: 2 / span 6;
  justify-content: center;
  align-items: center;
  text-align: left;
  transition-delay: 100ms;

}




.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9999;
    background-color: var(--background-color);
    padding: 1rem 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
    padding-left: 8%;
}
.header-box {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.header-box:not(.fixed-header) {
    opacity: 1;
    transform: translateY(-20px);
}
.fixed-header {
    opacity: 1;
    transform: translateY(0);
}




.hidden {
    opacity: 0;
    /* transform: translateY(10%); */
    transition: all 1s;
    transition-delay: 10ms;
}

.show {
    opacity: 1;
    /* transform: translateY(10%); */
}

@media (prefers-reduced-motion: reduce) {
    .hidden {
        transition: none;
    }
}

/* Desktop: 8 custom columns */
@media (min-width: 768px) {
  .grid-8col {
    grid-template-columns: 8% 8% 8% 26% 26% 8% 8% 8%;
  }

  .col-content {
    padding-right: 18%;
  }

  .case-1-hero-box {
    grid-column-start: 2;
    grid-column-end: 5;
  }

  .case-1-bottom-panel {
    grid-column-start: 5;
    grid-column-end: 8;
    background-color: black;  
    display: none;

  }

  .case-1-side-img-desk { 
    display: block;
  }

  section {
    margin: 0 0 12em 0
  }



}