/* sections.html — letters/videos/audio page only. Loaded after css/shared.css. */

/* Photo frame: this page's specific shadow depth + hover lift. */
.photo-frame {
    box-shadow: 0 4px 10px rgba(27, 28, 25, 0.10);
    transition: box-shadow 400ms ease-out, transform 400ms ease-out;
}
.photo-frame:hover {
    box-shadow: 0 8px 18px rgba(27, 28, 25, 0.15);
    transform: translateY(-3px);
}
@media (hover: hover) {
    .photo-frame-inner img {
        filter: grayscale(88%) contrast(1.03);
        transition: filter 600ms ease-out, transform 700ms ease-out;
    }
    .photo-frame:hover .photo-frame-inner img {
        filter: grayscale(0%);
        transform: scale(1.05);
    }
}

/* Letters are treated as kept keepsakes, not UI cards: warm parchment tone
   instead of stark white, a faint quote glyph and fold crease to read as a
   folded page, and a soft handwritten-pile tilt that settles flat on
   hover/focus. */
.letter-card {
    position: relative;
    background: linear-gradient(180deg, #fffdf8 0%, #faf6ea 100%);
    border-radius: 0.4rem;
    padding: 2.25rem 2.25rem 1.75rem;
    box-shadow: 0 18px 38px rgba(27, 28, 25, 0.08);
    transition: transform 500ms ease-out, box-shadow 500ms ease-out;
    overflow: hidden;
}
.letter-card::before {
    content: "\201D";
    position: absolute;
    top: -1.25rem;
    right: 1.5rem;
    font-family: var(--font-decorative-quote);
    font-size: 6rem;
    color: rgba(124, 140, 160, 0.16);
    line-height: 1;
    pointer-events: none;
}
.letter-card::after {
    content: "";
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    top: 34%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(27, 28, 25, 0.05) 18%, rgba(27, 28, 25, 0.05) 82%, transparent);
    pointer-events: none;
}
.letter-card:nth-child(odd) { transform: rotate(-0.5deg); }
.letter-card:nth-child(even) { transform: rotate(0.4deg); }
.letter-card:hover,
.letter-card:focus-within {
    transform: rotate(0deg) translateY(-3px);
    box-shadow: 0 28px 52px rgba(27, 28, 25, 0.15);
}
.letter-body {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 1.0625rem;
    line-height: 1.9;
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .letter-card, .letter-card:hover { transition: none; }
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The two "where does this go" links under the letters preview card —
   each reads as its own small destination card (icon + title + one-line
   description of what's on the other side) instead of a bare text link,
   so it's clear before the click where "כל 54 המכתבים" vs. "סיפורים על
   אלון" actually leads. */
.section-link-card {
    transition: background-color 300ms ease-out, transform 300ms ease-out;
}
.section-link-card:hover,
.section-link-card:focus-visible {
    background-color: #dcdfe3;
    transform: translateY(-2px);
}
.section-link-card .material-symbols-outlined:last-child {
    transition: transform 300ms ease-out;
}
.section-link-card:hover .material-symbols-outlined:last-child {
    transform: translateX(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .section-link-card,
    .section-link-card .material-symbols-outlined:last-child {
        transition: none;
    }
}