/* Hub – rozbalovací karty (logo + název → hover = detail) */



:root {

  --hub-max-width: 1400px;

  --hub-gap: 1.2rem;

  --hub-tile-radius: 24px;

  --hub-card-collapsed: 210px;

  --hub-logo-box-w: min(88%, 200px);

  --hub-logo-box-h: 108px;

  --hub-expand-duration: 0.42s;

}



.logo-subtitle {

  margin-top: 0.5rem;

  font-size: clamp(0.95rem, 2.5vw, 1.15rem);

  color: #ccc;

  letter-spacing: 0.06em;

}



.logo-img {

  max-width: min(420px, 92vw);

  width: 100%;

  height: auto;

  display: block;

  margin: 0 auto;

}



.main-header {

  height: clamp(120px, 18vh, 200px);

  min-height: 100px;

}



.main-container {

  max-width: var(--hub-max-width);

  margin: 0 auto;

  padding: 0 clamp(0.5rem, 2vw, 1.2rem);

}



/* ——— Grid ——— */

.projects-grid {

  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--hub-gap);

  margin: 0.25rem 0 0.75rem;

  align-items: start;

}



/* ——— Karta: sbalená = stejná výška ——— */

.projects-grid .project-tile {

  position: relative;

  display: flex;

  flex-direction: column;

  width: 100%;

  min-height: var(--hub-card-collapsed) !important;

  height: auto !important;

  max-height: none !important;

  overflow: visible !important;

  box-sizing: border-box;

  transition: min-height var(--hub-expand-duration) ease, z-index 0s;

}



.projects-grid .glass-effect {

  position: absolute;

  inset: 0;

  border-radius: var(--hub-tile-radius);

  pointer-events: none;

  z-index: 1;

  backdrop-filter: blur(8px);

  transform: none !important;

}



.projects-grid .tile-content {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  min-height: var(--hub-card-collapsed);

  padding: 0.85rem 0.85rem 0.75rem;

  box-sizing: border-box;

}



/* Sbaleno: logo uprostřed, název dole */

.projects-grid .project-head {

  flex: 1 1 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  min-height: calc(var(--hub-card-collapsed) - 1.75rem);

  text-align: center;

}



.projects-grid .project-logo-slot {

  flex: 1 1 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: var(--hub-logo-box-h);

}



.projects-grid .project-logo {

  width: var(--hub-logo-box-w);

  height: var(--hub-logo-box-h);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

}



.projects-grid .project-logo-img {

  display: block;

  max-width: 100% !important;

  max-height: 100% !important;

  width: auto !important;

  height: auto !important;

  object-fit: contain;

  transform-origin: center center;

  transition: transform 0.25s ease;

}



/* Vizuálně sjednocená velikost – úprava podle assetu */

.projects-grid .project-tile[data-project="tattoo"] .project-logo-img {

  transform: scale(1.55);

}



.projects-grid .project-tile[data-project="fest"] .project-logo-img {

  transform: scale(1.1);

}



.projects-grid .project-tile[data-project="streetwear"] .project-logo-img {

  transform: scale(1.22);

}



.projects-grid .project-tile[data-project="event"] .project-logo-img {

  transform: scale(1.05);

}



.projects-grid .project-tile[data-project="tattoo"]:hover .project-logo-img,

.projects-grid .project-tile[data-project="tattoo"]:focus-within .project-logo-img,

.projects-grid .project-tile[data-project="tattoo"].is-expanded .project-logo-img {

  transform: scale(1.55) !important;

}



.projects-grid .project-tile[data-project="fest"]:hover .project-logo-img,

.projects-grid .project-tile[data-project="fest"]:focus-within .project-logo-img,

.projects-grid .project-tile[data-project="fest"].is-expanded .project-logo-img {

  transform: scale(1.1) !important;

}



.projects-grid .project-tile[data-project="streetwear"]:hover .project-logo-img,

.projects-grid .project-tile[data-project="streetwear"]:focus-within .project-logo-img,

.projects-grid .project-tile[data-project="streetwear"].is-expanded .project-logo-img {

  transform: scale(1.22) !important;

}



.projects-grid .project-tile[data-project="event"]:hover .project-logo-img,

.projects-grid .project-tile[data-project="event"]:focus-within .project-logo-img,

.projects-grid .project-tile[data-project="event"].is-expanded .project-logo-img {

  transform: scale(1.05) !important;

}



/* Hover: border musí zůstat (styles.css ho jinak maže) */

.projects-grid .project-tile[data-project="tattoo"]:hover,

.projects-grid .project-tile[data-project="tattoo"]:focus-within,

.projects-grid .project-tile[data-project="tattoo"].is-expanded {

  border-color: #b0dc00 !important;

}



.projects-grid .project-tile[data-project="fest"]:hover,

.projects-grid .project-tile[data-project="fest"]:focus-within,

.projects-grid .project-tile[data-project="fest"].is-expanded {

  border-color: #d72660 !important;

}



.projects-grid .project-tile[data-project="streetwear"]:hover,

.projects-grid .project-tile[data-project="streetwear"]:focus-within,

.projects-grid .project-tile[data-project="streetwear"].is-expanded {

  border-color: #fff !important;

}



.projects-grid .project-tile[data-project="event"]:hover,

.projects-grid .project-tile[data-project="event"]:focus-within,

.projects-grid .project-tile[data-project="event"].is-expanded {

  border-color: #19e6a5 !important;

}



.projects-grid .project-title {

  flex: 0 0 auto;

  margin-top: auto;

  padding-top: 0.35rem;

  font-size: clamp(0.85rem, 1.6vw, 1.05rem);

  font-weight: 700;

  letter-spacing: 0.04em;

  line-height: 1.2;

  width: 100%;

  white-space: normal;

}



/* Skrytý detail – rozbalí se při hover / focus / tap */

.projects-grid .project-tile-expand {

  display: grid;

  grid-template-rows: 0fr;

  width: 100%;

  transition: grid-template-rows var(--hub-expand-duration) cubic-bezier(0.4, 0.2, 0.2, 1);

}



.projects-grid .project-tile-expand__inner {

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  padding-top: 0;

  transition: padding-top var(--hub-expand-duration) ease;

}



.projects-grid .project-description {

  font-size: clamp(0.82rem, 1.5vw, 0.95rem);

  line-height: 1.45;

  color: #e0e0e0;

  text-align: center;

  width: 100%;

  margin: 0 0 0.65rem;

  overflow: visible;

  display: block;

  -webkit-line-clamp: unset;

  line-clamp: unset;

  height: auto;

  max-height: none;

}



.projects-grid .project-features {

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem;

  justify-content: center;

  width: 100%;

  margin: 0 0 0.75rem;

  height: auto;

  max-height: none;

  overflow: visible;

}



.projects-grid .project-features .feature {

  font-size: 0.78rem;

  padding: 0.28em 0.75em;

}



.projects-grid .project-socials {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  justify-content: center;

  align-items: center;

  width: 100%;

  margin: 0 0 0.85rem;

  height: auto;

  max-height: none;

  overflow: visible;

}



.projects-grid .social-link {

  width: 42px !important;

  height: 42px !important;

  min-width: 42px;

  font-size: 1rem !important;

  flex-shrink: 0;

}



.projects-grid .project-web {

  width: 100%;

  display: flex;

  justify-content: center;

  margin: 0 0 0.25rem;

}



.projects-grid .project-link {

  width: 100%;

  max-width: 220px;

  justify-content: center;

  padding: 0.7rem 1.2rem !important;

  font-size: 0.95rem !important;

}



/* ——— Rozbalení ——— */

@media (hover: hover) and (pointer: fine) {

  .projects-grid .project-tile:hover,

  .projects-grid .project-tile:focus-within {

    z-index: 20;

  }



  .projects-grid .project-tile:hover .project-tile-expand,

  .projects-grid .project-tile:focus-within .project-tile-expand {

    grid-template-rows: 1fr;

  }



  .projects-grid .project-tile:hover .project-tile-expand__inner,

  .projects-grid .project-tile:focus-within .project-tile-expand__inner {

    padding-top: 0.5rem;

  }



  .projects-grid:hover .project-tile {

    opacity: 0.12;

    transition: opacity 0.4s ease;

  }



  .projects-grid:hover .project-tile:hover,

  .projects-grid:hover .project-tile:focus-within {

    opacity: 1 !important;

  }

}



/* Dotyk: třída .is-expanded z JS */

.projects-grid .project-tile.is-expanded {

  z-index: 20;

}



.projects-grid .project-tile.is-expanded .project-tile-expand {

  grid-template-rows: 1fr;

}



.projects-grid .project-tile.is-expanded .project-tile-expand__inner {

  padding-top: 0.5rem;

}



.projects-grid .project-tile:hover,

.projects-grid .project-tile:active {

  transform: none !important;

}



/* Žádné kruhy / ilustrace nad logem */

.projects-grid .project-illustration,

.projects-grid .digital-art,

.projects-grid .art-element {

  display: none !important;

}



/* ——— Responzivita ——— */

@media (max-width: 1199px) {

  .projects-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 1rem;

  }

}



@media (max-width: 699px) {

  .projects-grid {

    grid-template-columns: 1fr;

    gap: 0.75rem;

  }



  :root {

    --hub-card-collapsed: 200px;

    --hub-logo-box-h: 96px;

  }

}



/* Mobil / tablet bez hoveru: klepnutí rozbalí kartu */

@media (hover: none) {

  .projects-grid .project-tile:not(.is-expanded) .project-head::after {

    content: 'Klepněte pro více';

    display: block;

    font-size: 0.72rem;

    color: rgba(255, 255, 255, 0.45);

    margin-top: 0.35rem;

    letter-spacing: 0.02em;

  }

}



@media (max-width: 479px) {

  .projects-grid .social-link {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px;

  }



  .share-button {

    width: 36px;

    height: 36px;

    top: 0.75rem;

    right: 0.75rem;

  }

}



/* Loader – mobil */

@media (max-width: 520px) {

  .page-loader .loader-ring {

    width: 260px !important;

    height: 260px !important;

  }



  .page-loader .loader-progress {

    width: 260px !important;

    height: 260px !important;

  }



  .page-loader .loader-logo {

    max-width: 180px !important;

  }

}



/* Dialog modaly */

.contact-form,

.author-modal {

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

  margin: auto;

  max-height: 90vh;

  overflow-y: auto;

}



.contact-form::backdrop,

.author-modal::backdrop {

  background: rgba(0, 0, 0, 0.7);

}



.contact-form:not([open]).active,

.author-modal:not([open]).active {

  display: block;

}



.contact-form[open],

.author-modal[open] {

  display: block;

}



@media (hover: none) {

  .projects-grid:has(.project-tile.is-expanded) .project-tile:not(.is-expanded) {

    opacity: 0.12;

    transition: opacity 0.35s ease;

  }

}



@media (prefers-reduced-motion: reduce) {

  .projects-grid .project-tile-expand {

    transition-duration: 0.01ms;

  }

}