/* css 3.0 */
:root {
   display:grid;
   --itschad-purple: #692468; 
   --itschad-gold:#fe9800;
   --itschad-green:#00cc2c;
   
   --itschad-purple-dark: hsl(301, 49%, 21%); 
   --itschad-purple-mid: hsl(301, 25%, 55%);

   --itschad-purple-light: hsl(301, 49%, 97%); 
   --itschad-green-light:hsl(133, 100%, 75%);
   --itschad-gold-light: hsl(36, 100%, 85%);
   
   font-family: sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul { list-style: none; }
hr { margin: .75rem 0; }
summary {
   cursor: pointer ;
}
/* ----------------------------------------- styling the layout -- */
#s-photo-block      { grid-area: avatar; }
#s-identity-block-1 { grid-area: iblock1; }
#s-identity-block-2 { grid-area: iblock2; }
#s-identity-block-3 { grid-area: iblock3; }
#s-historicals      { grid-area: historicals; }
#s-portfolios       { grid-area: portfolios; }

.home-city, 
.a-chad-resume-download, 
.a-chad-links, 
.itschaddotnet, 
.a-agency-exp
.skills-ulist, 
.skills-ulist li {
   padding-left: 1ch;
}

details summary::marker {
   color: var(--itschad-gold);
}
 

.no-triangle {
   list-style: none;
}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */

/* --------------------------------------------- #s-photo-block -- */
#s-photo-block {
   padding: 1rem;
}
.profile-pic {
   width: 10rem;
   border-radius: 999rem;
}
/* ---------------------------------------- #s-identity-block-1 -- */
#s-identity-block-1 {
   padding: 0 1rem;
   padding-bottom: .75rem;
}
.fullname {
   font-size: 1.9rem;
}
.home-city {
   margin-top: .375rem;
}
.itschaddotnet {
   margin-top: .1875rem;
}
.download-link {
    display: inline-block; /* Makes it a block element */
    font-size: 1.17em; /* Approximately h3 font size */
    font-weight: bold; /* Optional: makes it bold */
    /* text-decoration: none; Removes underlining */
    /* margin-bottom: 10px; Optional: Adds space below the link */
}
#s-identity-block-1 .hr-single-col-toggle {
   display: none;
}
/* ---------------------------------------- #s-identity-block-2 -- */
#s-identity-block-2 {
   padding: 1.3rem 1.3rem .75rem;
}
#s-identity-block-2 .hr-single-col-toggle {
   display: none;
}


#embedded-badge-010ea33b-aae3-4d3a-9c1d-8b2447aa3730 {
   background-color: white;
   border-radius: 3px;
   height: 241px !important;
}



.qualities-ulist {
   padding: 0 1ch;
   column-count: 2;
   column-gap: 2rem;
}
.qualities-ulist li {
   margin-bottom: .625rem;
   padding-left: 1.3rem;
   text-indent: -1.4rem;
}
.qualities-ulist:last-of-type {
   margin-bottom: 0;
}
.checkmarks {
   display: inline-block;
   vertical-align:top;
   height: 1rem;
   width: 1rem;
   margin-right: .125rem;
}
.skillcheck {
   vertical-align:text-bottom;
}
/* ---------------------------------------- #s-identity-block-3 -- */

#s-identity-block-3 {
   padding: 1.3rem 1rem;
}
.a-agency-exp {
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: .5rem;
   align-items: center;
}

.agency-bug-big {
   height: 2rem;
}
.agency-exp-type .br-single-col-toggle {
   display: none;
}
.skills-ulist {
   columns: 2;
}
.skills-ulist li {
   margin-bottom: .8rem;
   break-inside: avoid-column;
}
.skills-ulist li p {
   margin-bottom: .25rem;
}
.bullets-all {
   display: inline-block;
   vertical-align:text-bottom;
   width: 1rem;
   transform: rotate(-14deg);
}
/* --------------------------------------------- #s-historicals -- */
#s-historicals {
   padding-top: 1.3rem;
   padding-bottom: 1rem;
   padding-left: 1rem;
}
.a-history-ulists {
   padding-left: 3.5rem;
}
.resume-item-ulist {
   margin-bottom: 1rem;
}
.resume-item-ulist:last-of-type {
   margin-bottom: 0;
}
.resume-item-ulist li:first-child {
   text-indent: -1.54rem;
}
.agency-bug-small {
   vertical-align:text-bottom;
   width: 1rem;
   margin-right: .25rem;
}
.not-an-agency li:first-child {
   text-indent: 0rem;
}
.market-type {
   width: 32ch;
}
/* ---------------------------------------------- #s-portfolios -- */
#s-portfolios hr {
   margin: 0;
}
.port-group {
   border-right: 0;
}
.port-group-title {
   font-size: 2rem;
   font-weight: bold;
   padding-right: 1rem;
}
.port-subgroup {
   padding: 1rem;
   border-radius: 1rem 0 0 1rem / 2.5rem 0 0 1rem;
}
.port-subgroup-title {
   font-size: 1.5rem;
   font-weight: bold;
}

.port-subgroup-subtitle {
   font-size: 1.25rem;
   font-weight: bold;
   font-weight: normal;
}
.port-subgroup-description {
   margin: 0rem 2rem;
   margin-top: .75rem;
}
.port-subgroup-imgs {
   margin: 0 2rem;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   grid-gap: 1.5rem;
   padding: 1rem;
}
figcaption {
   font-size: .8rem;
   color: var(--itschad-purple-mid);
   margin-top: .375rem;
}
.port-imgs {
   width: 100%;
}
.a-interrobang-img-container {
   display: grid;
   place-content: center;
   padding: 1.5rem;
}
.interrobang-img {
   height: .875in;
   border-radius: 999rem;
}
/* ----------------------------------------- styling the colors -- */
/*html {*/
/*   background-color: var(--itschad-gold);*/
/*}*/
#block-one-single-col-fix {
   background-color: var(--itschad-purple);
}
#s-photo-block {
   background-color: var(--itschad-purple);
}
.profile-pic {
   border: .625rem solid var(--itschad-purple-mid);
}
#s-identity-block-1, #s-identity-block-3 {
   color: var(--itschad-gold-light);
   background-color: var(--itschad-purple);
}
#s-identity-block-2, #s-historicals {
   background-color: var(--itschad-purple-light);
   color: var(--itschad-purple-dark);
}
#s-portfolios {
   background-color: var(--itschad-purple);
}
.fullname {
   color: var(--itschad-gold);
}
hr {
   color: var(--itschad-purple-mid);
}
a.download-link:link,
a.download-link:active,
a.download-link:visited {
    color: var(--itschad-green);
}
a.download-link:hover {
    color: var(--itschad-green-light);
}
.itschaddotnet {
   color: var(--itschad-gold);
}
.checkmarks {
   fill: var(--itschad-purple-mid);
}
.agency-bugs {
   fill: var(--itschad-gold);
}
.bullet-yes, .skillcheck {
   fill: var(--itschad-gold);
}
.bullet-no {
   fill: var(--itschad-purple-dark);
}
.interrobang-img {
   border: .625rem solid var(--itschad-purple-mid);
}
.bug-circle {
   fill: var(--itschad-purple);
}
.port-group {
   border: 1.5rem solid var(--itschad-purple);
   border-right: 0;
}
.port-group-title {
   color: var(--itschad-gold);
}
.port-subgroup {
   border-top: 1.5rem solid var(--itschad-purple);
   background-color: var(--itschad-purple-light);
   color: var(--itschad-purple-dark);
}
.port-subgroup-title {
   color: var(--itschad-purple);
}
.port-subgroup-subtitle {
   color: var(--itschad-gold);
}
.port-imgs {
   box-shadow: 0rem 0rem 0rem 1px var(--itschad-purple),
               .1875rem  .1875rem .5rem -.1875rem var(--itschad-purple),
               -.1875rem -.1875rem .5rem -.1875rem var(--itschad-gold);
}

/* Add specific styling for iframe within port-imgs class */
.port-imgs.port-img-design[src*="youtube"] {
   width: 100%; /* Full width of container */
   aspect-ratio: 16/9; /* Maintain video aspect ratio; */
   border: none; /* Remove default iframe border */
   margin: 0 auto; /* Center the iframe */
   display: block; /* Ensure block display */
   grid-column: 1 / -1; /* Span all columns in grid */
}

/* Container styling for the image grid */
/* .port-subgroup-imgs {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
   gap: 1rem;
   padding: 1rem;
   width: 100%;
} */


/* Create a wrapper div for the iframe to maintain aspect ratio */
/* .video-wrapper {
   grid-column: 1 / -1;
   position: relative;
   width: 100%;
   padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) *
} */

/* Position iframe within wrapper *
/* .video-wrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0rem 0rem 0rem 1px var(--itschad-purple),
               .1875rem .1875rem .5rem -.1875rem var(--itschad-purple),
               -.1875rem -.1875rem .5rem -.1875rem var(--itschad-gold);
} */



/* .port-subgroup-imgs {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
   gap: 1rem;
   padding: 1rem;
   width: 100%;
   box-sizing: border-box; /* Ensure padding is included in width calculation *
}
*/
.video-wrapper {
   grid-column: 1 / -1;
   position: relative;
   width: 100%;
   /* padding-bottom: 56.25%; 16:9 Aspect Ratio */
   margin: 0; /* Reset margin to match grid gap handling */
}
/*
.video-wrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0rem 0rem 0rem 1px var(--itschad-purple),
               .1875rem .1875rem .5rem -.1875rem var(--itschad-purple),
               -.1875rem -.1875rem .5rem -.1875rem var(--itschad-gold);
}

/* Maintain consistent sizing for images *
.port-imgs.port-img-design {
   width: 100%;
   box-sizing: border-box;
} */



/* --------------------------------------------------------------- */
/* ---------------------------------------------- MEDIA QUERIES -- */
/* --------------------------------------------------------------- */

/* -------------------------------------------- smallest layout -- */
@media (max-width: 451px) {
   .qualities-ulist {
      columns: 1;
   }
   .skills-ulist {
      columns: 1;
   }
   .agency-exp-type .br-single-col-toggle {
      display: inline;
   }
}
/* ----------------------------------------------- small layout -- */
@media (min-width: 452px) {
   #the-container {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto auto 1fr;
      grid-template-areas: 
        "iblock1 avatar"
        "iblock2 iblock2"
        "iblock3 iblock3"
        "historicals historicals"
        "portfolios portfolios";
   }
   #s-photo-block {
      display: grid;
      place-items: center;
   }  
   #s-identity-block-1 {
      display: grid;
      align-items: end;
      padding-top: 1rem;
   }
}
/* ---------------------------------------------- medium layout -- */
@media (min-width:680px) {
   #the-container {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto auto 1fr;
      grid-template-areas: 
        "avatar iblock2"
        "iblock1 historicals"
        "iblock3 historicals"
        "portfolios portfolios";
   }
   #s-photo-block {
      display: block;
   }
   #s-identity-block-1 {
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 1.2rem;
   }
   #s-identity-block-2 {
      padding-bottom: 0;
      display: grid;
      align-items:baseline;
   }
   #s-identity-block-3 {
      padding: 0 1rem;
   }
   #s-historicals {
      padding-top: 0rem;
   }
   #s-identity-block-1 .hr-single-col-toggle,
   #s-identity-block-2 .hr-single-col-toggle {
      display: block;
   }
   .skills-ulist {
      columns: 1;
   }
   .agency-exp-type .br-single-col-toggle {
      display: inline;
   }
}
/* ---------------------------------------------- widest layout -- */
@media (min-width:1150px) {
   #the-container {
      /* height: 100vh; */
      /* overflow: hidden; */
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto 1fr;
      grid-template-areas: 
        "avatar iblock2 portfolios"
        "iblock1 historicals portfolios"
        "iblock3 historicals portfolios";
   }
}