/* components.css */

/* Core listing & details (index/about pages) */
#cards {
    background: transparent;
}
#cards > * {
    color: initial;
}

details {
    position: relative;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--color-bg-panel);
    border-radius: var(--radius);
    font-size: 3rem;
    transition: background var(--transition-med);
}
details[open] {
    width: 100%;
    max-width: 1500px;
    background: var(--color-bg-panel-open);
}
details summary {
    display: block;
    padding: 1.5rem 3rem;
    margin-bottom: 1rem;
    font-size: 3rem;
    background: #413c55;
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
    color: var(--color-text-light);
}
details summary:hover,
details summary:focus {
    background: #52486d;
}
details summary::-webkit-details-marker {
    display: none;
}
details summary::after {
    content: "▸";
    position: absolute;
    right: 2rem;
    transition: transform var(--transition-fast);
}
details[open] summary::after {
    transform: rotate(90deg);
}

.placeholder {
    font: 1.25rem "Montserrat", sans-serif;
    color: var(--color-text-light);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    text-shadow: var(--color-text-dark);
}

.details-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-1rem);
    transition:
            max-height 0.6s ease,
            opacity 0.5s ease 0.1s,
            transform 0.5s ease 0.1s;
}
details[open] > .details-body {
    max-height: 5000px;
    opacity: 1;
    transform: translateY(0);
    overflow: visible;
}

.suit-section {
    margin-top: 3rem;
}
.suit-section h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-light);
}
.suit-section p {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-family: "Montserrat", sans-serif;
    color: var(--color-text-light);
}

body.reading-page .draw-container {
    text-align: center;
    margin-bottom: 2rem;
}

body.reading-page #draw-btn {
    font-size: 2rem;
    font-weight: 600;
    padding: 1rem 2rem;
}

body.reading-page .spread {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

body.reading-page .card-block {
    flex: 1 1 0;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.reading-page .card-block img {
    width: 65%;
    object-fit: cover;
    border-radius: var(--radius);
    clip-path: inset(5x);
    box-shadow: #413c55 1px 1px 1px;
    transform: translateY(-50px) scale(0.1);
    transition: transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

body.reading-page .card-block img.fly-in {
    transform: translateY(0) scale(1);
}

body.reading-page .card-block img.reversed {
    transform: rotate(180deg);
}

body.reading-page .card-info {
    width: 100%;
    height: 200px;
    overflow: scroll;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: var(--color-bg-panel);
    font-size: 2rem;
}

body.reading-page .card-info h3 {
    margin-bottom: 2rem;
    font-variant-caps: petite-caps;
    color: var(--color-text-dark);
    text-align: center;
    text-shadow:
            0 0 4px rgba(255,255,255,0.8),
            0 0 12px rgba(255,255,255,0.6),
            0 0 20px rgba(207, 161, 32, 0.74);
}

body.reading-page .card-info p {
    margin: 2rem 2rem;
    color: var(--color-text-light);
    text-align: left;
    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
}