/*
Theme Name: RockPro
Text Domain: rockpro
Description: Lekki motyw RockPro Cases bez page buildera, treść edytowalna przez ACF PRO (Wygląd strony: menu "RockPro").
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* Czcionka Brockmann (@font-face) jest wstawiana w <head> przez functions.php,
   bo jej adres zależy od katalogu uploads. */
:root {
  color-scheme: dark;
  --background: #262626;
  --accent: #ff6600;
  --white: #fff;
}
* { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0;
  background: var(--background);
  color: var(--white);
  font-family: Brockmann, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
p, h1, h2 { margin: 0; padding: 0; }
.site-header { padding: 50px 0; }
.header-bar { position: relative; width: 80%; max-width: 1920px; height: 85px; margin: auto; }
.brand { display: block; width: 153px; height: 55px; }
.brand img { display: block; width: 153px; height: 55px; }
.contact-button {
  position: absolute;
  right: 0;
  top: 13.4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  padding: 5px 20px;
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
}
.contact-button svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1; }
.contact-button:hover { background: rgb(255 255 255 / 5%); }
main { padding-bottom: 50px; }
.mobile-photo, .mobile-photo img { display: block; width: 100%; height: auto; }
.stack { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.hero { width: 80%; max-width: 1920px; margin: 60px auto 0; }
.label { color: var(--accent); text-transform: uppercase; font-size: 15px; line-height: 15px; padding-bottom: 10px; }
.message { margin-top: -20px; }
h1 { font-size: 35px; font-weight: 500; line-height: 48px; }
.accent, .cta { color: var(--accent); }
.white { color: var(--white); }
.description { display: block; font-size: 20px; line-height: 1.4; }
.description p { display: inline; }
.desktop-break { display: none; }
.contact { margin-top: 30px; }
.contact-body { margin-top: -40px; align-items: flex-start; }
.contact h2 { font-size: 40px; font-weight: 500; line-height: 90px; }
address { margin-top: -30px; font-style: normal; font-size: 14px; font-weight: 300; line-height: 1.6; }
.email { color: var(--accent); line-height: 30px; }
@media (max-width: 359px) {
  .header-bar { width: 88%; }
  .brand, .brand img { width: 130px; height: auto; }
  .contact-button { padding-inline: 12px; top: 9px; }
  .hero { width: 84%; }
  h1 { font-size: 29px; line-height: 1.36; }
  .description { font-size: 18px; }
}
/* Tablet: tekst pod zdjęciem, bez nakładania warstw. */
@media (min-width: 768px) and (max-width: 980px) {
  .mobile-photo img { max-height: 550px; object-fit: cover; }
  h1 { font-size: 45px; line-height: 1.25; }
  .description { font-size: 22px; max-width: 580px; }
}
/* Zdjęcie zajmuje 80% szerokości. Kufry zaczynają się najwcześniej
   przy 54% szerokości hero (20% + 80% * 42.5%).
   Tekst kończy się przy 51%, więc pozostaje bezpieczny odstęp 3%. */
@media (min-width: 981px) {
  .site-header { padding: clamp(40px, 4vw, 76px) 0; }
  .header-bar { width: 90%; max-width: 1920px; }
  .contact-button { top: 14px; padding-block: 10px; font-size: 16px; }
  .contact-button svg { width: 16px; height: 16px; }
  main { padding-bottom: 60px; }
  .mobile-photo { display: none; }
  .hero {
    width: 90%;
    max-width: 1920px;
    margin: 0 auto;
    gap: clamp(32px, 3vw, 58px);
    min-height: calc(min(90vw, 1920px) * 0.348);
    background-image: linear-gradient(90deg, #262626 20%, rgb(38 38 38 / 88%) 32%, transparent 54%), var(--hero-bg, none);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 100% 100%, 80% auto;
  }
  .intro, .contact {
    display: grid;
    grid-template-columns: 12% 39% 49%;
    gap: 0;
    margin: 0;
    align-items: start;
  }
  .label {
    padding: 5px 10px 0 0;
    font-size: clamp(9px, .75vw, 14px);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .message, .contact-body { grid-column: 2; margin: 0; width: 100%; }
  .message { gap: clamp(16px, 1.35vw, 26px); }
  h1 { font-size: clamp(26px, 2.7vw, 54px); font-weight: 600; line-height: 1.12; }
  .description {
    display: flex;
    gap: clamp(18px, 1.8vw, 32px);
    margin: 0;
    font-size: clamp(16px, 1.55vw, 27px);
    font-weight: 600;
    line-height: 1.35;
  }
  .description p { display: block; }
  .desktop-break { display: none; }
  .cta { margin: 0; line-height: inherit; }
  .contact-body { gap: 12px; align-items: flex-start; }
  .contact h2 { font-size: clamp(30px, 2.6vw, 48px); line-height: 1.15; }
  address { margin: 0; font-size: clamp(11px, .8vw, 15px); line-height: 1.6; }
  .message, .contact-body { overflow-wrap: anywhere; }
}

/* Zwarty kontakt: tekst mieści się w wysokości zdjęcia panoramicznego. */
@media (min-width: 981px) {
  .hero { gap: clamp(14px, 1.2vw, 24px); }
  .message { gap: clamp(10px, .9vw, 18px); }
  .description { font-size: clamp(15px, 1.45vw, 24px); gap: clamp(12px, 1vw, 20px); }
  .contact-body { gap: 6px; }
  .contact h2 { font-size: clamp(22px, 1.8vw, 32px); line-height: 1.15; }
  address { font-size: clamp(10px, .68vw, 13px); line-height: 1.4; }
  .email { line-height: 1.8; }
}

/* Stałe linie na każdym ekranie; rozmiar zależy od szerokości tekstu. */
.message { container-type: inline-size; }
.copy-line { display: block; white-space: nowrap; overflow-wrap: normal; }
h1 { font-size: min(35px, 10.5cqw); line-height: 1.2; }
.description { display: flex; font-size: min(20px, 4.8cqw); gap: 24px; }
.description p { display: block; }
.cta { margin: 0; line-height: 1.35; }
@media (min-width: 768px) and (max-width: 980px) {
  h1 { font-size: min(45px, 10.5cqw); }
  .description { font-size: min(22px, 4.8cqw); }
}
@media (min-width: 981px) {
  h1 { font-size: min(54px, 2.7vw, 10.5cqw); line-height: 1.12; }
  .description { font-size: min(24px, 1.45vw, 4.8cqw); gap: clamp(12px, 1vw, 20px); }
}

/* Pozostałe strony (wpisy, podstrony, 404) w tej samej stylistyce. */
.page-content { width: 80%; max-width: 820px; margin: 40px auto 0; font-size: 16px; }
.page-content h1 { margin-bottom: 24px; }
.page-content a { color: var(--accent); }
.page-content img { max-width: 100%; height: auto; }