/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-09-22 */
/* file     -> layout-hgr.css */
/* colors   -> dark-blue  -> #233350 | rgb(35,51,80,1)  | hsl(219,39%,23%,1) */
/*          -> dark-red   -> #f13c43 | rgb(241,60,67,1) | hsl(358,87%,59%,1) */
/* demo     -> https://material.io/archive/guidelines/style/color.html#color-color-palette
/* material -> light-blue -> #03A9F4 | rgb(3,169,244,1) | hsl(199,98%,49%)   */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/raphaelgoetter/pen/rZJWdo */
/* info     -> grid-layout */
/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-09-22 */
/* ROOT and VARIBLES */
:root {
  --art-col-h1:   rgba(255,255,255,1);
  --art-bgr-h1:   rgba(0,0,0,.1);
  /* headlines    clamp -> small - view - large */
  --art-font-h1:  clamp(2.0rem, 2.5vw, 4.0rem);
  --art-font-h2:  clamp(1.8rem, 2.5vw, 3.2rem);
  --art-font-h3:  clamp(1.6rem, 2.5vw, 2.8rem);
  --art-font-h4:  clamp(1.4rem, 2.5vw, 2.4rem);
  --art-font-h5:  clamp(1.2rem, 2.5vw, 2.0rem);
  --art-font-h6:  clamp(1.0rem, 2.5vw, 1.8rem);
  --art-font-px:  clamp(1.0rem, 2.5vw, 1.2rem);
  /* margin and padding | max char per line */
  --art-pad-hx:   0 max(2rem, 2.5vw - 100% / 2); /* 0 1.4rem; */
  --art-pad-px:   0 max(2rem, 2.5vw - 100% / 2);
  --art-pad-ul:   0 max(3rem, 2.5vw - 100% / 2);
  --art-char-px:  70ch;
  /* images */
  --art-img-ar1:  16/9; /* OR 4/3; */

  /* footer */
  --foot-col-text:  rgb(255,255,255,1);
  --foot-bgr-area:  rgb(3,169,244,1);     /* def with color - but none; ia also good */
  --foot-gap-size:  1rem;                   /* def 1rem */
  --foot-pad-size:  1rem;                   /* def 1rem */
  --foot-bgr-box-o: rgb(3,169,244,1);     /* address-box 1st */
  --foot-bgr-box-e: rgb(3,169,244,1);     /* address-box 2nd */
  --foot-bgr-box-h: rgba(3,155,229,1);    /* address-box hover - complete */
  /* footer -> additional */
  --foot-bdr-area:  6px;                    /* border-radius        -> def 6px | OR 6px 0 */
  --foot-adr-logo:  2/1;                    /* logo - aspect-ratio  -> def 2/1 | 4/3 | 16/9 */
  --foot-hov-data:  rgba(2,136,209,1);    /* ul/li - data with hover-silde-effect */
  --foot-col-data:  rgb(255,255,255,.4);  /* ul/li - border with color */
  --foot-bdr-data:  0 0 1px 1px;            /* ul/li - with border  -> def 0 0 1px 1px | 0 0 0 1px */
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 12-09-22 */
/* COLORS */
header  {background: gray;}
nav     {background: dodgerblue;}
main    {background: lightgray;}
section {background: hotpink;}
article {background: orange;}
aside   {background: olivedrab;}
                      /* #03A9F4  light-blue */
footer  {background: var(--foot-bgr-area);border-radius:var(--foot-bdr-area);} 
.iboxes {background: lightskyblue;}
.copyr  {background: var(--foot-bgr-area);border-radius:var(--foot-bdr-area);}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-09-22 */
/* ARTICLE HEADLINES */
article           {padding:0;border-radius:6px;}
article h1, h2, h3, h4, h5, h6 {margin:0;padding:0;font-weight:100;}

article h1        {padding:var(--art-pad-hx);  font-size:var(--art-font-h1);
                    color:var(--art-col-h1);background:var(--art-bgr-h1);
                    border:1px solid; border-width: 0 0 1px 0;
                    }
article h2        {padding:var(--art-pad-hx);  font-size:var(--art-font-h2);  /* with line-clamp !!! */
                    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
                    overflow:hidden;text-overflow:ellipsis;
                    }
article h3        {padding:var(--art-pad-hx);  font-size:var(--art-font-h3);}
article h4        {padding:var(--art-pad-hx);  font-size:var(--art-font-h4);}
article h5        {padding:var(--art-pad-hx);  font-size:var(--art-font-h5);}
article h6        {padding:var(--art-pad-hx);  font-size:var(--art-font-h6);}

/* link -> https://web.dev/min-max-clamp/ -> see padding management */
/*      -> https://css-tricks.com/using-max-for-an-inner-element-max-width/ */
article p, ul     {padding:var(--art-pad-px);max-width:var(--art-char-px);font-size:var(--art-font-px);}
article ul        {padding:var(--art-pad-ul)};
article hr.line-s	{margin:.4rem 0;border:solid rgba(255,255,255,.2);border-width: 0 0 1px 0;}
article hr.line-x	{margin:.4rem 2rem;border:solid rgba(255,255,255,.4);border-width: 0 0 8px 0;border-radius:4px;}

article .read-more      {display:block;padding:1rem;text-align:center;text-decoration:none;font-size:1.2rem;
                          border-radius:0 0 6px 6px;background:rgba(255,255,255,.6);color: #666;}
article .read-more:hover{background:rgba(255,255,255,1.8);transition: all 1.4s;}

/* images for main-article AND wbox */
article:first-of-type img {width:100%;aspect-ratio:var(--art-img-ar1);} /* def 16 / 9 */

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 10-09-22 */
/* GRID - CONTAINER */
/* AREA NAMES */
header    {grid-area:header;}     /* top 1-3 */
nav       {grid-area:nav;}        /* top under header */
main      {grid-area:main;}
section   {grid-area:section;}
article   {grid-area:article;}
aside     {grid-area:aside;}      /* left */
footer    {grid-area:footer;}
.iboxes   {grid-area:iboxes;}     /* right */
.copyr    {grid-area:copyr;}      /* under/sub footer */

/* ------------------------------------------------------------------------------ */
/* from 1281px | 1920px - and more */
/* info -> https://developer.mozilla.org/en-US/docs/Web/CSS/max-content */
.container {
    display:grid;
    grid-template-columns: 15%      2.5fr        0.8fr;
    grid-template-rows:  auto   auto    auto    auto;
    grid-template-areas:'header header  header  header'
                        'nav    nav     nav     nav'
                        'aside  main    iboxes  iboxes'
                        'aside  main    iboxes  iboxes'
                        'footer footer  footer  footer'
                        'copyr  copyr   copyr   copyr';
    gap:calc(var(--grid-area-gap,4rem) * 2);
    margin:2% 4%;
    height:auto; /* calc(100vh - 2em); */
    }

/* max 1280px */
@media (max-width:1280px) {
.container {
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:'header header  header'
                        'nav    nav     nav'
                        'aside  main    iboxes'
                        'footer footer  footer'
                        'copyr  copyr   copyr';
    gap:calc(var(--grid-area-gap,4rem) * 1.5);
    margin:2% 4%;
    /*height:auto; /* calc(100vh - 2em); */
    }
}
  
/* max 768px */
@media (max-width:768px) {
    .container {
    grid-template-columns:auto auto;
    grid-template-rows:   auto auto;
    grid-template-areas:'header header'
                        'nav    nav'
                        'main   iboxes'
                        'main   aside'
                        'footer footer'
                        'copyr  copyr';
    gap:calc(var(--grid-area-gap,2rem) * 1);
    margin:1% 2%;
    /*height: auto;*/
    }
  }

/* max 480px */
/* info -> NO ASIDE */
@media (min-width: 199px) and (max-width: 480px) {
    .container {
      grid-template-columns:1fr;
      grid-template-rows:   auto;
      grid-template-areas:  'header'
                            'nav'
                            'main'
                            'iboxes'
                            'footer'
                            'copyr';
    gap:calc((var(--grid-area-gap,1rem) * .4));
    margin:0;
    }
    /* CORRECTION SPACES FOR SMALL SCREENS */
    body, header, nav, main, aside, section, article, .iboxes, footer, .copyr {margin:0;padding:0;}
    /* DONT SHOW ASIDE */
    aside {display:none;}
  }

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-09-22 */
/* BODY */
body    {background: #fff;}
/* HTML - ELEMENTS */
header, nav, main, aside, /*section,*/ /*article,*/ .iboxes, .copyr {padding:var(--grid-area-pad);color:var(--foot-col-text,#fff);}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-09-22 */
article .article-container img {  
  width:100%;
  height:auto;
  /*margin:0;
  padding:.8rem;*/
  object-fit: cover;
  /*aspect-ratio: 16/9;*/
  aspect-ratio: 4/3;
  /*border: 1px solid #fff;
  background: rgba(255,255,255,.4);*/
  }
article .article-container .img-right {float:right;padding-left:2rem;}
article .article-container .img-left  {float:left;padding-right:2rem;}
article .article-container .img-clear {clear:both;}
article .article-container .img-small {width:50%;margin:.6rem 0;}

@media all and (max-width: 768px) {
    article .article-container      {display:flex;flex-direction:column;}
    article .article-container img  {width:100%;}
    article .article-container .img-right, .img-small {width:100%;margin:1rem 0 0 -2rem;} 
    article .article-container .img-left, .img-small  {width:100%;margin:1rem -2rem 0 0;}
  }

/* article -> image -> with shadow its better to add margin/padding */
article figure {position:relative;margin:0;padding:0;overflow:hidden;box-shadow:0 4px 16px 0 rgba(0,0,0,.4);}
/* image add info */
/* link -> https://codepen.io/kriztiank/pen/zejgLm */
article figure figcaption {position:absolute;display:flex;justify-content:center;align-items:center;
  width:100%;
  height:4rem;
  border:1px solid rgba(255,255,255,.8);
  border-width:1px 0 0 0;
  font-size:1.4rem;
  background:rgba(204,204,204,.8);
  color:#111;
  transition: .4s;
  cursor:default;
  }
article figure:hover figcaption {margin-top:-4rem;} /* must be the same value as above */
/* for image compyright only */
article figcaption .img-copyright {position:absolute;right:0;bottom:.4rem;padding:0 .8rem;font-size:.8rem;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-09-22 */

/* DOES NOT WORK -> FOOTER SMALL !!!
.ibox {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-around;
  align-items:stretch;
  gap: 1rem;
  border: 1px solid #fff;
  }
*/
/*@media (min-width: 320px) {.ibox {flex-flow:column;} .ibox-item {flex-grow:1;}*/
/*@media (min-width: 768px) {.ibox {flex-flow:column;} .ibox-item {flex-grow:1;}*/
/*@media (min-width:1280px) {.ibox {flex-flow:row wrap;} .ibox-item {max-width:100%;}*/
/*article.ibox-item:nth-child(3) {flex-grow:1;max-width:100%;border:3px solid green;}*/

/* link -> https://codepen.io/raphaelgoetter/pen/xxYgdOx */
.card {
  --breakpoint: 100%;
  max-width:var(--breakpoint);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1rem;
  }

.card > * {
  flex-basis: calc((var(--breakpoint) - 100%) * 999);
  margin:0;
  }
.card-img {
  flex-grow:1;
  object-fit:cover;
  max-height:200px;
}
.card-body {
  flex-grow:2;
}
/* deco */
.card {
  margin:0 auto;
  background: #ccc;
  color: #fff;
}
.card-body {
  font-size: 1rem;
  font-weight:200;
  text-align:left;
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 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 - 12-09-22 */
/* FOOTER - COMPANY DATA */
/* MEDIA - DO NOT TOUCH !!! */
@media (min-width: 320px) { footer {flex-flow:column;} .footer-item {flex-grow:1; }
@media (min-width: 780px) { footer {flex-flow:row wrap;} .footer-item {flex-grow:1;} .footer-item:nth-last-child(2) {border:0px solid yellow;} }
@media (min-width:1280px) { footer {flex-flow:row;} .footer-item {width:100%;} 
                            .footer-item:last-child {border:0px solid blue;}}

/* logo company -> NO SHOW on small screens -> max 512px test */
@media (max-width: 830px) { footer .footer-item:nth-child(1) {display:none;} }
/* DEFAULT - DO NOT TOUCH !!! */
footer {display:flex;justify-content:center;align-items:stretch;align-content:stretch;
          gap:var(--foot-gap-size,1rem);padding:var(--foot-pad-size,1rem);}

footer .footer-item:last-child {border:0px solid red;}

/* DETAILS - ADDRESS BOX*/
footer .footer-item             {object-fit:contain;border-radius:6px;color:var(--foot-col-text,#fff);}
footer .footer-item:hover       {background:var(--foot-bgr-box-h) !important;transition:all .8s;}
footer .footer-item h4          {margin:0;padding:.6rem 1rem;border:1px solid var(--foot-col-text,#fff);border-width:0 0 1px 0;font-size:1.4rem;}
footer .footer-inner            {margin:0 1rem;}
footer .footer-item .adr-logo   {display:flex;flex-direction:column;align-items:center;aspect-ratio:var(--foot-adr-logo,2/1);
                                  border:0 solid var(--foot-col-text,#fff);background:none;}

/* ADR-LOGO IMAGE SCALEs DOWN !!! */
footer .footer-item:nth-child(1) .adr-logo img {object-fit:contain;max-width:100%;border:0px solid red;}

/* ADRESS DATA */
footer .footer-item p           {-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
footer .footer-item ul          {list-style-type:none;list-style-position:outside;padding:.4rem;
                                  border:solid var(--foot-col-data);border-width:var(--foot-bdr-data);}
footer .footer-item li          {padding-left: .6rem;}
footer .footer-item li::marker  {font-size:1.4rem;color:red;} /* color for fall-back */
/* versions of font-awesome above 4.7.0 */
footer .footer-item li .fa-cog          {color:var(--foot-col-text,#fff);}
/* hover -> fade-in AND fade-out */
footer .footer-item li                  {transition:all 2s;}
footer .footer-item li:hover,     
footer .footer-item li:focus            {color:var(--foot-col-text,#fff);background:var(--foot-bgr-box-h);
                                          box-shadow:inset 0 -30px var(--foot-hov-data,#0288D1);transition:all .8s;cursor:default;}
footer .footer-item .no-hover:hover,     
footer .footer-item .no-hover:focus     {background:none;box-shadow:none;transition:none !important;}
/* for links and email */
footer .footer-item .add-link           {color:var(--foot-col-text,#fff);text-decoration:none;border:none;cursor:pointer;}  
/* fa-clock-o | unicode: f017 */
footer .footer-item .icon-clock         {margin:0 0 0 2.2rem;padding:0 0 0 0rem;list-style-position:outside;}
footer .footer-item .icon-clock::before {margin:0 0 0 -2rem;padding:0 1rem 0 0;font-family:'FontAwesome';content:'\f017 ';}
footer .footer-item .marker-noshow      {list-style-type:none;}
/* hover -> data-box */
footer .footer-item:nth-child(odd)      {background:var(--foot-bgr-box-o);}
footer .footer-item:nth-child(even)     {background:var(--foot-bgr-box-e);}

/* FOOTER SUB FOR COPYRIGHT */
.copyr                                  {display:flex;justify-content:center;align-items:stretch;align-content:stretch;margin:0;padding:0;}
.copyr .copyr-item                      {margin:0;padding:0 .4rem;font-size:1rem;}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */