/* OnlineTarot.nl — Tarotdecks, alleen td- componenten */
.td-page {
    padding-bottom:64px;
    color:#d9deea
}

.td-page * {
    box-sizing:border-box
}

.td-breadcrumb {
    display:flex;
    align-items:center;
    gap:11px;
    flex-wrap:wrap;
    margin:25px 0 0;
    font:12px Lora,serif;
    color:#a5aec1
}

.td-breadcrumb a {
    color:#cbb77d;
    text-decoration:none
}

.td-breadcrumb a:hover {
    text-decoration:underline
}

.td-hero {
    max-width: 850px;
    margin: 0px auto 35px;
    padding: 5px 5px 5px;
    text-align: center;
}

.td-eyebrow {
  display: block;
    margin-bottom: 12px;
    color: #C9A96E;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.td-hero h1,.td-section-intro h2,.td-guide-heading h2,.td-outro h2 {
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    color:#f0ecdf;
    line-height:1.1
}

.td-hero h1 {
    margin: 0 0 18px;
    color: #E3E8F3;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 600;
    line-height: 1.15;
}

.td-hero p {
    font:15px/1.95 Lora,serif;
    color:#bac3d3;
    max-width:690px;
    margin:0 auto
}

.td-hero-meta {
    display:inline-flex;
    gap:15px;
    align-items:center;
    margin-top:29px;
    padding:12px 22px;
    border-top:1px solid #48516b;
    border-bottom:1px solid #48516b;
    font:12px Lora,serif;
    color:#d1c5a9
}

.td-hero-meta span {
    color:#c6ad70
}

.td-section-intro {
    text-align:center;
    max-width:700px;
    margin:0 auto 29px
}

.td-section-intro h2,.td-guide-heading h2,.td-outro h2 {
    font-size:clamp(32px,4vw,44px);
    margin:9px 0 12px
}

.td-section-intro p {
    font:14px/1.8 Lora,serif;
    color:#abb7cb
}

.td-feature {
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,58%);
    overflow:hidden;
    border:1px solid #3b4862;
    border-radius:13px;
    background:linear-gradient(135deg,#111d34,#0a1225);
    box-shadow:0 14px 38px rgba(0,0,0,.16)
}

.td-feature-visual {
    min-height:340px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:radial-gradient(circle at 50% 42%,#273651,#0b1428 73%)
}

.td-feature-visual img {
    display:block;
    max-width:100%;
    max-height:380px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.35))
}

.td-feature-content {
    padding:clamp(26px,5vw,52px);
    align-self:center
}

.td-feature-content h3 {
    font:500 clamp(31px,4vw,46px)/1.15 'Cormorant Garamond',serif;
    color:#f2e8d3;
    margin:11px 0 20px
}

.td-feature-content p,.td-guide p,.td-outro p {
    font:14px/1.95 Lora,serif;
    color:#bfc7d7
}

.td-meta {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin:24px 0
}

.td-meta span {
    display:flex;
    flex-direction:column;
    gap:6px;
    font:13px Lora,serif;
    color:#e2e5ed
}

.td-meta strong {
    font:10px Lora,serif;
    letter-spacing:1.3px;
    text-transform:uppercase;
    color:#b8a374
}

.td-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:12px;
    padding:13px 22px;
    background:linear-gradient(135deg,#e4ca87,#b9954d);
    border:1px solid #e4ca87;
    border-radius:7px;
    color:#101727!important;
    text-decoration:none!important;
    font:700 13px Lora,serif;
    transition:filter .2s,transform .2s
}

.td-button:hover {
    filter:brightness(1.1);
    transform:translateY(-2px)
}

.td-collection {
    margin-top:80px
}

.td-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:23px
}

.td-card {
    min-width:0;
    overflow:hidden;
    border:1px solid #34425c;
    border-radius:11px;
    background:#0d182b;
    transition:border-color .2s,transform .2s
}

.td-card:hover {
    border-color:#bba36c;
    transform:translateY(-3px)
}

.td-card-link {
    display:grid;
    grid-template-columns:155px minmax(0,1fr);
    height:100%;
    color:inherit;
    text-decoration:none!important
}

.td-card-image {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:215px;
    padding:17px;
    background:radial-gradient(circle,#263550,#0a1325)
}

.td-card-image img {
    max-width:100%;
    max-height:210px;
    object-fit:contain;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))
}

.td-placeholder {
    width:100%;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c4ad73;
    font:76px 'Cormorant Garamond',serif
}

.td-card-content {
    padding:22px 22px 20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}

.td-card-kicker {
    color:#c6ad70;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font:10px Lora,serif
}

.td-card h3 {
    font:500 29px/1.13 'Cormorant Garamond',serif;
    color:#eee8dc;
    margin:9px 0
}

.td-card p {
    font:12px/1.8 Lora,serif;
    color:#b8c1d1;
    margin:0 0 13px
}

.td-card-details {
    display:flex;
    flex-wrap:wrap;
    gap:8px 13px;
    color:#bca979;
    font:11px Lora,serif;
    margin-top:auto
}

.td-card-more {
    display:block;
    margin-top:16px;
    color:#e1c78c;
    font:700 12px Lora,serif
}

.td-guide {
    margin-top:85px;
    padding:37px 32px 42px;
    border:1px solid #35415b;
    border-radius:12px;
    background:linear-gradient(145deg,#101b31,#0b1427)
}

.td-guide-heading {
    text-align:center;
    margin-bottom:29px
}

.td-guide-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:25px
}

.td-guide-grid article+article {
    border-left:1px solid #34425c;
    padding-left:24px
}

.td-guide-number {
    color:#bfa76f;
    font:24px 'Cormorant Garamond',serif
}

.td-guide h3 {
    font:500 25px 'Cormorant Garamond',serif;
    color:#e8e2d5;
    margin:8px 0 10px
}

.td-guide p {
    font-size:12px;
    margin:0
}

.td-outro {
    text-align:center;
    max-width:660px;
    margin:85px auto 10px
}

.td-outro p {
    margin:12px 0 20px
}

.td-empty {
    text-align:center;
    padding:45px;
    border:1px solid #35415b;
    border-radius:10px
}

.td-empty h2 {
    font:32px 'Cormorant Garamond',serif;
    color:#eee4d1
}

.td-empty p {
    font:14px Lora,serif;
    color:#bfc7d7
}

@media(max-width:850px) {
    .td-card-link {
        grid-template-columns:120px minmax(0,1fr)
    }

    .td-card-image {
        padding:10px
    }

    .td-card-content {
        padding:17px
    }

    .td-card h3 {
        font-size:25px
    }

}

@media(max-width:700px) {
    .td-hero {
        margin:0px auto 35px
    }

    .td-feature {
        grid-template-columns:1fr
    }

    .td-feature-visual {
        min-height:250px
    }

    .td-feature-visual img {
        max-height:300px
    }

    .td-feature-content {
        padding:27px
    }

    .td-grid {
        grid-template-columns:1fr
    }

    .td-card-link {
        grid-template-columns:135px minmax(0,1fr)
    }

    .td-guide {
        padding:28px 23px
    }

    .td-guide-grid {
        grid-template-columns:1fr;
        gap:20px
    }

    .td-guide-grid article+article {
        border-left:0;
        border-top:1px solid #34425c;
        padding:19px 0 0
    }

    .td-collection,.td-guide,.td-outro {
        margin-top:55px
    }

}

@media(max-width:390px) {
    .td-card-link {
        grid-template-columns:105px minmax(0,1fr)
    }

    .td-card-content {
        padding:13px
    }

    .td-card h3 {
        font-size:23px
    }

    .td-card-image {
        padding:8px
    }

    .td-hero-meta {
        gap:9px;
        padding:10px 12px;
        font-size:11px
    }

}

@media(prefers-reduced-motion:reduce) {
    .td-button,.td-card {
        transition:none
    }

    .td-button:hover,.td-card:hover {
        transform:none
    }

}