/****** STORE SKRÆME ******/

@media only screen and (min-width: 1920px) {
  /* Fixed header height for large screens */
  header#masthead {
    height: 100px;
  }

  /* Adjust hero section positioning for large screens */
  .page-slider-section {
    margin-top: -100px !important;
  }

  .page-slider-section .slider-text {
    padding-top: 100px;
  }
}

/****** BÆRBAR / MINDRE SKÆRME ******/

@media only screen and (max-width: 1240px) {
  :root body {
    /* Font sizes */
    --h1: 43px;
    --h2: 28px;
    --h3: 22px;
    --h4: 19px;
    --h5: 15px;
    --h6: 13px;
    --p: 15px;
    /* Gaps */
    --gap-l: 60px;
    --gap-m: 25px;
    --gap-s: 20px;
    /* Sidebar */
    --sidebar-width: 280px;
  }

  .stom-billede-sektion .stom-cols-6 {
    padding: var(--gap-l) 0;
  }

  /* Adjust slider text width for better readability */
  .page-slider-section .slider-text .slider-text-inner-wrapper {
    max-width: 80%;
  }

  /* Make hero buttons stack better on smaller screens */
  .page-slider-section .slider-text .stom-button {
    display: inline-block;
    margin-bottom: 10px;
  }

  /* Adjust employee grid for medium screens */
  .stom-medarbejdere {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on smaller desktop */
    gap: var(--gap-s);
  }
}

/****** IPADS - VERTIKALT ******/

@media only screen and (max-width: 959px) {
  :root body {
    /* Grid columns */
    --grid-2-cols: 1;
    --grid-3-cols: 2;
    --grid-4-cols: 2;
    --grid-5-cols: 3;
    --grid-6-cols: 3;
    --grid-7-cols: 4;
    --grid-8-cols: 4;
    --grid-9-cols: 5;
    --grid-10-cols: 5;
    --grid-11-cols: 6;
    --grid-12-cols: 6;
  }
	
	#colophon .grid-elements .grid-element:has(.footer-widgets.widgets-2) {
		justify-content: left;
	}
	#colophon .footer-widgets.widgets-3 .textwidget .stom-button {
		margin-left:0;
	}
	#colophon .footer-widgets.widgets-3 .textwidget p {
    text-align: left !important;
}
	
  /* Move this rule if you change the the grid columns */
  .last-on-mobile {
    order: 66;
  }

  .stom-posts {
    gap: var(--gap-s); /* Mindre afstand på tablet */
  }

  .stom-post-wrapper {
    flex: 1 1 calc(50% - var(--gap-s)); /* To kolonner på tablet */
    max-width: calc(
      50% - var(--gap-s)
    ); /* Sikrer, at de ikke overstiger bredden */
  }

  /* Adjust for tablet, make buttons more aligned vertically */
  .page-slider-section .slider-text .stom-button {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 15px;
    max-width: 300px;
  }

  .page-slider-section .slider-text .slider-text-inner-wrapper {
    padding-bottom: 40px;
  }

  .section-wrap .section {
    padding: var(--gap-s) var(--gap-m);
  }

  /* Adjust employee grid for tablets */
  .stom-medarbejdere {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  }
  
  .stom-medarbejder-thumb {
    padding-top: 110%; /* Slightly shorter aspect ratio */
  }
  
  .stom-medarbejder-title {
    font-size: calc(var(--h4) - 2px);
  }
  
  .stom-medarbejder-stilling {
    font-size: calc(var(--p) - 3px);
  }
}

@media only screen and (max-width: 810px) {
  /* Adjust header height for tablet */
  header#masthead {
    height: 80px;
  }

  .page-slider-section {
    margin-top: -80px !important;
  }

  .page-slider-section .slider-text {
    padding-top: 80px;
  }
}

/****** MINDRE END IPADS VERTIKALT ******/

@media only screen and (max-width: 782px) {
}

@media only screen and (max-width: 767px) {
  :root body {
    /* Font sizes */
    --h1: 30px;
    --h2: 25px;
    --h3: 20px;
    --h4: 18px;
    --h5: 14px;
    --h6: 12px;
    --p: 14px;
    /* Gaps */
    --gap-l: 50px;
    --gap-m: 20px;
    --gap-s: 15px;
    /* Outer margin */
    --content-margin: 0;
  }

  /* Make buttons stack vertically */
  .page-slider-section .slider-text .stom-button {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .page-slider-section .slider-text .slider-text-inner-wrapper {
    max-width: 100%;
    padding-bottom: 30px;
  }
  .overlap-image.stom-billede-sektion .stom-cols-6,
  .overlap-image.stom-billede-sektion.picture-left .stom-cols-6,
  .overlap-image.stom-billede-sektion.picture-right .stom-cols-6,
  .stom-billede-sektion .stom-cols-6,
  .stom-billede-sektion.picture-left .stom-cols-6,
  .stom-billede-sektion.picture-right .stom-cols-6 {
    padding: var(--gap-m) 0; 
  }

  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  }

  .stom-medarbejdere {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Keep employee grid at 2 columns on larger mobile */
  .stom-medarbejdere {
    gap: 10px;
  }
  
  .stom-medarbejder-thumb {
    padding-top: 100%; /* Square aspect ratio for mobile */
  }
}

@media only screen and (max-width: 639px) {
  :root body {
    /* Grid columns */
    --grid-2-cols: 1;
    --grid-3-cols: 1;
    --grid-4-cols: 1;
    --grid-5-cols: 1;
    --grid-6-cols: 1;
    --grid-7-cols: 1;
    --grid-8-cols: 1;
    --grid-9-cols: 1;
    --grid-10-cols: 1;
    --grid-11-cols: 1;
    --grid-12-cols: 1;
  }
  .stom-posts {
    flex-direction: column; /* Stacker elementer vertikalt på mobil */
    gap: calc(var(--gap-s) * 1.5);
  }

  .stom-post-wrapper {
    flex: 1 1 100%; /* Fuld bredde på mobil */
    max-width: 100%; /* Fuld bredde på mobil */
  }

  /* Increase text padding on mobile for better readability */
  .page-slider-section .slider-text {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Make header smaller on mobile */
  header#masthead {
    height: 70px;
  }

  .page-slider-section {
    margin-top: -70px !important;
  }

  .page-slider-section .slider-text {
    padding-top: 70px;
  }
}

/****** MOBILER ******/

@media only screen and (max-width: 479px) {
  /* Further adjustments for very small screens */
  .page-slider-section .slider-text .slider-text-inner-wrapper {
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .page-slider-section .slider-text {
    padding-top: 60px;
  }

  .stom-medarbejdere {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Switch to single column on very small screens */
  .stom-medarbejdere {
    grid-template-columns: 1fr; /* 1 column on small mobile */
    max-width: 320px;
    margin: 0 auto;
  }
  
  .stom-medarbejder-thumb {
    padding-top: 80%; /* Shorter aspect ratio for small screens */
  }
}

@media only screen and (max-width: 400px) {
  .page-slider-section .slider-text p {
    margin-bottom: 15px;
  }
}
