/**
 * ============================================
 * TREE-RIPE FRUIT PAGES
 * ============================================
 * Styles for:
 * - single-fruit.php (individual fruit story pages)
 * - [tr_fruit_archive] shortcode (Our Fruit page)
 *
 * Version: 1.0.0
 * ============================================
 */

/* ── Brand Variables ── */
.tr-fruit-single,
.tr-fruit-archive {
    --tr-forest: #0F5E41;
    --tr-medium-green: #408469;
    --tr-black: #333333;
    --tr-gray: #666666;
    --tr-border: #E6E0D6;
    --tr-white: #FFFFFF;
    --tr-placeholder: #eeeeee;
    --tr-winter: #E78825;
    --tr-spring: #F9E084;
    --tr-summer: #F8E0CF;
    --tr-fall: #AF2D3A;
    --tr-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --tr-font-display: Georgia, 'Times New Roman', serif;
    --tr-font-ui: 'Avenir Next', 'Avenir', system-ui, sans-serif;
    --tr-font-body: 'Avenir', 'Avenir Next', system-ui, sans-serif;
}


/* ============================================
 * SINGLE FRUIT PAGE
 * ============================================ */

.tr-fruit-single {
    font-family: var(--tr-font-body);
    font-size: 15px;
    color: var(--tr-black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.tr-fruit-single img {
    display: block;
}

/* ── Animations ── */
@keyframes tr-fruit-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tr-fruit-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tr-fruit-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s var(--tr-ease);
}

.tr-fruit-reveal.tr-fruit-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .tr-fruit-single *,
    .tr-fruit-single *::before,
    .tr-fruit-single *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .tr-fruit-reveal {
        opacity: 1;
        transform: none;
    }
}


/* ── Hero ── */
.tr-fruit-hero {
    background: var(--tr-forest);
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px);
    opacity: 0;
    animation: tr-fruit-fade-in 0.6s var(--tr-ease) forwards;
}

.tr-fruit-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}


/* ── Season Badge ── */
.tr-fruit-season-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--tr-font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.tr-fruit-season-tag i {
    font-size: 14px;
    flex-shrink: 0;
}

.tr-fruit-season-tag.winter { background: var(--tr-winter); color: var(--tr-white); }
.tr-fruit-season-tag.spring { background: var(--tr-spring); color: var(--tr-black); }
.tr-fruit-season-tag.summer { background: var(--tr-summer); color: var(--tr-black); }
.tr-fruit-season-tag.fall { background: var(--tr-fall); color: var(--tr-white); }

/* Multiple season badges */
.tr-fruit-season-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tr-fruit-season-tags .tr-fruit-season-tag {
    margin-bottom: 0;
}

.tr-fruit-season-tags--multi .tr-fruit-season-tag {
    font-size: 12px;
    padding: 6px 14px;
    letter-spacing: 1px;
}

.tr-fruit-season-tags--multi .tr-fruit-season-tag i {
    font-size: 11px;
}


/* ── Hero Content ── */
.tr-fruit-hero h1 {
    font-family: var(--tr-font-display);
    font-size: clamp(36px, 5.5vw, 58px);
    font-weight: 700;
    color: var(--tr-white);
    line-height: 1.06;
    margin-bottom: 16px;
}

.tr-fruit-hero-desc {
    font-size: clamp(15px, 1.4vw, 17px);
    color: #FFFFFF;
    line-height: 1.8;
}

.tr-fruit-hero-desc p {
    margin: 0;
}


/* ── Hero Image ── */
.tr-fruit-hero-img {
    border-radius: 16px;
    overflow: hidden;
    background: var(--tr-placeholder);
    aspect-ratio: 4/3;
    opacity: 0;
    animation: tr-fruit-fade-up 0.7s var(--tr-ease) 0.2s forwards;
}

.tr-fruit-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .tr-fruit-hero-grid {
        grid-template-columns: 1fr;
    }
    .tr-fruit-hero-img {
        order: -1;
    }
}


/* ── Content Container ── */
.tr-fruit-content {
    padding: 0 clamp(20px, 6vw, 100px);
}


/* ── Sections ── */
.tr-fruit-section {
    padding: clamp(48px, 6vw, 72px) 0;
}

.tr-fruit-section-label {
    font-family: var(--tr-font-display);
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 700;
    color: var(--tr-forest);
    line-height: 1.2;
    margin-bottom: 16px;
}

.tr-fruit-section-copy {
    font-size: clamp(16px, 1.3vw, 18px);
    color: var(--tr-gray);
    line-height: 1.8;
}

.tr-fruit-section-copy p {
    margin-bottom: 1em;
}

.tr-fruit-section-copy p:last-child {
    margin-bottom: 0;
}


/* ── Two-Column Layouts ── */
.tr-fruit-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
}

.tr-fruit-two-col--flip .tr-fruit-col-img {
    order: -1;
}

@media (max-width: 700px) {
    .tr-fruit-two-col {
        grid-template-columns: 1fr;
    }
    .tr-fruit-col-img {
        order: -1 !important;
    }
}

.tr-fruit-col-img {
    border-radius: 14px;
    overflow: hidden;
    background: var(--tr-placeholder);
    aspect-ratio: 4/3;
}

.tr-fruit-col-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ── Gallery ── */
.tr-fruit-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.2vw, 14px);
    margin-top: clamp(20px, 2.5vw, 32px);
}

.tr-fruit-gallery img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    background: var(--tr-placeholder);
}


/* ── Media Block (Feature Image/Video) ── */
.tr-fruit-media-block {
    border-radius: 14px;
    overflow: hidden;
    background: var(--tr-placeholder);
    aspect-ratio: 16/9;
    position: relative;
}

.tr-fruit-media-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-fruit-media-block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ── Quote Band ── */
.tr-fruit-quote-band {
    background: var(--tr-forest);
    padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 48px);
    text-align: center;
}

.tr-fruit-quote-band-inner {
    max-width: 800px;
    margin: 0 auto;
}

.tr-fruit-quote-mark {
    display: block;
    margin: 0 auto clamp(16px, 2vw, 24px);
    color: var(--tr-medium-green);
}

.tr-fruit-quote-band h2 {
    font-family: var(--tr-font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    font-style: italic;
    color: var(--tr-white);
    line-height: 1.2;
    margin-bottom: 20px;
}

.tr-fruit-quote-copy {
    font-size: clamp(15px, 1.3vw, 17px);
    color: #E8F4EB;
    line-height: 1.85;
}

.tr-fruit-quote-copy p {
    margin: 0;
}


/* ============================================
 * FRUIT ARCHIVE (Our Fruit Page)
 * ============================================ */

.tr-fruit-archive {
    font-family: var(--tr-font-body);
    font-size: 15px;
    color: var(--tr-black);
    -webkit-font-smoothing: antialiased;
}

.tr-fruit-archive-header {
    text-align: center;
    padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 40px) clamp(16px, 2vw, 24px);
}

.tr-fruit-archive-header h1 {
    font-family: var(--tr-font-display);
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 700;
    color: var(--tr-forest);
}

.tr-fruit-archive-header p {
    font-size: 15px;
    color: var(--tr-gray);
    margin-top: 8px;
}

.tr-fruit-seasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 32px);
    padding: 0 clamp(20px, 5vw, 80px) clamp(48px, 6vw, 72px);
}

.tr-fruit-season-col {
    display: flex;
    flex-direction: column;
}

.tr-fruit-season-label {
    display: block;
    font-family: var(--tr-font-display);
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    padding: clamp(8px, 1vh, 12px) 0;
    border-bottom: 3px solid currentColor;
    margin-bottom: clamp(12px, 1.5vh, 20px);
    color: var(--tr-forest);
}

a.tr-fruit-season-label:hover,
a.tr-fruit-season-label:focus {
    text-decoration: none !important;
    color: var(--tr-forest);
}

.tr-fruit-season-col.winter .tr-fruit-season-label { border-color: var(--tr-winter); }
.tr-fruit-season-col.spring .tr-fruit-season-label { border-color: var(--tr-spring); }
.tr-fruit-season-col.summer .tr-fruit-season-label { border-color: var(--tr-summer); }
.tr-fruit-season-col.fall .tr-fruit-season-label { border-color: var(--tr-fall); }

.tr-fruit-list {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 12px);
}

.tr-fruit-item {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 14px);
    text-decoration: none;
    color: inherit;
    padding: clamp(6px, 0.8vh, 10px);
    border-radius: 10px;
    transition: transform 0.2s var(--tr-ease);
}

.tr-fruit-item:hover {
    transform: translateX(4px);
}

.tr-fruit-thumb {
    width: clamp(52px, 5vw, 72px);
    height: clamp(52px, 5vw, 72px);
    border-radius: 10px;
    overflow: hidden;
    background: var(--tr-placeholder);
    flex-shrink: 0;
}

.tr-fruit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-fruit-name {
    font-family: var(--tr-font-ui);
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 600;
    color: var(--tr-forest);
    line-height: 1.2;
}

.tr-fruit-season-empty {
    font-size: 14px;
    color: var(--tr-gray);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}


/* ── Archive Responsive ── */
@media (max-width: 900px) {
    .tr-fruit-seasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .tr-fruit-seasons-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tr-fruit-item {
        transition: none;
    }
}