/**
 * Theme Name: Pikiel Studio
 * Author: MakingLife / fmedia
 * Version: 1.0
 */

@font-face {
  font-family: 'Eklektyk';
  src: url('/wp-content/themes/pikiel/fonts/Eklektyk-Regular.woff2') format('woff2'),
       url('/wp-content/themes/pikiel/fonts/Eklektyk-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GalanoGrotesque';
  src: url('/wp-content/themes/pikiel/fonts/GalanoGrotesque-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GalanoGrotesque';
  src: url('/wp-content/themes/pikiel/fonts/GalanoGrotesque-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #EBECE9;
  --secondary-background: #523527;
  --primary-color: #333E26;
  --secondary-color: #B7E8F1;
}

/* SETUP */

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--primary-color);
  text-align: center;
}
body.page-template-page-green {
  background: var(--primary-color);
  color: var(--secondary-color);
}

.page-template-page-green #main-wrapper,
.page #main-wrapper {
  padding-top: 181px;
}

* {
  font-family: 'GalanoGrotesque', sans-serif;
}

#main-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  text-align: left;
}

.has-medium-font-size {
  font-size: 40px !important;
  line-height: 44px;
  letter-spacing: 1%;
  font-weight: 500;
}

/* HEADER */

header {
  width: 100%;
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header h1 {
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--primary-color);
}

/* MAIN PAGE ANIMATION */
.animation-container {
  position: fixed;
  width: 1352px;
  height: 600px;
  margin: 50px auto;
  z-index: 0;
}

.word-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.8);
  /* Krok 10: Powiększenie całego słowa */
  animation: scaleFull .5s forwards;
  animation-delay: 5s;
}

.letter, .dot {
  position: absolute;
  opacity: 0;
}

/* --- KROK 1 & 2: Pozycjonowanie początkowe p: --- */
.p-letter {
  width: 20.64%;
  opacity: 1;
  transform: translate(-30%, 14%);
  animation: moveP .5s forwards;
  animation-delay: .5s;
}

.dot {
  opacity: 1;
  width: 8.14%;
}

.dot-1 { transform: translate(150%, -100%); animation: dot1-move 2s forwards; animation-delay: .5s; }
.dot-2 { transform: translate(150%, 100%); animation: dot2-move 2s forwards; animation-delay: .5s; }

/* --- DEFINICJE ANIMACJI --- */

/* Krok 1: P przesuwa się na lewo */
@keyframes moveP {
  to { transform: translate(-192%, 14%); }
}

/* Krok 2, 3, 4: Ruch kropek (dwukropka) */
@keyframes dot1-move {
  0% { transform: translate(150%, -100%); }
  25% { transform: translate(-270%, -100%); }
  50% { transform: translate(0, -100%); }
  75% { transform: translate(-100%, 0); }
  100% { transform: translate(-290%, -215%); }
}

@keyframes dot2-move {
  0% { transform: translate(150%, 100%); }
  25% { transform: translate(-270%, 100%); }
  50% { transform: translate(0, 100%); }
  75% { transform: translate(100%, 0); }
  100% { transform: translate(102%, -215%); }
}

/* Krok 5-9: Litery wchodzą z dołu z fade-in */
.i1-stem { width: 7.43%; animation: fadeInSlide .5s forwards; animation-delay: 2.5s; transform: translate(-318%, 6.5%); }
.k-letter { width: 20.3%; animation: fadeInSlide .5s forwards; animation-delay: 3s; transform: translate(-34%, 6.5%); }
.i2-stem { width: 7.43%; animation: fadeInSlide 1s forwards; animation-delay: 3.5s; transform: translate(112%, 6.5%); }
.e-letter { width: 17.8%; animation: fadeInSlide 1s forwards; animation-delay: 4s; transform: translate(128%, 5.5%); }
.l-letter { width: 16.16%; animation: fadeInSlide 1s forwards; animation-delay: 4.5s; transform: translate(260%, 6.5%); }

@keyframes fadeInSlide {
  from { opacity: 0; margin-top: 50px; }
  to { opacity: 1; margin-top: 0; }
}

/* Krok 10: Powiększenie do 100% viewportu */
@keyframes scaleFull {
  to { transform: scale(1) translateY(75px); }
}
@keyframes scaleInitial {
  to {  transform: scale(.8); }
}

@keyframes mainBlockShow {
  to { opacity: 1; }
}

/* MAIN PAGE GALLERY */

#main-page-gallery {
  opacity: 0;
  animation: mainBlockShow .5s forwards;
  animation-delay: 6s;
  min-height: 540px;
}
#main-page-gallery > a:nth-child(1) { transform: translateX(800px); }
#main-page-gallery > a:nth-child(2) { transform: translate(110px, 150px); margin-bottom: 150px; }
#main-page-gallery > a:nth-child(3) { transform: translate(600px, -110px); }
#main-page-gallery > a:nth-child(4) { transform: translate(50%, 35px); }
#main-page-gallery > a:nth-child(5) { transform: translate(110px, 150px); margin-bottom: 150px; }
#main-page-gallery > a:nth-child(6) { transform: translate(780px, -535px); margin-bottom: -470px; }

.project-card,
.view-horizontal .portfolio-item-card {
  display: block;
  width: 324px;
  height: 666px;
  background: var(--secondary-color);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.project-image,
.view-horizontal .portfolio-img-frame {
  position: absolute;
  overflow: hidden;
  width: 324px;
  height: 666px;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-image img,
.view-horizontal .portfolio-img-frame img {
  height: 666px;
  position: absolute;
  top: 0;
  left: 50%; /* center in frame */
  transform: translate(-50%, 0); /* center in frame pt.2 */
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 20px 24px;
  z-index: 3;
  transform: translateY(145px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.project-content h2, .project-content p {
  color: var(--primary-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  margin: 0;
}
.project-content p {
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  letter-spacing: 2%;
  margin-top: .5rem;
}

.project-card:hover .project-content {
  transform: translateY(0);
}
.project-card:hover .project-image {
  width: 276px;
  height: 521px;
  top: 24px;
  left: 24px;
  border-radius: 170px;
}
.project-card:hover .project-image img {
  top: -24px;
}

/* Realizacje na stronie głównej w układzie poziomym */

.project-card.horizontal,
.project-card.horizontal .project-image {
  width: 666px;
  height: 324px;
}
.project-card.horizontal .project-image img {
  height: unset;
  width: 666px;
  top: 50%;
  left: 0; /* center in frame - horizontal */
  transform: translate(0, -50%); /* center in frame pt.2 */
}
.project-card.horizontal:hover .project-image {
  width: 618px;
  height: 179px;
}
.project-card.horizontal:hover .project-image img {
  top: 138px;
  left: -24px;
}

/* BRĄZOWA SEKCJA */

.page-green .brown {
  background: var(--secondary-background);
  color: var(--secondary-color);
  padding: 44px 0;
  position: relative;
}
.page-green .brown:before,
.page-green .brown:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--secondary-background);
  transform: translateX(-100%) translateY(-44px);
}
.page-green .brown:after {
  transform: translateX(100%) translateY(-44px);
}

/* ------- */

.footer-message {
  background: var(--secondary-color);
  padding: 48px 88px;
  z-index: 10;
  position: relative;
}
.footer-message p {
  font-size: 100px;
  line-height: 100px;
  color: var(--primary-color);
  text-align: center;
  max-width: 1352px;
  margin: 0 auto;
  font-weight: 500;
}
.footer-message .cta {
  margin: 44px auto 0;
}

/* PORTFOLIO */

.portfolio-view-toggle > button {
  cursor: pointer;
}
.view-horizontal .portfolio-img-frame {
  position: relative;
}
.view-horizontal .portfolio-item-card,
.view-horizontal .portfolio-img-frame,
.view-horizontal .portfolio-img-frame img {
  width: 666px;
  height: 324px;
}
.view-horizontal .portfolio-item-card:hover .portfolio-img-frame {
  width: 630px;
  height: 290px;
  top: 17px;
  left: 17px;
  border-radius: 170px;
}
.view-horizontal .portfolio-item-card:hover .portfolio-img-frame img {
  top: -17px;
}

/* CONTACT FORM */

.main-contact-form {
  background: var(--secondary-color) !important;
  padding: 32px !important;
}
.main-contact-form.wpforms-container .wpforms-field-label {
  font-weight: 500;
  color: var(--primary-color);
}
.main-contact-form.wpforms-container-full .wpforms-field-container input[type=text],
.main-contact-form.wpforms-container .wpforms-form textarea {
  background: transparent;
  border: 0;
  outline: 0;
  width: 100%;
  max-width: 100%;
  border-bottom: 1px solid var(--primary-color);
}
/* override wszystkiego bo wp-forms wszystko nadpisuje */
.main-contact-form.wpforms-container-full button[type=submit].main-contact-form-submit {
  background: transparent !important;
  font-weight: 500;
  color: var(--primary-color) !important;
  height: 95px !important;
  font-size: 20px !important;
  border: none !important;
  position: relative !important;
  padding: 20px 20px 20px 95px !important;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.main-contact-form .wpforms-submit-container:before {
  content: 'WYSYŁAJĄC WIADOMOŚCI AKCEPTUJESZ POLITYKĘ PRYWATNOŚCI.';
  font-weight: 500;
  font-size: 14px;
}

.contact-slogan {
  position: relative;
}
.contact-slogan:before,
.contact-slogan::after {
  position: absolute;
  content: ':';
  font-size: 400px;
  font-weight: 900;
  left: 0;
  top: 0;
  color: var(--primary-color);
  line-height: 300px;
}
.contact-slogan:after {
  content: '=';
  left: unset;
  right: 0;
  margin: -75px -50px 0 0;
}

/* FOOTER */

footer {
  background: var(--primary-color);
  color: var(--secondary-color);
  font-size: 16px;
  line-height: 23px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 10;
}
footer .footer-inner {
  max-width: 1352px;
  text-align: left;
  margin: 0 auto;
  padding-top: 44px;
}
.footer-logo {
  background: var(--primary-color) url('/wp-content/themes/pikiel/img/pikiel-logo.svg') center center no-repeat;
  width: 100%;
  height: 580px;
}
.footer-menu {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 68px;
}
.footer-copy {
  font-size: 14px;
  text-align: right;
  transform: translateY(-1em);
  margin: 0;
}

footer a:link, footer a:visited {
  color: var(--secondary-color);
  text-decoration: none;
}
footer a:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

/* ELEMENTS */

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  max-width: 1352px;
  margin: 0 auto;
}

/* CTA BUTTON */

.cta {
  height: 95px;
  background: var(--secondary-color);
  border-radius: 80px;
  font-size: 20px;
  font-weight: 500;
  color: var(--primary-color);
  border: none;
  position: relative;
  margin: 88px auto;
  padding: 20px 20px 20px 95px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.cta:before {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  content: '→';
  width: 55px;
  height: 55px;
  background: transparent url('/wp-content/themes/pikiel/img/i-dot.svg') center center no-repeat;
  background-size: contain;
  color: var(--secondary-color);
  font-size: 32px;
  font-weight: 200;
  justify-content: center;
  align-items: center;
  transform: translate(20px, 20px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.cta:hover { 
  border-radius: 0;
}
.cta:hover:before {
  transform: translate(20px, 20px) rotate(-45deg);
}

/* MENU TOGGLE ICON */

.menu-toggle,
.close-toggle {
  width: 55px;
  height: 55px;
  position: relative;
  cursor: pointer;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent url('/wp-content/themes/pikiel/img/i-dot.svg') center center no-repeat;
  background-size: contain;
}
.line {
  position: absolute;
  width: 21px;
  height: 2px;
  background-color: var(--background);
  transition: all 0.3s ease-in-out;
}
.line.top {
  transform: translateY(-3px);
}
.line.bottom {
  transform: translateY(3px);
}
.menu-toggle:hover .line.top {
  transform: translateY(0) rotate(0deg);
}
.menu-toggle:hover .line.bottom {
  transform: translateY(0) rotate(90deg);
}

/* MODAL CLOSE TOGGLE ICON */

.x-left {
  transform: rotate(45deg);
}
.x-right {
  transform: rotate(-45deg);
}
.close-toggle:hover .x-left,
.close-toggle:hover .x-right {
  transform: rotate(0deg);
}

/* MODAL WINDOW */

.slide-down-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--secondary-color);
  z-index: 9999;
  animation: slideDown 0.5s ease-out forwards;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.slide-down-modal .wrapper {
  height: calc(100% - 250px);
}

.slide-down-modal header {
  height: 181px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
}

.modal-content nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.modal-content nav li {
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  text-align: left;
  margin-top: 40px;
}
.modal-content nav li a:link,
.modal-content nav li a:visited {
  color: var(--primary-color);
  text-decoration: none;
}

.modal-content address {
  text-align: right;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}

.modal-content img {
  max-height: 88vh;
}

.header-back {
  font-size: 14px;
  letter-spacing: 2%;
  line-height: 17px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--secondary-color);
  cursor: pointer;
}
.header-back span {
  display: inline-flex;
  transition: all 0.3s ease-in-out;
  gap: 0;
  margin-right: .5em;
}
.header-back span img {
  transition: all 0.3s ease-in-out;
}
.header-back span img:first-of-type {
  transform: translateX(8px);
}
.header-back:hover span img:first-of-type {
  transform: translateX(5px);
}


/* PROJECT PAGE (REALIZACJA) */

.page-header {
  height: 181px;
  position: fixed;
  display: flex;
  background: transparent;
  z-index: 20;
  justify-content: center;
}
.page-header .wrapper {
  max-width: 1352px;
  display: flex;
  justify-content: space-between;
  flex: 0 1 1352px;
}
.page-header.project-header {
  height: 147px;
}

.project-header-image {
  width: 100%;
  height: 700px;
  background-color: transparent;
  background-position: center center;
  background-size: cover;
  margin-bottom: 48px;
}

.project-page p {
  color: var(--primary-color);
}

.project-page h2 {
  font-size: 100px;
  line-height: 100px;
  font-weight: 500;
  color: var(--primary-color);
  margin: 0 0 60px;  
}

.project-page table tbody {
  display: grid;
  column-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
.project-page thead,
.project-page tbdoy,
.project-page tfoot,
.project-page tr {
  display: contents;
}

.project-page td,
.project-page th {
  border: 1px solid var(--primary-color);
  border-width: 0 0 1px;
  color: var(--primary-color);
  font-size: 16px;
  line-height: 48px;
}

.project-page b,
.project-page strong {
  font-weight: 500;
}

.project-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
}

.project-gallery-grid .project-gallery-item {
  height: 700px;
  flex-grow: 1;
}

.project-gallery-grid .project-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: pointer;
}

/* ABOUT */

.about-intro:before,
.about-team:before {
  display: flex;
  position: absolute;
  width: 100%;
  justify-content: center;
  font-family: 'Eklektyk', serif;
  font-size: 500px;
  line-height: 500px;
  font-weight: 400;
  letter-spacing: 1%;
  text-align: center;
  color: var(--secondary-color);
  z-index: 5;
}

.about-intro {
  position: relative;
}
.about-intro:before {
  content: 'about';
  height: 100%;
  align-items: center;
}
.about-intro figure {
  position: relative;
  z-index: 10;
}

.about-team {
  position: relative;
  padding-top: 323px;
}
.about-team:before {
  content: 'team';
  top: 0;
}
.about-team .wp-block-column {
  z-index: 10;
}
.about-team p {
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  margin: 0 auto 10px;
}
.about-team p.has-small-font-size {
  font-size: 16px;
  line-height: 23px;
  font-weight: 400;
  margin: 0;
}

/* GREEN PAGE */

.page-template-page-green hr {
  margin: 80px 0;
  height: 1px;
  color: var(--secondary-color);
  border: 0;
  border-top: 1px solid var(--secondary-color);
}

/* PORTFOLIO */

.portfolio-gallery-wrapper {
  width: 100%;
  margin: 2rem 0;
}
.portfolio-view-toggle {
  display: flex;
  gap: 24px;
  margin: 100px auto;
  justify-content: center;
}
.toggle-icon-btn {
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: .4;
  border: 0;
}
.toggle-icon-btn svg {
  fill: var(--primary-color);
}
.toggle-icon-btn:hover,
.toggle-icon-btn.active {
  opacity: 1;
}

.portfolio-item-card {
  box-sizing: border-box;
  user-select: none;
}
.portfolio-img-frame {
  overflow: hidden;
  position: relative;
}
.portfolio-img-frame img {
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* --- MODE 1: VERTICAL VIEW (Draggable Row) --- */
.portfolio-layout.view-vertical {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;
    padding-bottom: 20px;
    scrollbar-width: none; /* Hide standard firefox scrollbar */
}
.portfolio-layout.view-vertical::-webkit-scrollbar {
    display: none; /* Hide webkit scrollbar */
}
.portfolio-layout.view-vertical:active {
    cursor: grabbing;
}
.portfolio-layout.view-vertical .portfolio-item-card {
    flex: 0 0 323px;
    width: 323px;
}
.portfolio-layout.view-vertical .portfolio-img-frame {
    width: 323px;
    height: 666px;
}
/* Hide Title text in Vertical View mode */
.portfolio-layout.view-vertical .portfolio-item-title,
.portfolio-layout.view-vertical .portfolio-item-subtitle {
    display: none;
}
/* Hover Animation: Scale up slightly and shift image background left */
.portfolio-layout.view-vertical .portfolio-item-card:hover .portfolio-img-frame img {
    transform: translateX(-15px);
}

/* --- MODE 2: HORIZONTAL VIEW (2-Column Grid) --- */
.portfolio-layout.view-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
}
.portfolio-layout.view-horizontal .portfolio-item-card {
    width: 100%;
    max-width: 666px;
}
.portfolio-layout.view-horizontal .portfolio-img-frame {
    width: 100%;
    height: 323px;
}
.portfolio-layout.view-horizontal .portfolio-item-title {
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 24px;
    color: var(--primary-color);
    line-height: 29px;
    font-weight: 500;
    letter-spacing: 2%;
}
.portfolio-layout.view-horizontal .portfolio-item-subtitle {
    display: block;
    font-size: 18px;
    color: var(--primary-color);
    line-height: 25px;
    font-weight: 400;
    letter-spacing: 2%;
    margin-top: .25rem;
}

/* Responsive adjustments for the 2-column grid on mobile */
@media (max-width: 768px) {
    .portfolio-layout.view-horizontal {
        grid-template-columns: 1fr;
    }
}