/* Page-owned styles for ryby-trofea */
.ryby-trofea-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-block: var(--space-8);
}

/* Hero */
.ryby-trofea-hero {
    background-color: var(--color-sand);
    position: relative;
    overflow: hidden;
}

.ryby-trofea-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-8);
}

.ryby-trofea-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    min-width: 0;
}

.ryby-trofea-hero__lead {
    max-width: 60ch;
    margin: 0;
}

.ryby-trofea-hero__details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ryby-trofea-hero__details li {
    position: relative;
    padding-left: var(--space-5);
    color: var(--color-muted-ink);
}

.ryby-trofea-hero__details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-lake-blue);
}

.ryby-trofea-hero__cta {
    margin-top: var(--space-2);
}

.ryby-trofea-hero__visual {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-medium);
    position: relative;
    overflow: hidden;
}

.ryby-trofea-hero__topo {
    position: absolute;
    inset: 0;
    background-image: repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 12px, rgba(74, 144, 217, 0.08) 12px, rgba(74, 144, 217, 0.08) 14px);
    background-size: 100% 100%;
    opacity: 0.6;
}

/* Section base */
.ryby-trofea-section {
    padding-block: var(--space-8);
}

.ryby-trofea-section h2 {
    margin-block-end: var(--space-6);
}

/* Fish cards */
.ryby-trofea-freshwater__grid,
.ryby-trofea-tropical__grid,
.ryby-trofea-rare__grid {
    display: grid;
    gap: var(--space-5);
}

.ryby-trofea-freshwater__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ryby-trofea-tropical__grid,
.ryby-trofea-rare__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ryby-trofea-fish-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: box-shadow var(--transition-color), transform var(--transition-transform);
}

.ryby-trofea-fish-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.ryby-trofea-fish-card__figure {
    margin: 0;
    padding: var(--space-3);
    background-color: var(--color-sand);
    border-bottom: 1px solid var(--color-border-light);
}

.ryby-trofea-fish-card__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid var(--color-white);
    border-radius: var(--radius-small);
    display: block;
}

.ryby-trofea-fish-card__figure figcaption {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-small);
    text-align: center;
    font-weight: var(--weight-h3);
    color: var(--color-ink);
}

.ryby-trofea-fish-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.ryby-trofea-fish-card__body h3 {
    margin: 0;
}

.ryby-trofea-fish-card__body p {
    margin: 0;
    max-width: 300px;
}

/* Album */
.ryby-trofea-album {
    background-color: var(--color-white);
}

.ryby-trofea-album__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
}

.ryby-trofea-album__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ryby-trofea-album__content p {
    max-width: 500px;
    margin: 0;
}

.ryby-trofea-album__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 500px;
}

.ryby-trofea-album__list li {
    position: relative;
    padding-left: var(--space-5);
    color: var(--color-muted-ink);
}

.ryby-trofea-album__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-reed-green);
}

.ryby-trofea-album__visual {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-sand);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-medium);
    position: relative;
    overflow: hidden;
}

.ryby-trofea-album__guide {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(107, 142, 35, 0.05) 0, rgba(107, 142, 35, 0.05) 10px, transparent 10px, transparent 20px);
}

/* Stories */
.ryby-trofea-stories__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.ryby-trofea-story {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.ryby-trofea-story p {
    margin: 0;
    max-width: 400px;
}

.ryby-trofea-story footer {
    font-size: var(--text-small);
    color: var(--color-muted-ink);
    font-weight: var(--weight-h3);
}

/* Tips */
.ryby-trofea-tips {
    background-color: var(--color-white);
}

.ryby-trofea-tips__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 600px;
}

.ryby-trofea-tips__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.ryby-trofea-tips__block h3 {
    margin: 0;
}

.ryby-trofea-tips__block p,
.ryby-trofea-tips__block ul {
    margin: 0;
}

.ryby-trofea-tips__block ul {
    padding-left: var(--space-5);
}

/* CTA */
.ryby-trofea-cta {
    background-color: var(--color-deep-water);
    color: var(--color-sand);
    padding-block: var(--space-8);
}

.ryby-trofea-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    max-width: 600px;
    margin-inline: auto;
}

.ryby-trofea-cta__inner h2 {
    color: var(--color-sand);
    margin: 0;
}

.ryby-trofea-cta__inner p {
    margin: 0;
}

.ryby-trofea-cta__button {
    margin-top: var(--space-2);
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1023px) {
    .ryby-trofea-hero__inner {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
        gap: var(--space-6);
    }

    .ryby-trofea-freshwater__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ryby-trofea-freshwater__grid .ryby-trofea-fish-card:last-child {
        grid-column: span 2;
    }

    .ryby-trofea-album__inner {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    }
}

@media (min-width: 1024px) {
    .ryby-trofea-hero__inner {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
        gap: var(--space-6);
    }

    .ryby-trofea-freshwater__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ryby-trofea-album__inner {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    }
}

@media (max-width: 767px) {
    .ryby-trofea-page {
        gap: var(--space-7);
        padding-block: var(--space-7);
    }

    .ryby-trofea-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }

    .ryby-trofea-hero__visual {
        order: 2;
    }

    .ryby-trofea-hero__content {
        order: 1;
    }

    .ryby-trofea-freshwater__grid,
    .ryby-trofea-tropical__grid,
    .ryby-trofea-rare__grid,
    .ryby-trofea-stories__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ryby-trofea-freshwater__grid .ryby-trofea-fish-card:last-child {
        grid-column: auto;
    }

    .ryby-trofea-album__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ryby-trofea-album__visual {
        order: 2;
    }

    .ryby-trofea-album__content {
        order: 1;
    }

    .ryby-trofea-cta__inner {
        max-width: 100%;
    }
}