/* ============================================================
   GENRE TUOTANTO — queries.css
   Responsive breakpoints for all pages
   ============================================================ */

/* ─── 1920px ──────────────────────────────────────────────── */
@media (max-width: 120em) {
  html {
    font-size: 60%;
  }

  .prod-img {
    height: 100%;
    width: auto;
  }

}

/* ─── ~1600px · Hide side images, expand gallery ─────────── */
@media (max-width: 100em) {
  .main-nav-list {
    gap: 4.2rem;
  }

  /* Hide decorative side images */
  .prod-img {
    display: none;
  }

  /* When side images vanish, center the gallery and let it fill width */
  .gallery-section .prod-flex {
    justify-content: center;
  }

  .gallery-section .prod-flex > div:nth-child(2) {
    width: 100%;
  }

  .gallerySwiper {
    max-width: 100%;
    padding: 0 3rem !important;
  }

  .contact {
    max-width: 70rem;
  }
  .polaroid {
  top: 50%;
  left: 22%;
  width: 37%;

}
  .swiper-button-prev {
    left: 1rem !important;
  }

  .swiper-button-next {
    right: 1rem !important;
  }
}

/* ─── 1344px · Smaller desktops ──────────────────────────── */
@media (max-width: 84em) {
  html {
    font-size: 59%;
  }
  body {
          padding-top: 12.5rem;  

  }

  .header {
    padding: 3rem 1.4rem 5rem 1rem;
  }

  .sticky .front-banner {
    margin-top: 12.6rem;
  }

  .logo {
    width: 24.5rem;
    height: 7rem;
    margin-top: -2.4rem;
    margin-left: 1.2rem;
  }

  .main-nav-list {
    gap: 4rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.6rem;
  }

  .introbox {
    width: 60%;
  }

  .contact {
    max-width: 70rem;
  }

  .footer-contact {
    gap: 8rem;
  }

  .videoprod-img {
    width: 40%;
  }

  .videoprod-descr {
    font-size: 1.8rem;
  }

  .intro-content {
    padding: 0 6rem;
  }

  .topics-grid {
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
  }

  .podcast-descr {
    padding: 1rem 6rem;
  }

  .podcast-img {
    max-width: 60rem;
  }

  /* Gallery image height steps down */
  .gallery-img {
    height: 20rem;
  }
      .dropdown-arrow {
    font-size: 1.2rem;
  }
}

/* ─── 1200px · Landscape tablets ─────────────────────────── */
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }

  body {
          padding-top: 10.1rem;  

  }

  .header {
    padding: 2.4rem 1.4rem 3.2rem 1rem;
  }

  .sticky .front-banner {
    margin-top: 10.8rem;
  }

  .logo {
    width: 17.5rem;
    height: 5rem;
    margin-top: -1.6rem;
    margin-left: 0;
  }

  .main-nav-list {
    gap: 3.4rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 1.4rem;
  }

  .introbox {
    width: 70%;
    padding: 4rem 5rem 6rem 5rem;
  }

  .service-btn {
    padding: 1rem 2rem !important;
  }

  .promo-section {
    padding: 12rem 0 8rem 0;
    margin-left: 2rem;
  }

  .news-flex,
  .news-flex2 {
    gap: 3rem;
    padding: 0 3rem;
  }

  .news-box {
    max-width: 52rem;
  }

  .palvelut-box {
    width: 100%;
    height: auto;
  }

  .prod-box {
    gap: 3rem;
  }

  .footer-contact {
    gap: 6rem;
    padding: 0 4rem;
  }

  .yhteydenottolomake {
    margin-right: 2rem;
  }

  .lomake-img {
    max-width: 44rem;
  }

  .descr-box {
    padding: 6rem 10rem 6rem 14rem;
  }

  .gallery-section {
    background:
      linear-gradient(
        -0.23deg,
        rgba(223, 179, 19, 0.62) 0.1%,
        transparent 1.5%
      ),
      linear-gradient(176.8deg, rgba(255, 200, 0, 0.75) 0.8%, transparent 5.3%);
  }

  .gallery-grid {
    padding: 0 3.2rem 4.8rem 3.2rem;
  }
  .gallerySwiper {
    padding: 0 1rem !important;
  }

  .videoprod-flex {
    flex-direction: column-reverse;
  }

  .videoesit-flex {
    flex-direction: column;
  }

  .videoprod-img {
    width: 80%;
    height: auto;
    margin: 0 auto;
  }

  .videoprod-title {
    font-size: 3rem;
    padding: 4rem 4rem 1rem 4rem;
  }

  .videoprod-descr {
    padding: 1rem 8rem;
  }

  .production-process {
    padding: 4rem 4rem;
  }

  .process-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

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

  .presentation-result {
    padding: 6rem;
  }

  .polaroid-text {
    bottom: 7.5%;
  }

  .yhteys-descr {
    padding: 0 12rem;
  }
}

/* ─── 944px · Tablets ─────────────────────────────────────── */
@media (max-width: 59em) {
  html {
    font-size: 50%;
  }
  
  body {
      padding-top: 8.2rem;
  }

  .header {
    padding: 2.4rem 1.4rem 2.6rem 1rem;
  }

  .sticky .front-banner {
    margin-top: 10.2rem;
  }

  .main-nav-list {
    margin-top: 0.4rem;
  }

  .logo {
    width: 14rem;
    height: 4rem;
    margin-top: -1.6rem;
    margin-left: 0;
  }

  .front-banner {
    padding: 8rem 0 6rem 0;
  }

  .banner-img {
    max-width: 80vw;
  }

  .mySwiper,
  .swiper-slide img {
    height: 60rem;
  }

  .mySwiper::before,
  .mySwiper::after {
    width: 8rem;
  }

  /* Fix iOS: background-attachment: fixed broken on Safari/mobile */
  .promo-section {
    background-attachment: scroll;
    background-position: center center;
    justify-content: center;
    padding: 8rem 0;
    margin-left: 0;
  }

  .introbox {
    width: 85%;
    margin: 0 auto;
    padding: 4rem 4rem 6rem 4rem;
  }

  .news-flex,
  .news-flex2 {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 0 4rem;
  }

  .news-box {
    max-width: 68rem;
    width: 100%;
  }

  .prod-box {
    align-items: center;
    gap: 4rem;
  }

  .palvelut-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 4rem 4rem 8rem 4rem;
  }

  .palvelut-box {
    width: 100%;
    height: auto;
  }

  /* Contact form: image on top, form below */
  .lomake-flex {
    flex-direction: column;
  }

  .lomake-img {
    width: 100%;
    max-height: 50rem;
    object-fit: contain;
    order: -1;
    display: block;
    margin: 4rem auto 0;
  }

  .lomake-fill {
    flex: unset;
    width: 100%;
  }

  .yhteydenottolomake {
    margin-right: 0;
  }

  .footer-contact {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    padding: 0 4rem;
    margin-bottom: 8rem;
  }

  .footlogo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
  }

  /* Gallery — columns handled by JS, only tweak height and gap */
  .gallery-img {
    height: 18rem;
  }

  .gallery-grid {
    gap: 2rem;
  }

  /* Article / news pages */
  .article-header {
    flex-direction: column;
  }

  .article-cover {
    width: 100%;
    max-height: 40rem;
  }

  .news-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .card-image {
    width: 100%;
    height: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .card-title-box {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .card-coverage {
    padding: 4rem 6rem;
  }

  .descr-box {
    padding: 4rem 6rem;
  }

  .descr-imb-box {
    flex-direction: column;
    align-items: center;
  }

  .image-stack {
    width: 100%;
  }

  .yhteys-flex {
    flex-direction: column-reverse;
  }

  .moobs-img {
    max-width: 60rem;
    height: auto;
    margin-bottom: 8rem;
    align-self: center;
  }

  .result-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  .polaroid-text {
    bottom: 8%;
  }
  .news-grid-full {
  grid-template-columns: repeat(2, 1fr);
  padding: 2rem 3rem 4rem 3rem;
  gap: 3rem;
}
    .article-header-text {
  margin-left: 4rem;
}
  .moobsimg {
    text-align: center;
  }
  
  .intro-highlight {
      margin-left: 6rem;
  }
  


}

/* ─── 800px · Tablets 2 ───────────────────────────────────── */
@media (max-width: 50em) {
  html {
    font-size: 48%;
  }

  .main-nav-list {
    gap: 3rem;
  }

  .mySwiper,
  .swiper-slide img {
    height: 48rem;
  }

  .introbox {
    width: 95%;
    padding: 3rem 3rem 5rem 3rem;
  }

  /* Palvelut single column */
  .palvelut-grid {
    grid-template-columns: 1fr;
    max-width: 56rem;
    margin: 0 auto;
    padding: 4rem 2rem 8rem 2rem;
  }

  .contact {
    max-width: 70%;
    padding: 0 1.6rem 4rem 1.6rem;
  }

  .final-img {
    width: 100%;
    padding: 3rem;
  }

  /* Gallery — JS controls columns, step height down */
  .gallery-img {
    height: 16rem;
  }

  .gallery-grid {
    gap: 1.2rem;
  }

  .polaroid-text {
    bottom: 9%;
  }
  
.videoprod-descr,
.podcast-descr,
.yhteys-descr,
.vpsection-header p,
.process-step p,
.esitsection-heading p,
.presentation-card p,
.process-card p,
.edusection-heading p,
.edfsection-heading p{
    font-size: 2.2rem;
    line-height: 1.7;
    letter-spacing: 0.6px;
    margin-bottom: 2rem;
}


.result-box ul li,
.topic-card ul li,
.format-card p{
font-size: 2.2rem;
letter-spacing: 0.6px;
}
}

/* ─────────────────────────────────────────────────────────────
   ≤ 704px · MOBILE NAV ACTIVATES
   ───────────────────────────────────────────────────────────── */
@media (max-width: 44em) {
  html {
    font-size: 43.75%;
  }

body {
    padding-top: 0;
}


  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 1.6rem;
    position: relative;
    max-width: none;
    z-index: 1000;  
  }
  

  /* Pull logo out of absolute positioning so it flows in flex */
  .logo-wrapper {
    position: static;
    margin: 0;
  }

  .logo {
    width: 22rem;
    height: 6rem;
    margin: 0;
  }

  /* Show mobile nav button */
  .btn-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    transform: none;
    z-index: 10000;
    padding: 0.6rem;
    flex-shrink: 0;
  }

  .nav2 {
    width: 5rem;
    height: 5rem;
  }

  /* ── Fullscreen overlay nav ────────────────────────────────── */
  .main-nav {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 8, 5, 0.98);
    z-index: 9999;
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.35s ease-in-out,
      opacity 0.35s ease-in-out;
  }

  .header.nav-open .main-nav {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header.nav-open .btn-mobile-nav {
    z-index: 10000;
    position: fixed;
    top: 2.2rem;
    right: 1.6rem;
  }

  .header.nav-open .nav2 {
    display: none;
  }

  .header.nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
    color: rgb(218, 218, 218);
    margin-top: -1rem;
    margin-right: -0.4rem;
  }

  /* ── Vertical nav list ──────────────────────────────────────── */
  .main-nav-inner {
    width: 100%;
    padding: 10rem 4rem 6rem 4rem;
  }

  .main-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 0;
  }

  .main-nav-list > li {
    width: 100%;
    border-bottom: 1px solid rgba(180, 142, 42, 0.25);
  }

  .main-nav-list > li:first-child {
    border-top: 1px solid rgba(180, 142, 42, 0.25);
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    display: block;
    font-size: 3rem;
    padding: 2rem 0;
    letter-spacing: 0.08rem;
  }

  /* ── Dropdown: flatten inline ───────────────────────────────── */
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background-color: transparent;
    padding: 0 0 0.8rem 2rem;
    margin-top: 0;
    border-radius: 0;
    transition: none;
    box-shadow: none;
  }

  .dropdown-arrow {
    display: none;
  }

  .dropdown:hover .dropdown-arrow {
    transform: none;
  }

  .dropdown-link {
    font-size: 2.4rem;
    padding: 1rem 1rem;
    color: rgb(200, 194, 170);
  }

  /* ── Page layout ────────────────────────────────────────────── */
  .front-banner {
    padding: 15rem 2rem 15rem 2rem;
  }

  .banner-img {
    max-width: 85vw;
  }

  .mySwiper,
  .swiper-slide img {
    height: 36rem;
  }

  .promo-section {
    padding: 6rem 0;
    margin-left: 0;
  }

 .introbox {
    width: 100%;
    padding: 3rem 6.8rem 4rem 6rem;
    margin-right: 0;
  }

  .intro-text {
    line-height: 1.7;
    letter-spacing: 0.6px;
  }
  
  .service-buttons {
    gap: 1.4rem;
    margin-top: 3rem;
  }

  .news-section {
    padding: 3rem 0 4rem 0;
  }

  .news-flex,
  .news-flex2 {
    padding: 0 2rem;
    gap: 3rem;
  }

  .news-box {
    max-width: 85%;
  }

  .tuotanto-section {
    padding: 3rem 0 6rem 0;
  }

  .prod-box {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    padding: 0 2rem;
  }

  /* Palvelut page */
  .palvelut-section {
    padding: 2rem 0 0 0;
  }

  .palvelut-grid {
    grid-template-columns: 1fr;
    padding: 3rem 2rem 6rem 2rem;
    max-width: 80%;
    gap: 6rem
  }

  .palvelut-box {
    width: 100%;
  }

  /* Contact */
  .yhteydenottolomake {
    margin-right: 0;
  }
  
  .image-bg {
      display: none;
  }

.polaroid {
  position: relative;
  top: 32rem; /* adjust to move up/down */
  left: 50%; /* adjust to move left/right */
  width: 50%;
  margin-bottom: 8rem;

}
.polaroid-text p {
  font-size: clamp(1.4rem, 1.3vw, 2rem);
}
  .yhteys-descr {
    padding: 0 4rem;
  }

  .showreel {
    padding: 4rem 1rem 0 1rem;
  }

  /* Footer */
  .footer-contact {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4rem;
    margin-bottom: 6rem;
    padding: 0 2rem;
  }

  .footlogo-wrapper {
    margin-top: 0;
  }

  .firma-contact,
  .tarjous-contact {
    text-align: center;
  }

  footer {
    padding: 6rem 0 0 0;
  }

  /* Gallery — JS controls columns, just gaps and height here */
  .gallery-img {
    height: 14rem;
  }

  .gallery-grid {
    gap: 1.4rem;
  }

  /* Article pages */
  .article-title {
    font-size: 3.6rem;
  }

  .descr-box {
    padding: 3rem 2rem;
  }

  .card-coverage {
    padding: 3rem 2rem;
  }

  .coverage-title {
    margin-left: 1rem;
  }

  .coverage-flex {
    padding: 2rem 1rem;
    gap: 2.4rem;
  }

  .yd2 {
    padding: 0 8rem;
  }

  .lightbox-prev {
    left: 2rem;
  }

  .lightbox-next {
    right: 2rem;
  }

  .process-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .presentation-grid,
  .esitprocess-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .topics-grid {
    display: flex;
    flex-direction: column;
    padding: 0 8rem;
  }

  .topic-card {
    justify-items: center;
    width: 55%;
    margin: 0 auto;
  }
  
  .article-side {
  flex-direction: column;
}

.article-side .article-images {
  flex: unset;
  width: 100%;
  order: 2;
}

.article-side .article-body {
  order: 1;
}

    .article-header-text {
  margin-left: 2rem;
}

.article-side {
    margin-left: 2rem;   
}

.serv-descr {
    font-size: 2.2rem;
    line-height: 1.7;
    letter-spacing: 0.6px;
    margin-bottom: 2rem;
}

.process-step h3 {
    margin-top: 0.8rem;
}

.form-tempgrad {
    padding-bottom: 6rem;
}
  .intro-content {
    display: flex;
    flex-direction: column;
  }

  .intro-highlight {
    margin-left: 0;
}

.lightbox-close {
    top: 7rem;
    right: 3.6rem;
}

}

/* ─── 600px · Phones ──────────────────────────────────────── */
@media (max-width: 37em) {
  html {
    font-size: 37.5%;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3.2rem;
  }

  h1 {
    font-size: 4.8rem;
  }

  .gallery-img {
    height: 50rem;
  }
 .gal-swiper-slide img {
    height: 50rem;       
     opacity: 1;
  }
  .gallery-grid {
    gap: 1rem;
  }

  .gallerySwiper {
    margin-bottom: 2rem;
    padding: 0 2rem 2rem 2rem !important;
  }

  .mySwiper::before,
  .mySwiper::after {
    width: 6rem;
  }

  .article-images img {
    width: 100%;
  }

  .news-grid-full {
    grid-template-columns: 1fr;
    padding: 2rem 6rem 4rem 6rem;
  }
  
  .news-descr {
      font-size: 2.2rem;
      line-height: 1.7;
      letter-spacing: 0.6px;
  }


  .education-intro {
    padding: 4rem 0 0 0;
  }

  .topic-card {
    width: 70%;
  }
  .topic-card ul {
      padding-left: 1.6rem;
  }

  .format-list {
    padding: 0 4rem;
    gap: 2.4rem;
  }

   .polaroid {
    top: 35rem;
    margin-bottom: 14rem;
    width: 52%;
}

   .polaroid-text {
    bottom: 8%;
    line-height: 1.2;
  }
  .polaroid-text p {

  font-size: clamp(1.6rem, 1.3vw, 2rem);
}

  .swiper-pagination {
  bottom: 0.7rem !important;
}

  .gallerySwiper .swiper-pagination {
    padding: 0 3rem;   
  }
  
  .swiper-button-prev {
    left: 0.4rem !important;
  }

  .swiper-button-next {
    right: 0.4rem !important;
  }
   .intro-text {
    font-size: 2.2rem;
    line-height: 1.8;
    letter-spacing: 0.65px;
  }
  
  .service-btn:link,
  .tuotanto-btn:link,
  .service-btn:visited,
  .tuotanto-btn:visited,
  .read-btn:link,
  .read-btn:visited {
    font-size: 2.2rem;
  }

  .service-buttons {
    gap: 1.8rem;
  }
.article-body {
    font-size: 2.2rem;
    line-height: 1.7;
}

  
.videoprod-descr,
.podcast-descr,
.yhteys-descr,
.vpsection-header p,
.process-step p,
.esitsection-heading p,
.presentation-card p,
.process-card p,
.edusection-heading p,
.edfsection-heading p,
.result-text p {
    font-size: 2.4rem;
}

}

/* ─── 400px · Thin phones ─────────────────────────────────── */
@media (max-width: 26em) {
  html {
    font-size: 28.5%;
  }

  .logo {
    width: 18rem;
    height: 5rem;
  }

  .mySwiper,
  .swiper-slide img {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .gallery-section {
    background:
      linear-gradient(
        -0.23deg,
        rgba(223, 179, 19, 0.63) 0.1%,
        transparent 2.5%
      ),
      linear-gradient(176.8deg, rgba(255, 200, 0, 0.75) 0.8%, transparent 5.3%);
  }

  .gallery-img {
    height: 12rem;
  }

  .gallery-grid {
    gap: 0;
    padding: 2rem 8rem 4rem 8rem;
  }

  .swiper-button-prev {
    left: 2.5rem !important;
    width: 5rem !important;
    height: 5rem !important;
  }

  .swiper-button-next {
   right: 2.5rem !important;
    width: 5rem !important;
    height: 5rem !important;
  }

  .service-btn {
    padding: 0.8rem 1.4rem !important;
  }

  .topic-card {
    width: 80%;
  }
  
  .polaroid {
    top: 40rem;
  margin-bottom: 14rem;
  width: 52rem;
}
}