@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Six+Caps&display=swap');

:root {
   --divider-spacing: 1rem;
}

/* ===== Podstawowe style ===== */
.wp-block-montoya-gutenberg-container {
   max-width: 1600px;
   margin: 0;
   padding: 0;
}
.content-max-width {
   padding-left: 0;
   padding-right: 0;
   max-width: 1320px;
}
.description-text {
   font-family: 'Rajdhani', sans-serif;
   padding: 30px 0 30px 50px;
   max-width: 1300px;
   margin: 0 auto;
   font-size: 24px;
   line-height: 1.8;
   text-align: left;
   font-weight: 600;
   color: #333;
}

/* ===== Layout strony ===== */
.page-layout {
   width: 100%;
   display: flex;
   min-height: 500px;
   background: #fff;
   padding: 0;
   margin: 0;
}

/* ===== LISTA ===== */
.bayan-list {
   width: 25%;
   padding: 80px 20px 40px 20px;
   background: #fff;
}
.bayan-list ul {
   list-style: none;
   padding: 0;
   margin: 0;
   width: 100%;
}
.bayan-list li {
   margin: 0 -20px 5px -20px;
   box-sizing: border-box;
   transition: background-color 0.3s ease;
}
.bayan-list li:last-child {
   margin-bottom: 0;
}

/* ===== STYLE H2 WEDŁUG WZORCA Z PIERWSZEGO PLIKU ===== */
.bayan-list li h2 {
   margin: 0;
   padding: 0;
   font-family: 'Rajdhani', sans-serif;
   font-size: 24px;
   font-weight: 600;
   letter-spacing: 2px;
   line-height: 1.2;
   color: #333;
}
.bayan-list li h2 a {
   display: block;
   padding: 10px;
   color: inherit;
   text-decoration: none;
   transition: background-color 0.3s ease;
}

/* ===== HOVER & AKTYWNE - KOLORY Z DRUGIEGO PLIKU ===== */
.bayan-list li h2 a:hover {
   background: rgba(0, 204, 153, 0.1);
}
.bayan-list li.active h2 a,
.bayan-list li.active h2 a:hover {
   background: #00cc99;
   color: #fff;
}

/* ===== Slider i specyfikacja ===== */
.content-container {
   width: 75%;
   display: flex;
   flex-direction: column;
   background: #fff;
   align-items: center;
   position: relative;
}
.image-container {
   width: 100%;
   display: flex;
   justify-content: center;
   background: #fff;
   overflow: hidden;
   padding-top: 40px;
}
.model-image-container {
   width: 1000px;
   height: 500px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}
.model-image {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   object-position: center;
}

/* ===== Opis modelu ===== */
.model-description {
   width: 100%;
   padding: 20px 2rem;
   text-align: center;
   transition: all 0.5s ease-in-out;
}
.model-description-text {
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.3rem;
   line-height: 1.6;
   color: #333;
   font-weight: 500;
   max-width: 900px;
   margin: 0 auto;
   text-align: justify;
   white-space: pre-line;
   orphans: 3; widows: 3; text-align-last: left;
}

/* ===== Sekcja specyfikacji ===== */
.specs-section {
   width: 100%;
   padding: 2rem;
   display: grid;
   grid-template-areas:
       "variants variants variants"
       "prawa    lewa     pozostale";
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2rem;
   transition: all 0.5s ease-in-out;
}
.column-header {
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.6rem;
   margin: 0 0 1rem 0;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-align: left;
}
.spec-item {
   display: flex;
   flex-direction: column;
   padding: 0.2rem;
   margin-bottom: 0.2rem;
   pointer-events: none;
}
.spec-group {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.2rem;
   width: 100%;
   gap: 0.2rem;
   position: relative;
   padding-bottom: 2px;
}

/* ===== STYLE SPECYFIKACJI WEDŁUG WZORCA Z PIERWSZEGO PLIKU ===== */
.spec-label {
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.2rem;
   font-weight: 600;
   color: #000000;
   text-align: left;
   position: relative;
   background: white;
   padding-right: 10px;
}
.spec-value {
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.2rem;
   font-weight: 600;
   color: #888888;
   text-align: right;
   background: white;
   padding-left: 10px;
   position: relative; 
   z-index: 1;
}

.spec-group::after {
   content: "";
   position: absolute;
   bottom: 0.3em;
   left: 0;
   width: 100%;
   border-bottom: 1px dotted #ccc;
   z-index: 0;
}
.manual-label {
   background: #E5E6F2;
   padding: 0.2rem;
   font-weight: 600;
   margin-bottom: 0.2rem;
   color: #000;
}
.variants-header {
   grid-area: variants;
   text-align: center;
   margin-bottom: 15px;
   z-index: 10;
}

/* ===== STYLE PRZYCISKÓW - KOLORY Z DRUGIEGO PLIKU ===== */
.variant-button {
   padding: 0.4rem 0.8rem;
   cursor: pointer;
   margin: 0 0.3rem;
   transition: all 0.3s ease;
   font-size: 1rem;
   font-family: 'Rajdhani', sans-serif;
   font-weight: 600;
   border: none;
   background: none;
   outline: none;
   color: #333;
}
.variant-button.active,
.variant-button.active:hover {
   background: #00cc99;
   color: #fff;
   padding: 0.3rem 0.6rem;
   font-size: 1.1rem;
   border-radius: 4px;
}

/* ===== MEDIA QUERIES ===== */
/* 1366px */
@media (max-width: 1366px) {
   .page-layout { flex-direction: column; }
   .bayan-list {
       width: 100%; padding: 20px; order: 2;
   }
   .bayan-list ul {
       display: grid; grid-template-columns: repeat(4,1fr);
       gap: 12px; max-width: 1100px; margin: 0 auto; padding:0 15px;
   }
   .bayan-list li h2 a {
       font-size: 16px; padding: 8px;
       background: rgba(0,204,153,0.1); color:#fff;
       border-radius:4px;
       text-align: center;
       min-height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       white-space: normal;
       box-sizing: border-box;
   }
   .bayan-list li.active h2 a,
   .bayan-list li h2 a:hover {
       background:#00cc99; color:#fff; font-size:18px;
       padding:8px;
   }
   .content-container { width:100%; order:1; }
   .model-image-container { width:1100px; height:550px; }
   .model-description { padding:15px 1.5rem; }
   .model-description-text { font-size:1.2rem; }
   .specs-section {
       grid-template-areas:
         "variants"
         "prawa"
         "lewa"
         "pozostale";
       grid-template-columns:1fr; padding:1rem;
   }
   .column-header { font-size:1.4rem; text-align:center; }
   .description-text {
       font-size:22px; padding:25px 40px; text-align:center;
   }
   .spec-label, .spec-value { font-size:1.1rem; }
   .variant-button { font-size:1.1rem; padding:0.35rem 0.7rem; }
}

/* 1200px */
@media (max-width: 1200px) {
   .model-image-container { width:800px; height:400px; }
}

/* 1024px */
@media (max-width: 1024px) {
   .description-text { font-size:26px; padding:40px 30px; }
   .model-description-text {
       hyphens:auto; -webkit-hyphens:auto;
       hyphenate-limit-chars:8 4 4;
       hyphenate-limit-before:4; hyphenate-limit-after:4;
   }
}

/* 768px */
@media (max-width: 768px) {
   .page-layout {
       flex-direction: column;
   }
   
   .content-container {
       width: 100%;
   }
   
   .model-image-container { 
       width: 600px; 
       height: 300px; 
   }
   
   .model-description {
       padding: 15px 1.5rem;
   }
   
   .model-description-text {
       text-align: justify;
       text-align-last: left;
       padding: 0 1rem;
       hyphens: auto;
       -webkit-hyphens: auto;
       hyphenate-limit-chars: 12 6 6;
       hyphenate-limit-before: 6;
       hyphenate-limit-after: 6;
       hyphenate-limit-lines: 2;
       word-spacing: normal;
       letter-spacing: 0.01em;
       font-size: 1.1rem;
       white-space: pre-line !important;
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
       word-break: normal;
       overflow-wrap: break-word;
   }
   
   .specs-section {
       grid-template-areas: 
           "variants"
           "prawa"
           "lewa"
           "pozostale";
       grid-template-columns: 1fr;
       gap: 2rem;
       padding: 1rem 1.5rem;
   }
   
   .column-header {
       font-size: 1.6rem;
       text-align: center;
   }
   
   .spec-label, 
   .spec-value {
       font-size: 1rem;
   }
   
   .bayan-list {
       order: 6;
       width: 100%;
       padding: 50px 0 20px 0;
       box-sizing: border-box;
   }
   
   .bayan-list ul {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 10px;
       padding: 0;
       margin: 0;
       width: 100%;
       box-sizing: border-box;
   }
   
   .bayan-list li {
       margin: 0;
       width: 100%;
       box-sizing: border-box;
   }
   
   .bayan-list li h2 a {
       font-size: 20px;
       padding: 8px 4px;
       white-space: normal;
       text-align: center;
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 60px;
       border-radius: 4px;
       background: rgba(0, 204, 153, 0.1);
       color: #fff;
       box-sizing: border-box;
       transition: none;
       position: relative;
       margin: 0;
       line-height: 1.1;
   }
   
   .bayan-list li.active h2 a,
   .bayan-list li.active h2 a:hover {
       background: #00cc99;
       color: #fff;
       width: 100%;
       transform: none;
       font-size: 22px;
   }
   
   .bayan-list li h2 a:hover {
       background: #00cc99;
       color: #fff;
       transform: none;
       width: 100%;
   }
   
   .variants-header {
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
   }
   
   .variant-button {
       width: 100%;
       max-width: 200px;
       text-align: center;
   }
   
   .variant-button.active,
   .variant-button.active:hover {
       font-size: 1.3rem;
       padding: 0.3rem 0.6rem;
   }
}

/* 428px */
@media (max-width: 428px) {
   .description-text {
       font-size: 20px;
       padding: 20px 15px;
   }
   
   .model-image-container { 
       width: 100%;
       height: 250px;
   }
   
   .model-description {
       padding: 10px 1.5rem;
   }
   
   .model-description-text {
       text-align: justify;
       text-align-last: left;
       padding: 0 1.5rem;
       hyphens: auto;
       -webkit-hyphens: auto;
       hyphenate-limit-chars: 12 6 6;
       hyphenate-limit-before: 6;
       hyphenate-limit-after: 6;
       hyphenate-limit-lines: 2;
       word-spacing: normal;
       letter-spacing: 0.01em;
       font-size: 1rem;
       white-space: pre-line !important;
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
       word-break: normal;
       overflow-wrap: break-word;
   }
   
   .specs-section {
       padding: 1rem 1.5rem;
   }
   
   .bayan-list ul {
       gap: 8px;
   }
   
   .bayan-list li h2 a {
       font-size: 16px;
       padding: 6px 3px;
       min-height: 55px;
       line-height: 1.1;
       background: rgba(0, 204, 153, 0.1);
       color: #fff;
   }
   
   .bayan-list li.active h2 a,
   .bayan-list li h2 a:hover {
       background: #00cc99;
       color: #fff;
       font-size: 17px;
   }
   
   .spec-label {
       font-size: 0.90rem;
   }
   
   .spec-value {
       font-size: 0.90rem;
   }
   
   .variant-button {
       font-size: 1.2rem;
       padding: 0.6rem 1.2rem;
   }
   
   .column-header {
       font-size: 1.4rem;
   }
}

/* iPhone 11 i podobne - POPRAWKI */
@media (max-width: 414px) and (min-width: 375px) {
    .model-description-text {
        text-align: justify;
        text-align-last: left;
        padding: 0 1.5rem;
        hyphens: auto;
        -webkit-hyphens: auto;
        hyphenate-limit-chars: 6 4 4;
        hyphenate-limit-before: 4;
        hyphenate-limit-after: 4;
        hyphenate-limit-lines: 2;
        word-spacing: normal;
        letter-spacing: 0.01em;
        font-size: 1rem;
        white-space: pre-line !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        word-break: normal;
        overflow-wrap: break-word;
    }
    
    .specs-section {
        padding: 1rem 2.5rem !important;
    }
    
    .column.left,
    .column.right, 
    .column.remaining {
        padding: 0 0.5rem !important;
    }
    
    .bayan-list ul {
        gap: 6px;
    }
    
    .bayan-list li h2 a {
        font-size: 14px;
        padding: 5px 2px;
        min-height: 50px;
        line-height: 1.0;
        background: rgba(0, 204, 153, 0.1);
        color: #fff;
    }
    
    .bayan-list li.active h2 a,
    .bayan-list li h2 a:hover {
        font-size: 14px;
        background: #00cc99;
        color: #fff;
    }
    
    .variant-button {
        font-size: 0.9rem !important;
        padding: 0.3rem 0.6rem !important;
        margin: 0 0.2rem !important;
    }
    
    .variant-button.active,
    .variant-button.active:hover {
        font-size: 1rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* iPhone 2020 i starsze (iOS 13-14) */
@media (max-width: 414px) and (min-width: 375px) and (-webkit-device-pixel-ratio: 2) {
   .model-description-text {
       text-align: justify;
       text-align-last: left;
       padding: 0 1.5rem;
       hyphens: auto;
       -webkit-hyphens: auto;
       hyphenate-limit-chars: 15 7 7 !important;
       hyphenate-limit-before: 7 !important;
       hyphenate-limit-after: 7 !important;
       hyphenate-limit-lines: 0 !important;
       hyphenate-limit-zone: 8% !important;
       word-spacing: -0.02em;
       letter-spacing: 0.015em;
       font-size: 1rem;
       white-space: pre-line !important;
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
       word-break: normal;
       overflow-wrap: break-word;
       text-justify: inter-character;
   }
}

/* iPhone 11 i nowsze (iOS 15+) */
@media (max-width: 414px) and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
   .model-description-text {
       hyphens: none !important;
       -webkit-hyphens: none !important;
       word-break: keep-all !important;
       overflow-wrap: break-word;
       word-spacing: -0.03em;
       letter-spacing: 0.02em;
   }
}

/* 390px - Małe telefony */
@media (max-width: 390px) {
   .description-text {
       font-size: 18px;
       line-height: 1.6;
   }
   
   .model-image-container {
       height: 200px;
   }
   
   .model-description-text {
       text-align: justify;
       text-align-last: left;
       padding: 0 1.5rem;
       hyphens: auto;
       -webkit-hyphens: auto;
       hyphenate-limit-chars: 12 6 6;
       hyphenate-limit-before: 6;
       hyphenate-limit-after: 6;
       hyphenate-limit-lines: 2;
       word-spacing: normal;
       letter-spacing: 0.01em;
       font-size: 0.95rem;
       white-space: pre-line !important;
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
       word-break: normal;
       overflow-wrap: break-word;
   }
   
   .specs-section {
       padding: 1rem 1.5rem;
   }
   
   .bayan-list ul {
       gap: 5px;
   }
   
   .bayan-list li h2 a {
       font-size: 14px;
       padding: 4px 2px;
       min-height: 48px;
       line-height: 1.0;
       background: rgba(0, 204, 153, 0.1);
       color: #fff;
   }
   
   .bayan-list li.active h2 a,
   .bayan-list li h2 a:hover {
       font-size: 15px;
       background: #00cc99;
       color: #fff;
   }
   
   .variant-button {
       font-size: 0.85rem;
       padding: 0.25rem 0.5rem;
       margin: 0 0.15rem;
   }
   
   .variant-button.active,
   .variant-button.active:hover {
       font-size: 0.95rem;
       padding: 0.2rem 0.4rem;
   }
   
   .spec-label, 
   .spec-value {
       font-size: 0.85rem;
   }
}

/* 320px - Bardzo małe telefony */
@media (max-width: 320px) {
   .description-text {
       font-size: 16px;
       padding: 15px 10px;
   }
   
   .model-image-container {
       height: 180px;
   }
   
   .model-description {
       padding: 8px 1rem;
   }
   
   .model-description-text {
       text-align: justify;
       text-align-last: left;
       padding: 0 1rem;
       hyphens: auto;
       -webkit-hyphens: auto;
       hyphenate-limit-chars: 12 6 6;
       hyphenate-limit-before: 6;
       hyphenate-limit-after: 6;
       hyphenate-limit-lines: 2;
       word-spacing: normal;
       letter-spacing: 0.01em;
       font-size: 0.9rem;
       white-space: pre-line !important;
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
       word-break: normal;
       overflow-wrap: break-word;
   }
   
   .specs-section {
       padding: 1rem;
   }
   
   .bayan-list ul {
       gap: 4px;
   }
   
   .bayan-list li h2 a {
       font-size: 13px;
       padding: 3px 1px;
       min-height: 45px;
       line-height: 1.0;
       background: rgba(0, 204, 153, 0.1);
       color: #fff;
   }
   
   .bayan-list li.active h2 a,
   .bayan-list li h2 a:hover {
       font-size: 14px;
       background: #00cc99;
       color: #fff;
   }
   
   .spec-label, 
   .spec-value {
       font-size: 0.8rem;
   }
   
   .variant-button {
       font-size: 1rem;
       padding: 0.5rem 1rem;
   }
   
   .variant-button.active,
   .variant-button.active:hover {
       font-size: 1.1rem;
   }
}