/* RESET BÀSIC */
* { box-sizing: border-box; margin:0; padding:0; }

/* COS */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    color: #000;
}

/* HEADER */
header { 
    text-align:center; 
    padding:30px 20px 10px 20px; 
    color:#687;
}

header h1 { 
    font-size:22px; 
    font-weight:normal; 
    letter-spacing:2px; 
}

header h2 { 
    font-size:16px; 
    font-weight:normal; 
    margin-top:5px; 
    color:#777; 
}
header h3 { 
    font-size:14px; 
    font-weight:normal; 
    margin-top:5px; 
    color:#777; 
}

/* NAV */
.top-nav { padding: 20px 0; }

.tabs { 
    display:flex; 
    justify-content:center; 
    gap:30px; 
}

.tab { 
    text-decoration:none; 
    font-weight:normal; 
    color:#666; 
    cursor:pointer; 
}

.tab.active { 
    border-bottom:2px solid black; 
}

/* GRID — màxim 3 columnes, responsive */
.grid {
    max-width: 1100px;
    margin: 40px auto;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr); /* màxim 3 columnes */
}



.text {text-align: center; color: #555;
}

/* Estil taula  */
.table-haiku {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fdfdfd;
    color: #333;
}

.table-haiku th, .table-haiku td {
    border: 1px solid #ccc;
    padding: 12px 15px;
    text-align: center;
    font-size: 14px;
}

.table-haiku th {
    background-color: #eee;
    color: #555;
    font-weight: 700;
}

.table-haiku tr:nth-child(even) {
    background-color: #fafafa;
}

.table-haiku tr:hover {
    background-color: #f0f0f0;
}

@media (max-width: 600px) {
    .table-haiku th, .table-haiku td {
        font-size: 12px;
        padding: 8px 10px;
    }
}


@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnes tablet */
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr; /* 1 columna mòbil */
    }
}

/* ITEM */
.grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%; /* quadrat */
    text-align: center;
}

/* IMATGES */
.grid-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;      /* imatges grans */
    height: auto;
    object-fit: contain;
    transition: none; /* sense hover / zoom */
}

/* CAPTION */
.caption { 
    margin-top: 15px; /* més espai entre imatge i text */
    font-size:14px; 
    font-weight:700; /* bold */
}

/* BUTTON */
#shuffleBtn {
    display:block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
background-color: white;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8em;
    color:#555;
}

footer p:last-child {
    margin-top: 8px;
    color: #888;
    letter-spacing: 1px;
}