/*
Theme Name: Galeria Kolor
Theme URI: https://galeriakolor.pl/
Author: Galeria Kolor
Description: Autorski motyw galerii grafik i sklepu WooCommerce z plikami cyfrowymi.
Version: 1.0.3
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: galeria-kolor
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@1,500&display=swap');

:root { --ink:#151515; --red:#e82a20; --paper:#f7f5f0; --line:#d9d6ce; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
body.admin-bar .siteHeader { top:32px; }
img { max-width:100%; height:auto; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }

.homeHero { position:relative; width:100%; height:100svh; min-height:620px; background:#101010; overflow:hidden; }
.homeHero>img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.heroBranding { position:absolute; z-index:2; top:12%; left:4.5vw; width:34vw; color:#fff; }
.heroLogo { display:flex; align-items:center; gap:20px; margin-bottom:8vh; }
.heroLogoMark { width:clamp(72px,8vw,130px); height:clamp(72px,8vw,130px); object-fit:contain; }
.heroWordmark { width:clamp(190px,22vw,380px); height:auto; object-fit:contain; filter:drop-shadow(0 3px 14px #000); }
.heroBranding h1 { color:#fff; font-size:clamp(42px,5.2vw,92px); line-height:1.08; letter-spacing:-.055em; text-shadow:0 3px 20px #000; }
.heroBranding h1 strong { color:var(--red); font-weight:600; }
.heroCta { position:absolute; z-index:2; left:5vw; bottom:34px; display:flex; align-items:center; justify-content:space-between; width:210px; padding:15px 18px; color:#fff; border:1px solid #ffffff70; background:#0d0d0d77; backdrop-filter:blur(8px); font-size:12px; }
.heroCta:hover { background:#fff; color:#111; }

.siteHeader { position:sticky; top:0; z-index:20; min-height:82px; padding:0 4.5vw; display:flex; align-items:center; justify-content:space-between; gap:30px; background:#f7f5f0ee; backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.brandLogo { width:45px; height:45px; object-fit:contain; }
.brandWordmark { width:142px; height:38px; object-fit:contain; }
.siteHeader nav { display:flex; gap:20px; font-size:11px; }
.siteHeader nav a { padding:10px 0; border-bottom:1px solid transparent; }
.siteHeader nav a:hover { border-color:#111; }
.accountLink { padding:12px 18px; border:1px solid #111; font-size:11px; }

.cinematicPromo { position:relative; height:min(78vw,850px); min-height:560px; overflow:hidden; color:#fff; background:#0b0b0b; }
.cinematicPromo video { width:100%; height:100%; display:block; object-fit:cover; }
.cinematicShade { position:absolute; inset:0; background:linear-gradient(90deg,#070707c9 0%,#09090973 34%,transparent 72%),linear-gradient(0deg,#08080891 0%,transparent 46%); pointer-events:none; }
.cinematicCopy { position:absolute; left:6vw; bottom:8%; max-width:700px; }
.cinematicCopy h2 { font-size:clamp(48px,6.8vw,104px); line-height:.93; }
.cinematicCopy h2 em { font:500 italic 1em "Playfair Display"; color:var(--red); }
.cinematicCopy a { display:flex; align-items:center; justify-content:space-between; width:220px; margin-top:38px; padding:15px 18px; border:1px solid #ffffff78; background:#0b0b0b66; backdrop-filter:blur(8px); font-size:11px; }
.cinematicCopy a:hover { color:#111; background:#fff; }

.categorySection { max-width:1500px; margin:auto; padding:110px 4vw 130px; }
.categoryIntro { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:60px; }
.eyebrow { margin:0 0 18px; font-size:10px; font-weight:600; letter-spacing:.22em; }
.eyebrow.light { color:#ddd; }
h1,h2 { font-family:"Manrope",sans-serif; font-weight:400; letter-spacing:-.045em; margin:0; }
.categoryIntro h1 { font-size:clamp(48px,6vw,88px); line-height:.95; }
.categoryIntro h1 em { font:500 italic 1em "Playfair Display"; color:var(--red); }
.introCopy { max-width:430px; margin:0 0 5px; color:#686864; font-size:13px; line-height:1.75; }
.catalogTools { display:flex; align-items:center; gap:25px; margin-bottom:35px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.categorySearch { flex:0 0 250px; display:flex; align-items:center; gap:9px; }
.categorySearch span { font-size:23px; transform:rotate(-15deg); }
.categorySearch input { width:100%; border:0; outline:0; background:transparent; font-size:12px; }
.filters { display:flex; gap:8px; overflow:auto; scrollbar-width:none; }
.filters button { white-space:nowrap; border:1px solid #cbc8c0; border-radius:30px; padding:9px 15px; background:transparent; font-size:10px; }
.filters button.active { color:white; background:#171717; border-color:#171717; }
.categoryGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:42px 15px; }
.categoryCard { min-width:0; }
.categoryImage { position:relative; aspect-ratio:16/9; overflow:hidden; background:#ddd; }
.categoryImage img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.categoryCard:hover .categoryImage img { transform:scale(1.035); }
.categoryNumber,.openArrow { position:absolute; top:12px; display:grid; place-items:center; min-width:34px; height:34px; padding:0 9px; background:#101010b5; color:#fff; backdrop-filter:blur(6px); font-size:9px; }
.categoryNumber { left:12px; }
.openArrow { right:12px; font-size:16px; opacity:0; transform:translateY(5px); transition:.25s; }
.categoryCard:hover .openArrow { opacity:1; transform:none; }
.categoryMeta { display:flex; align-items:start; justify-content:space-between; gap:15px; padding:13px 2px 0; }
.categoryMeta h2 { font-size:14px; letter-spacing:-.02em; }
.categoryMeta p { margin:2px 0 0; color:#777; font-size:9px; text-transform:uppercase; letter-spacing:.09em; white-space:nowrap; }
.emptyState { padding:80px 0; text-align:center; color:#777; }

.useCasesSection { padding:110px 4vw 130px; color:#171717; background:#ece9e1; }
.useCasesIntro { max-width:1500px; margin:0 auto 60px; display:flex; align-items:end; justify-content:space-between; gap:60px; }
.useCasesIntro h2 { font-size:clamp(45px,6vw,84px); line-height:.97; }
.useCasesIntro h2 em { font:500 italic 1em "Playfair Display"; color:var(--red); }
.useCasesIntro>p { max-width:450px; margin:0 0 6px; color:#676762; font-size:13px; line-height:1.75; }
.useCaseComparison { max-width:1500px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.useCaseComparison article { position:relative; min-width:0; margin:0; background:#171717; }
.useCaseComparison article>img { width:100%; aspect-ratio:16/10; display:block; object-fit:cover; }
.useCaseComparison article>div { padding:20px 22px 24px; color:#fff; }
.useCaseComparison article h3 { margin:0; font:500 20px "Manrope"; }
.useCaseComparison article p { margin:0; color:#999; font-size:10px; line-height:1.55; }
.applicationGallery { max-width:1500px; margin:70px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:42px 15px; }
.applicationGallery figure { min-width:0; margin:0; }
.applicationGallery figure.applicationWide { grid-column:span 2; }
.applicationGallery img { width:100%; aspect-ratio:16/10; display:block; object-fit:cover; background:#ddd; }
.applicationGallery .applicationSource img { aspect-ratio:16/8.7; }
.applicationGallery .applicationDetail img { object-position:center; }
.applicationGallery figcaption { display:flex; align-items:start; justify-content:space-between; gap:18px; padding:12px 2px 0; border-top:1px solid #cac6bc; }
.applicationGallery figcaption b { font:500 13px "Manrope"; }
.applicationGallery figcaption span { color:#777; font-size:8px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }

.examplesSection { padding:110px 4vw 130px; color:#fff; background:#101010; }
.examplesIntro { max-width:1500px; margin:0 auto 60px; display:flex; align-items:end; justify-content:space-between; gap:60px; }
.examplesIntro h2 { font-size:clamp(45px,6vw,84px); line-height:.97; }
.examplesIntro h2 em { font:500 italic 1em "Playfair Display"; color:var(--red); }
.examplesIntro>p { max-width:430px; margin:0 0 6px; color:#a9a9a9; font-size:13px; line-height:1.75; }
.storyFilm { position:relative; width:100vw; height:min(78vw,850px); min-height:560px; margin:0 0 70px calc(50% - 50vw); overflow:hidden; background:#080808; }
.storyFilm::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#070707c9 0%,#09090973 34%,transparent 72%),linear-gradient(0deg,#080808b8 0%,transparent 52%); pointer-events:none; }
.storyFilm video { width:100%; height:100%; display:block; object-fit:cover; background:#050505; }
.storyFilmCaption { position:absolute; z-index:2; left:6vw; bottom:8%; max-width:720px; padding:0; border:0; }
.storyFilmCaption>span { display:block; margin-bottom:16px; color:#ddd; font-size:10px; font-weight:600; letter-spacing:.22em; }
.storyFilmCaption h3 { margin:0 0 14px; font:400 clamp(44px,6vw,88px)/.98 "Manrope"; letter-spacing:-.045em; }
.storyFilmCaption p { max-width:560px; margin:0; color:#c5c5c5; font-size:12px; line-height:1.65; }
.finalFilm { margin-top:90px; margin-bottom:0; }
.encoreFilm { margin-top:70px; }
.examplesGrid { max-width:1500px; margin:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 18px; }
.exampleCard { margin:0; min-width:0; }
.exampleCard.exampleWide { grid-column:1/-1; }
.exampleImage { position:relative; overflow:hidden; aspect-ratio:16/10; background:#252525; }
.exampleWide .exampleImage { aspect-ratio:16/8.7; }
.exampleImage img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .6s ease; }
.exampleCard:hover .exampleImage img { transform:scale(1.018); }
.exampleImage span { position:absolute; top:15px; left:15px; display:grid; place-items:center; width:38px; height:38px; color:#fff; background:#0c0c0cbf; backdrop-filter:blur(8px); font-size:9px; }
.exampleCard figcaption { display:flex; align-items:start; justify-content:space-between; gap:30px; padding:15px 2px 0; border-top:1px solid #3b3b3b; }
.exampleCard figcaption b { font:500 15px "Manrope"; }
.exampleCard figcaption p { margin:2px 0 0; color:#888; font-size:10px; text-align:right; }

.studioSection { padding:110px 4vw 130px; color:#171717; background:#f7f5f0; }
.studioIntro { max-width:1500px; margin:0 auto 60px; display:flex; align-items:end; justify-content:space-between; gap:60px; }
.studioIntro h2 { font-size:clamp(45px,6vw,84px); line-height:.97; }
.studioIntro h2 em { font:500 italic 1em "Playfair Display"; color:var(--red); }
.studioIntro>p { max-width:455px; margin:0 0 6px; color:#676762; font-size:13px; line-height:1.75; }
.studioFilm { position:relative; width:100vw; height:min(78vw,850px); min-height:560px; margin-left:calc(50% - 50vw); overflow:hidden; background:#111; }
.studioFilm video { width:100%; height:100%; display:block; object-fit:cover; background:#080808; }
.studioFilmCopy { position:absolute; z-index:2; left:6vw; bottom:8%; color:#fff; }
.studioFilmCopy h3 { margin:0; font:400 clamp(44px,6vw,88px)/.98 "Manrope"; letter-spacing:-.045em; }
.studioFilmCopy h3 em { font:500 italic 1em "Playfair Display"; color:var(--red); }
.studioValues { max-width:1500px; margin:45px auto 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.studioValues article { display:grid; grid-template-columns:38px 1fr; gap:6px 16px; padding:26px 26px 8px 0; }
.studioValues article+article { padding-left:26px; border-left:1px solid var(--line); }
.studioValues span { grid-row:1/3; color:var(--red); font-size:9px; letter-spacing:.12em; }
.studioValues h3 { margin:0; font:500 17px "Manrope"; }
.studioValues p { margin:0; color:#74746f; font-size:10px; line-height:1.65; }

.howSection { padding:110px 8vw; display:grid; grid-template-columns:1fr 1.3fr; gap:10vw; color:#fff; background:#151515; }
.howSection h2 { font-size:clamp(40px,5vw,72px); line-height:1.02; }
.howSection ol { margin:0; padding:0; list-style:none; border-top:1px solid #454545; }
.howSection li { display:grid; grid-template-columns:55px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid #454545; }
.howSection li>span { color:var(--red); font-size:10px; }
.howSection b { font:500 15px "Manrope"; }
.howSection li p { max-width:480px; margin:7px 0 0; color:#aaa; font-size:11px; line-height:1.65; }

footer { padding:55px 6vw 24px; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; background:#e8e5dd; }
footer p { color:#666; font-size:11px; }
footer>div { display:flex; gap:22px; font-size:10px; }
footer small { grid-column:1/-1; padding-top:22px; border-top:1px solid #cbc8c0; color:#777; font-size:9px; }

@media (max-width:1050px) {
  .categoryGrid { grid-template-columns:repeat(3,1fr); }
  .categoryIntro,.useCasesIntro,.examplesIntro,.studioIntro { align-items:start; flex-direction:column; }
  .applicationGallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .siteHeader nav { gap:14px; font-size:10px; }
}

/* WordPress and WooCommerce pages */
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { position:fixed; z-index:100000; top:12px; left:12px; width:auto; height:auto; padding:12px 16px; clip:auto; background:#fff; color:#111; }
.siteMain { min-height:62vh; }
.contentShell { width:min(1320px,calc(100% - 48px)); margin:0 auto; padding:90px 0; }
.contentShell h1 { margin:0 0 34px; font-size:clamp(42px,6vw,88px); letter-spacing:-.05em; }
.contentShell .entry-content { max-width:900px; font-size:18px; line-height:1.75; }
.shopHero { padding:90px 0 42px; border-bottom:1px solid var(--line); }
.shopHero p { max-width:680px; color:#6e6b65; }
.woocommerce .products ul,.woocommerce ul.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 22px; }
.woocommerce ul.products::before,.woocommerce ul.products::after { display:none; }
.woocommerce ul.products li.product { float:none!important; width:auto!important; margin:0!important; }
.woocommerce ul.products li.product a img { aspect-ratio:4/3; object-fit:cover; margin:0 0 16px; background:#eee; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding:0; font-size:18px; }
.woocommerce ul.products li.product .price { color:var(--red); font-size:15px; }
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit {
  border-radius:0; background:var(--ink); color:#fff; font-weight:500; padding:13px 18px;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce #respond input#submit:hover { background:var(--red); color:#fff; }
.woocommerce-message,.woocommerce-info { border-top-color:var(--red); }
.woocommerce-message::before,.woocommerce-info::before { color:var(--red); }
.woocommerce div.product { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:48px; }
.woocommerce div.product div.images,.woocommerce div.product div.summary { float:none; width:auto; }
.woocommerce div.product .product_title { font-size:clamp(36px,4vw,64px); letter-spacing:-.04em; }
.woocommerce div.product p.price,.woocommerce div.product span.price { color:var(--red); }
.woocommerce-cart-form,.cart_totals,.woocommerce-checkout,.woocommerce-account .woocommerce { font-size:16px; }
.emptyShop { padding:80px 0; color:#777; }

@media (max-width:782px) {
  body.admin-bar .siteHeader { top:46px; }
}
@media (max-width:760px) {
  .contentShell { width:min(100% - 36px,1320px); padding:64px 0; }
  .woocommerce .products ul,.woocommerce ul.products { grid-template-columns:1fr; }
  .woocommerce div.product { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:760px) {
  .homeHero { height:auto; min-height:0; aspect-ratio:1.15; }
  .homeHero>img { object-position:center; }
  .heroBranding { top:9%; left:5vw; width:38vw; }
  .heroLogo { gap:10px; margin-bottom:4vh; letter-spacing:.12em; }
  .heroWordmark { width:clamp(145px,21vw,250px); }
  .heroBranding h1 { font-size:clamp(28px,5.6vw,46px); }
  .heroCta { left:20px; bottom:20px; }
  .siteHeader { min-height:70px; }.siteHeader nav { display:none; }.accountLink { display:none; }
  .cinematicPromo { height:82svh; min-height:520px; }
  .cinematicPromo video { object-position:center; }
  .cinematicCopy { left:5vw; bottom:7%; }
  .cinematicCopy h2 { font-size:clamp(44px,11vw,72px); }
  .categorySection { padding:80px 4.5vw 95px; }
  .catalogTools { align-items:stretch; flex-direction:column; }.categorySearch { flex-basis:auto; }
  .categoryGrid { grid-template-columns:repeat(2,1fr); }
  .useCasesSection { padding:80px 4.5vw 95px; }
  .useCaseComparison { grid-template-columns:1fr; }
  .applicationGallery { margin-top:55px; }
  .examplesSection { padding:80px 4.5vw 95px; }
  .studioSection { padding:80px 4.5vw 95px; }
  .storyFilm,.studioFilm {
    width:calc(100% + 9vw);
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    margin-left:-4.5vw;
    margin-right:-4.5vw;
  }
  .cinematicPromo video,.storyFilm video,.studioFilm video { max-width:100%; }
  .storyFilm video,.studioFilm video {
    object-fit:contain;
    object-position:center;
  }
  .storyFilmCaption,.studioFilmCopy { bottom:6%; }
  .storyFilmCaption>span { margin-bottom:6px; font-size:7px; }
  .storyFilmCaption h3,.studioFilmCopy h3 { margin-bottom:6px; font-size:clamp(24px,7vw,34px); }
  .storyFilmCaption p { max-width:78vw; font-size:9px; line-height:1.35; }
  .studioValues { grid-template-columns:1fr; }
  .studioValues article+article { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .storyFilm { margin-bottom:55px; }
  .finalFilm { margin-top:65px; margin-bottom:0; }
  .encoreFilm { margin-top:55px; }
  .examplesGrid { grid-template-columns:1fr; }
  .exampleCard.exampleWide { grid-column:auto; }
  .exampleWide .exampleImage { aspect-ratio:16/10; }
  .howSection { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .homeHero { aspect-ratio:.76; }
  .homeHero>img { width:100%; min-width:100%; object-position:58% center; transform:none; }
  .homeHero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0d0d0dd9 0%,#0d0d0d66 46%,transparent 78%); }
  .heroBranding { z-index:2; top:8%; left:22px; width:72vw; }
  .heroLogo { margin-bottom:5vh; }
  .heroLogo img { width:62px; height:62px; }
  .heroWordmark { width:185px !important; height:auto !important; }
  .heroBranding h1 { font-size:40px; }
  .heroCta { width:190px; }
  .cinematicPromo { height:76svh; }
  .cinematicPromo video { object-position:58% center; }
  .cinematicShade { background:linear-gradient(0deg,#080808e3 0%,#09090966 58%,transparent 100%); }
  .cinematicCopy { right:22px; left:22px; }
  .cinematicCopy h2 { font-size:46px; }
  .storyFilmCaption { right:22px; left:22px; }
  .storyFilmCaption h3,.studioFilmCopy h3 { font-size:clamp(24px,7vw,34px); }
  .studioFilmCopy { right:22px; left:22px; }
  .brandLogo { width:38px; height:38px; }
  .brandWordmark { width:125px; height:34px; }
  .categoryIntro { gap:30px; margin-bottom:40px; }
  .categoryGrid { grid-template-columns:1fr; gap:34px; }
  .categoryMeta h2 { font-size:15px; }
  .useCasesIntro { gap:28px; margin-bottom:40px; }
  .applicationGallery { grid-template-columns:1fr; gap:34px; }
  .applicationGallery figure.applicationWide { grid-column:auto; }
  .applicationGallery .applicationSource img { aspect-ratio:16/10; }
  .examplesIntro { gap:28px; margin-bottom:40px; }
  .studioIntro { gap:28px; margin-bottom:40px; }
  .exampleCard figcaption { flex-direction:column; gap:5px; }
  .exampleCard figcaption p { text-align:left; }
  footer { grid-template-columns:1fr; } footer small { grid-column:1; }
}