/*
Description: Stylesheet for verkstad single page
Version: 1.1.0
*/
:root {
  --margin-bottom-default: 80px;
}

/** Typsnitt **/
#top.single-verkstad .all_colors strong, body.single-verkstad #main main a, body.single-verkstad #main main a:hover {color: var(--color-off-white);}
.center {text-align: center;}
.welcome-text {font-size: 3.5625rem;font-family: var(--font-family-heading); font-weight: var(--font-weight-heading);}
.main_color #verkstad-single h2 {margin: .2rem 0 .8rem;}


/** Verkstads sektion **/
  .verkstad-sec {margin-bottom: var(--margin-bottom-default); display: grid; gap: 1.7rem; clear: both;}

  .verkstad-card__openinghours{grid-area:one;}
  .verkstad-card__services{grid-area:two;}
  .verkstad-card__location{grid-area:three;}
  .verkstad-card__oppettider-ovrigt{grid-area:four; border:2px solid var(--color-off-white);padding: 20px;border-radius: var(--radius-default);}

  .verkstad-intro, .brands-region, .map-region, .verkstad-intro-text {margin-bottom: var(--margin-bottom-default);}


  /* Öppettider */
    .verkstad-card__openinghours .card-list dt,
    .verkstad-card__openinghours .card-list dd {display: inline;}
    .verkstad-card__openinghours .card-list dd::after {content: "\A"; white-space: pre;}
  /* Besök */
    #verkstad-single .address-block { margin: 0 0 10px; }
    .verkstad-sec__contact {margin-top: 2.4rem;}

  /* Karta */
    #verkstad-single .map-frame {display: inline-block;width: 100%;position: relative;overflow: hidden;border-radius: var(--radius-default);border: 1px solid var(--color-grey-1);aspect-ratio: 2 / 1;max-width: 900px;margin: 0 auto;}
    #verkstad-single .map-frame .image-overlay {display: none !important;}

  /* Bilmärken */
    #verkstad-single .brands {display: flex;gap: 40px 60px;flex-wrap: wrap;align-items: center;justify-content: space-evenly;background: var(--color-off-white);border-radius: var(--radius-default);padding: 20px 40px;margin: 0;}
    #verkstad-single .brands .brand-logo {width: auto;height: 80px;display: block;}


/** Media queries **/
  /* Desktop */
    @media only screen and (min-width:990px){
      .verkstad-sec  { grid-template-columns: 2fr 2fr 3fr; grid-template-areas: "one two three" "four four four";}
      #verkstad-single .map-frame { width: 900px;}
    }
  /* Tablet */
    @media only screen and (min-width:768px) and (max-width:989px){
      .verkstad-sec {grid-template-columns:1fr 1fr;grid-template-areas: "one three" "two three" "four four";}

    }
  /* Mobile */
    @media only screen and (max-width:767px){
      .verkstad-sec{grid-template-columns:1fr;grid-template-areas: "one" "four" "two" "three";}
      #top #main .welcome-text {font-size: var(--font-heading-1-2);line-height: var(--font-heading-3-line-height);}

      #verkstad-single .brands {gap: 20px 30px;padding: 20px 30px;}
      #verkstad-single .brands .brand-logo {height: 60px;}
    }