/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 08-09-22 */
/* file     -> layout-v6.css */
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/raphaelgoetter/pen/rZJWdo */
/* info     -> grid-layout */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIBLES */
:root {
	--hover-bgr:hsla(210,100%,56%,1);
    
    /* cards */
    --card-front-col: rgba(0,0,0,.6); /* black, gray OR client-color */
    --card-front-bgr: #fff;
    --card-back-col: #fff;
    --card-back-bgr: #EE741D;
    --card-ibox-hgt: 14rem;         /* min-height of the card - depends of the text card-back - def 14rem */
    --card-body-bdr: 1px solid rgba(0,0,0,.05);     /* border - def 1px */
   
    --grid-area-bgr: none;          /* background - def none */
    --grid-area-bdr: 0px solid rgba(0,0,0,.25);     /* border - def 0px  */
    --grid-area-rad: 0rem;          /* border-radius - def 0rem */

    /* box-counter - box-front */ 
    --count-color: #fff; /*rgba(0,0,0,.25);            /* color of the counter - must be the same as card-back-background AND no transparent */
    --count-size: 2.6rem;           /* counter size - def 2.4rem */
    --count-pos-top:-.4rem;              /* counter position top - def 0 */
    --count-pos-right:1rem;         /* counter position right - def 1rem */
    --count-pos-bottom:0;           /* counter position bottom - NOT IN USE */ 
    --count-pos-left:0;             /* counter position left - NOT IN USE */
    --count-width: 2px;             /* counter stroke - def 1px | max 3px */

    /* animation */
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 09-09-22 */
/* LAYOUT-GRID */
/* RESET COUNTER -> SEE design.css */

/* HEADER */
header {
	display: flex;
	flex-direction: column;
  padding: 1rem;
	border: 1px solid red;
}

/* SECTION */
section               {margin:0;padding:0;counter-reset:Element;}
/* the footer within the last section */
section:last-of-type  {background: #ccc;border: 1px solid red;}

/* 1ST GRID */
@media (min-width:320px) {
  .grid-container {
    display: grid;
    grid-template-columns: (1fr);
    grid-template-areas:  'main   ' 
                          'main   ' 
                          'wbox   ' 
                          'ibox   '
                          'abox   '
                          'foot   ';
    /*
    grid-template-areas:  'main   main' 
                          'main   main' 
                          'wbox   wbox' 
                          'ibox   ibox'
                          'abox   abox'
                          'foot   foot';
    */    
    gap:calc((var(--grid-area-gap,1rem) * 1));
    margin:.8rem;
  }

@media (min-width:768px) {
  .grid-container {
    grid-template-columns: repeat(2fr, 1fr);
    grid-auto-rows: minmax(320px, auto);
    grid-template-areas:  'main   main  ibox' 
                          'main   main  .'
                          'main   main  .'
                          'wbox   wbox  abox'
                          'foot   foot  foot';
/*
  grid-template-areas:    'main   main  .     .' 
                          'main   main  wbox  wbox' 
                          'main   main  ibox  abox'
                          'main   main  .     .'
                          'main   main  foot  foot';
*/   
    gap:calc(var(--grid-area-gap,2rem) * 2);
    margin:1% 2%;
  }
}
@media (min-width:1280px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:  'main   main  main  main  .     .' 
                          'main   main  main  main  wbox  wbox'
                          'main   main  main  main  ibox  abox'
                          'main   main  main  main  .     .'
                          'foot   foot  foot  foot  .     .';
    gap:calc(var(--grid-area-gap,3rem) * 3);
    margin:2% 4%;
    }
}
@media (min-width:1920px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:  'main   main  main  main  .     .' 
                          'main   main  main  main  wbox  wbox'
                          'main   main  main  main  ibox  abox'
                          'main   main  main  main  .     .'
                          'foot   foot  foot  foot  .     .';
    gap:calc(var(--grid-area-gap,4rem) * 4);
    margin:4% 8%;
    }
}

/* ARTICLE - GRID AREA NAMES */
article:first-of-type     {grid-area:main;}   /* main-content */
article:nth-of-type(4)    {grid-area:wbox;}   /* wide-box */
article:nth-of-type(5)    {grid-area:ibox;}   /* info-box */
article:nth-of-type(6)    {grid-area:abox;}   /* add-box */
article:last-of-type      {grid-area:foot;}   /* foo-box */

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 09-09-22 */
/* link -> https://codepen.io/michellebarker/pen/poVvabe */
/* IMAGES */
/* images for ibox AND abox */
.img2fit {
  position:relative;
  width:100%;
  overflow:hidden;
  }
.img2fit .img2ibox {
  aspect-ratio: 2 / 2; /* OR 4 / 3; */
}
.img2fit .img2wbox {
  aspect-ratio: 4 / 1; /* OR 4 / 3; */
}
.img2fit img {
  width:100%;
  overflow:visible;
  object-fit:cover;
  transition:all .8s;
  transform:scale(1);
}
/* link -> https://w3bits.com/css-image-hover-zoom/ */
.img2fit:hover img {
   transform:scale(1.2);
  }

/* images for main-article AND wbox */
article:first-of-type img {
  width:100%;
  /*height: auto;*/
  aspect-ratio: 16 / 9;
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 08-09-22 */
/* ARTICLE */
article                   {
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.2);
  color:#fff;
  }
article .content          {padding:1rem;}
article .content p        {margin:0;padding:0;border:1px solid #ccc;}
article .content ul       {list-style-type:disc;color:#ccc;}

article .read-more        {margin-top:auto;}
section a                 {text-decoration:none;outline:none;color:inherit;}
/*section a:hover           {border: 1px solid #ccc;}*/

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 08-09-22 */
/* info 	-> link for iBox only - complete */
/* link 	-> https://codepen.io/argyleink/pen/poEjvpd */
/* update	-> 23-08-2021 */
/* link	OR	-> https://codepen.io/geoffgraham/pen/yLzvXyL */
.ibox-more {position:relative;}
.ibox-more::before {
	position:absolute;
	content:'';
	inset:0;
  width:100%;
  background: hsla(100,2%,35%,.2); /*hsl(45 100% 70%);*/
	border: 1px solid rgba(0,0,0,.1);
	transform:scaleX(0);
	transform-origin:right;
	transition:transform 0.5s ease-in-out;
	z-index:-1;
	}
.ibox-more:hover::before {transform:scaleX(1);transform-origin:left;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 08-09-22 */
/* 2ND GRID */
.grid-container:last-of-type {grid-area: main; gap:0; margin:0 4% 2%;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 07-09-22 */
/* FOOTER */
/*
footer {
	display: flex;
	flex-direction: row wrap;
  gap: 1rem;
  padding: 1rem;
	border: 1px solid red;
  background: #ccc;
}
*/
/*
footer .read-more {
  margin-top: auto;
  background:rgba(125,125,125,.8);
}
*/

/* SECTION HEADLINES */
section h1        {padding:.5rem;font-size: 2.2rem;}
section h2        {padding:.6rem .2rem 0 1rem;border: 1px solid #fff;border-width:0 0 1px 0;}
section h3        {padding: 1rem 2rem 0; font-size: 2rem;}
section h4        {padding: 1rem 2rem 0; font-size: 2rem;}
section h5        {padding: 1rem 2rem; background: #222; color: #ccc;}
section h5        {}
section footer h4 {padding: 0; font-size: 1.4rem;}

section footer {
  /*position:relative;*/
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap: 1rem;
  padding: 1rem;
  }

aside {position:relative;border: 1px solid red;} /* position relative for counter */

section aside.footer-item:hover {
  background: #222;
  }
.footer-item { 
  padding: 1rem;
  color: #ccc;
  }

.footer-item:nth-child(odd)   { background: #333; }
.footer-item:nth-child(even)  { background: #444; }
/* company logo */
/*.footer-item:first-of-type    {max-width:256px;}*/

.footer-item .adr-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;
  align-items: center;*/
}

ul li {
	/*list-style-type:none;*/
  border: 1px solid #fff;
	}
li {
	list-style-type:disc;
}

@media all and (min-width: 320px) {
  section footer { flex-flow: column; align-items: stretch;}  
  .footer-item { flex-grow:1;}
  }

@media all and (min-width: 768px) {
section footer { flex-flow: row wrap; align-items: stretch;}  
.footer-item { flex-grow:1;}
.footer-item:last-child { width: 100%;}
}

@media all and (min-width: 1280px) {
section footer { flex-flow: row; }
.footer-item { width: 100%; }
}

/* ARTICLE COLORS */
article:nth-of-type(1)            {background: orange;}
article:nth-of-type(1) .read-more {background: #cc8400;}

article:nth-of-type(2)            {background: hotpink;}
article:nth-of-type(2) .read-more {background: #ff369b;}

article:nth-of-type(3)            {background: olivedrab;}
article:nth-of-type(3) .read-more {background: #4c6519;}

article:nth-of-type(4)            {background: dodgerblue;}
article:nth-of-type(4) .read-more {background: #0077ea;}

article:nth-of-type(5)            {background: slategray;}
article:nth-of-type(5) .read-more {background: #5a6773;}

article:nth-of-type(6)            {background: tan;}
article:nth-of-type(6) .read-more {background: #c49c67;}

article:nth-of-type(7)            {background: red;}
article:nth-of-type(7) .read-more {background: #ff369b;}

/* HEADLINES */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight:normal;
  }

/* link / button */
.read-more {
  display:block;
  padding: 1rem;
  text-align:center;
  text-decoration:none;
  color: #fff;
  }

/* shadow */
article {
  box-shadow: 
  0 -1px 1px rgba(0,0,0,.05), 
  0 2px 2px rgba(0,0,0,.05), 
  0 4px 4px rgba(0,0,0,.05), 
  0 8px 8px rgba(0,0,0,.05), 
  0 16px 16px rgba(0,0,0,.05);
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 08-09-22 */
/* css-counter postion background */
/* info -> postion of the article OR aside must be relative !!! */
/*      -> works for ALL boxes
/* link -> https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */	
.box-counter::before, 
aside::after
  { 
	position:absolute;
  top:var(--count-pos-top,0);
  right:var(--count-pos-right,1rem);
  counter-increment:Element 1;
	content:counter(Element) '';
	font-size:var(--count-size,4rem); 
	font: 800 Arial;
	  -webkit-text-fill-color:transparent; /* works FF, Chrome and Edge */
	  -webkit-text-stroke:var(--count-width,1px);
	  -webkit-font-smoothing:antialiased;
	color:var(--count-color,#fff); /* must be the same color als card-back background */
  opacity:1;
	z-index:999;
	}
	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */