/* 30 dni dla Siebie - R7319
   Desktopowy katalog na index.html ma odpowiadać katalogowi start.html.
   Mobile pozostaje z R7318: 2 poziome rzędy po maks. 6 kart. */

/* =========================================================
   DESKTOP / TABLET > 720 px
   Geometria kart skopiowana z produkcyjnego start.html.
   ========================================================= */
@media (min-width:721px){

  .home-start-catalogue #templateGrid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
    margin-top:68px!important;
    overflow:visible!important;
    align-items:stretch!important;
  }

  .home-start-catalogue .template-card{
    position:relative!important;
    overflow:visible!important;
    isolation:isolate!important;
    z-index:1!important;
    min-width:0!important;
    min-height:336px!important;
    height:auto!important;
    padding:16px 15px 14px!important;
    display:flex!important;
    flex-direction:column!important;
    border:1px solid var(--border)!important;
    border-radius:19px!important;
    background:var(--surface)!important;
    transition:box-shadow .20s ease,transform .20s ease!important;
  }

  .home-start-catalogue .template-card:hover{
    z-index:100!important;
    transform:translateY(-2px)!important;
    border-color:rgba(255,90,0,.35)!important;
    box-shadow:var(--shadow-sm)!important;
  }

  .home-start-catalogue .template-card::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    right:6px!important;
    top:6px!important;
    width:150px!important;
    height:150px!important;
    border-radius:999px!important;
    background:radial-gradient(circle,rgba(255,90,0,.09),rgba(255,90,0,.025) 55%,transparent 72%)!important;
    pointer-events:none!important;
  }

  .home-start-catalogue .template-card__hero3d{
    position:absolute!important;
    top:4px!important;
    right:4px!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:initial!important;
    display:block!important;
    z-index:3!important;
    pointer-events:none!important;
    transform-origin:100% 0%!important;
    transform:scale(.325)!important;
    filter:drop-shadow(0 14px 18px rgba(15,23,42,.16))!important;
    transition:transform .22s cubic-bezier(.2,.75,.25,1),filter .22s ease!important;
  }

  .home-start-catalogue .template-card:hover .template-card__hero3d{
    z-index:200!important;
    transform:translateY(-26px) scale(.375)!important;
    filter:drop-shadow(0 25px 30px rgba(15,23,42,.28))!important;
  }

  .home-start-catalogue .template-card h3{
    position:relative!important;
    z-index:5!important;
    margin:162px 0 8px!important;
    max-width:76%!important;
    width:fit-content!important;
    min-height:unset!important;
    padding:10px 13px 9px!important;
    font-size:16px!important;
    line-height:1.18!important;
    letter-spacing:-.015em!important;
    color:var(--text)!important;
    background:color-mix(in srgb,var(--surface) 97%,transparent)!important;
    border-radius:18px!important;
    box-shadow:0 10px 18px rgba(15,23,42,.08)!important;
    overflow:visible!important;
  }

  .home-start-catalogue .template-card>p{
    position:relative!important;
    z-index:5!important;
    margin:0!important;
    max-width:73%!important;
    width:min(73%,100%)!important;
    min-height:2.9em!important;
    max-height:2.9em!important;
    padding:9px 12px 10px!important;
    font-size:11.7px!important;
    line-height:1.45!important;
    color:var(--text)!important;
    background:color-mix(in srgb,var(--surface) 95%,transparent)!important;
    border-radius:16px!important;
    box-shadow:0 10px 18px rgba(15,23,42,.07)!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }

  .home-start-catalogue .template-card__tag{
    position:relative!important;
    z-index:5!important;
    margin-top:auto!important;
    padding-top:10px!important;
    font-size:9px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.08em!important;
    color:var(--orange)!important;
  }

  .home-start-catalogue .template-card__actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    margin-top:10px!important;
    position:relative!important;
    z-index:12!important;
  }

  .home-start-catalogue .template-card__actions .btn{
    min-width:0!important;
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:12px!important;
    font-weight:800!important;
    justify-content:center!important;
    text-decoration:none!important;
  }

  /* Własny Czelendż - ten sam wyróżniony kafel jak na start.html. */
  .home-start-catalogue .template-card[data-template-id="custom-challenge"]{
    background:linear-gradient(145deg,#ff9b61 0%,#ffad77 58%,#ffc59e 100%)!important;
    border-color:#ff8a45!important;
    box-shadow:0 16px 34px rgba(217,93,28,.20)!important;
  }

  .home-start-catalogue .template-card[data-template-id="custom-challenge"]::before{
    background:radial-gradient(circle,rgba(255,255,255,.48),rgba(255,255,255,.16) 56%,transparent 74%)!important;
  }

  .home-start-catalogue .template-card[data-template-id="custom-challenge"] h3{
    background:rgba(255,250,246,.96)!important;
    color:#30170d!important;
  }

  .home-start-catalogue .template-card[data-template-id="custom-challenge"]>p{
    background:rgba(255,250,246,.90)!important;
    color:#4a2a1b!important;
  }

  .home-start-catalogue .template-card[data-template-id="custom-challenge"] .template-card__tag{
    color:#7b2f0b!important;
  }

  .home-start-catalogue .template-card[data-template-id="custom-challenge"] .btn--primary{
    background:#d94c00!important;
    border-color:#d94c00!important;
    color:#fff!important;
  }

  /* Nagłówek, sortowanie, kategorie i wyszukiwarka - rytm start.html. */
  .home-start-catalogue .section-head{
    align-items:flex-end!important;
  }

  .home-start-catalogue .catalogue-head-controls{
    align-items:flex-end!important;
    gap:14px!important;
  }

  .home-start-catalogue .catalogue-head-controls .catalogue-sort{
    width:210px!important;
    min-width:210px!important;
  }

  .home-start-catalogue .catalogue-categories{
    display:flex!important;
    gap:7px!important;
    overflow:visible!important;
    padding:2px 0 12px!important;
    margin:0!important;
  }

  .home-start-catalogue .catalogue-category{
    flex:1 1 0!important;
    min-width:0!important;
    min-height:34px!important;
    padding:7px 8px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  .home-start-catalogue .catalogue-search input{
    min-height:48px!important;
  }

  .home-start-catalogue .catalogue-pager{
    margin-top:20px!important;
  }
}

/* Na średnim desktopie nadal 4 kolumny, ale z mniejszym odstępem. */
@media (min-width:721px) and (max-width:1100px){
  .home-start-catalogue #templateGrid{
    gap:10px!important;
  }
  .home-start-catalogue .template-card h3{
    font-size:14px!important;
  }
  .home-start-catalogue .template-card__actions .btn{
    font-size:11px!important;
  }
}

/* Podczas tej jednej sekcji puzzle strony głównej znikają wizualnie.
   Silnik nadal działa i po wyjściu z sekcji puzzle wracają bez utraty stanu. */
#homeStoryPuzzle.is-catalogue-suppressed{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .16s ease,visibility .16s ease!important;
}