/* Page sheet for catalogue.html. Everything is scoped under
   .catalogue-grid so nothing leaks into the shared header/footer
   or other pages that use img, p, .tag or .name. */

/* film strip: 20px "perforations" from the borders, gradient rows every 35px */
.catalogue-grid .card {
    width: calc(100% - 12px);
    min-height:100%;
    background-image: linear-gradient(
      to right,
      transparent 20px,
      var(--hairline) 20px,
      var(--hairline) calc(100% - 20px),
      transparent calc(100% - 20px)
    ),
    repeating-linear-gradient(var(--hairline), var(--hairline) 20px, var(--bg) 20px, var(--bg) 35px);
    background-repeat: repeat-y;
    box-sizing: border-box;
    border-left: 20px solid var(--hairline);
    border-right: 20px solid var(--hairline);
    padding: 20px 40px;
}
.catalogue-grid img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Service cards have no product photo, so a process label keeps the
   film-strip frame filled and the card heights consistent. */
.catalogue-grid .card-process {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin-bottom: 10px;
    border: 2px dashed var(--muted);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}
.catalogue-grid-container {
    padding-top: 25px;
}

/* Motion. Entrances ride the shared fadeInUp; the cards themselves
   only get hover lifts, so the JS display toggles can't replay
   anything on every filter/search/sort keystroke. */
#catalogue-controls { animation: fadeInUp .3s ease both; }
.catalogue-grid-container { animation: fadeInUp .3s ease both; }
#catalogue-empty:not([hidden]) { animation: fadeInUp .2s ease both; }
@media (hover: hover) {
    .catalogue-grid .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }
}

/* Press feedback for touch: same lift on :active, outside the
   (hover: hover) guard (touch devices fail that query). */
.catalogue-grid .card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* tag text is --text, not the accent: the accent only reaches 3.6:1
   on the dark-theme card background, under the 4.5:1 small-text floor */
.catalogue-grid .tag {
  padding: 3px 3px;
  border: 1px solid var(--accent);
  border-radius: 50px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.catalogue-grid .name {
  font-size: 20px;
  font-weight: 600;
}

.catalogue-grid p {
  font-size: 14px;
  line-height: 150%;
}

@media (min-width: 640px) {

    .catalogue-grid {

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

    }

}



@media (min-width: 1024px) {

    .catalogue-grid {

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

    }

}


@media (max-width: 400px) {

    .catalogue-grid .card {

        border-left-width: 12px;

        border-right-width: 12px;

        padding: 16px 20px;

        background-image: linear-gradient(

          to right,

          transparent 12px,

          var(--hairline) 12px,

          var(--hairline) calc(100% - 12px),

          transparent calc(100% - 12px)

        ),

        repeating-linear-gradient(var(--hairline), var(--hairline) 20px, var(--bg) 20px, var(--bg) 35px);

    }

}