/* ==========================================================================
   Homewind – Components & Layout
   ========================================================================== */


/* --- Media Queries --- */

@media (max-width: 450px) {
.hero__card {
  background-position-x: -500px;
  }

  .hero__content{
  
    width: 80%;
  }
}

/* Mobile/Tablet nav-height override (Dropdown bis 959px) */
@media (max-width: 959px) {
  :root { --nav-height: 8rem; }
}

@media (min-width: 450px) {

  .hero__wrap {
    width: 100%;
    height: 72rem;
  }


  .hero,
  .section {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }

  .section--accent {
    padding-left: 0;
    padding-right: 0;
  }

  .hero__content{
    width: 80%;
  }

}
@media (min-width: 750px) {
  
  .section--fans { padding: 6.5rem var(--space-32) 11.376rem; }
  .section--dark { padding: var(--space-48) var(--space-32); }
}

/* Tablet (768px): 2-column cards + layout adjustments */
@media (min-width: 768px) {
  .hero,
  .section {
    padding-left: var(--space-48);
    padding-right: var(--space-48);
  }

  .hero__card {
    padding: var(--space-32) var(--space-32) 6.75rem;
  }

  .hero__title{
    font-size: var(--text-hero);
  }
  
  .hero__content{
    width: 40%;
  }

  #about.section {
    padding: var(--space-40) var(--space-64) var(--space-120);
  }

  /* Feature cards: 2 per row */

  .feature-card {
    flex-basis: calc(50% - var(--space-12));
    padding-top: 28rem;
  }

  .feature-card:nth-child(3) { 
    max-width: 100%;
  }


  .feature-card__content {
    padding: var(--space-20) var(--space-16);
  }

  .section--accent {
    padding-left: 0;
    padding-right: 0;
  }

  /* 768: larger device viewport */
  .device-carousel__viewport {
    max-width: 550px;
  }

  
  .page-footer__links,
  .page-footer__copy {
    flex: 1;
    width: 50%;
  }


  .page-footer__links {
    justify-content: flex-end;
  }

  .page-footer__copy {
    text-align: left;
  }


}

/* Desktop nav (960px): Hamburger → horizontal pill bar */
@media (min-width: 960px) {
  .page-header {
    padding: var(--space-40) var(--space-32) 0;
    text-align: center;
  }

  .hero__content{
    width: 40%;
  }

  .section{
    padding-top: var(--space-64);
  }

  .page-header__inner {
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    height: 8rem;
    justify-content: center;
    align-items: flex-start;
  }




  .nav__mobile-head { display: none; }
  .nav__list {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--space-8);
    min-width: auto;
    border-radius: var(--radius-xl);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__link { width: fit-content; }

  /* 960: section bg + padding, minimaler Abstand unten */
  .section--accent {
    background: #6b1a4a;
    padding: 64px 64px 0;
    border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;
  }


  /* 960: side-by-side layout */
  .section--accent__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 65px;
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
  }

  .device-carousel {
    flex: 0 0 420px;
    width: 420px;
    position: relative;
    order: 2;
    align-self: flex-end;
    background: transparent;
  }

  .device-carousel__viewport.animate {
    animation: 1s ease forwards slide-in-right;
  }

  .device-carousel__viewport {
    width: 720px;
    max-width: 720px;
  }


  .device-carousel__indicator-wrapper{
    border-radius: 24px 24px 0 0;
  }
  /* 960: indicator overlaid at bottom-left (Figma 1017:5176) */
  .device-carousel__indicator-bar {
    position: absolute;
    left: -54px;
    width: auto;
    min-width: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
    z-index: 1002;
    bottom: 0;
    pointer-events: auto;
  }


  /* 960: content fills remaining space, left-aligned */
  .device-carousel__content {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    background: transparent;
    padding: 0;
    align-items: flex-start;
  }

  .section--accent .product-cards {
    max-width: 320px;
    padding-bottom: 48px;
    gap: 40px;
  }

  .section--accent .section__block--accent,
  .section--accent .product-card {
    text-align: left;
    align-items: flex-start;
  }

  .section__block--accent .section__title,
  .section__block--accent .section__lead {
    text-align: left;
  }

  .section--accent .product-card__title,
  .section--accent .product-card__desc {
    text-align: left;
  }

  .section--accent .product-card__buttons {
    max-width: 340px;
  }




}

/* Desktop: 3 cards per row, full proportions */
@media (min-width: 1200px) {
  .hero,
  .section {
    padding-left: var(--space-64);
    padding-right: var(--space-64);
  }

  .hero__content{
    width: 40%;
  }


  .hero__card{
    padding: var(--space-64) var(--space-64) 6.75rem;
  }
  .feature-card {
    flex-basis: calc(33.333% - var(--space-16));
    padding-top: 32rem;
  }
  .feature-card__content {
    padding: var(--space-24) var(--space-16);
  }

  /* 1200: larger device carousel (Figma 1023:1693) */
  .device-carousel {
    flex: 0 0 624px;
    width: 624px;
  }

  .device-carousel__viewport {
    width: 640px;
  }

  .device-carousel__content {
    max-width: 640px;
  }

  .section--accent{
    border-radius: var(--radius-xxxl) var(--radius-xxxl) 0 0;
  }

  .section--accent .product-cards {
    max-width: none;
  }

  .section--accent .product-card__buttons {
    max-width: 340px;
  }

  .section--accent .product-card__desc {
    font-size: 16px;
  }


  .device-carousel__indicator-bar {
    left: 62px;
  }
}