/* ==========================================================================
   TBW COMPONENT STYLES
   Layers on top of style.css (design tokens + base elements + utilities).
   All CSS custom properties are defined in style.css :root.
   ========================================================================== */

/* ==========================================================================
   HERO SECTIONS
   Used on front-page.php, archive templates, single templates, page-impact.php
   ========================================================================== */

.tbw-hero {
    position:            relative;
    min-height:          560px;
    display:             flex;
    align-items:         center;
    background-color:    var(--forest);   /* solid fallback when no image */
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* --forest overlay at 60% opacity over the hero image */
.tbw-hero__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(30, 59, 26, 0.62)  /* --green-dark at 62% */;
}

/* Content sits above the overlay */
.tbw-hero__content {
    position:   relative;
    z-index:    1;
    width:      100%;
    text-align: center;
    padding:    var(--space-xl) var(--space-sm);
    color:      #ffffff;
}

.tbw-hero__title {
    font-family:   var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:     var(--text-hero);
    font-weight:   700;
    color:         #ffffff;
    margin-bottom: var(--space-sm);
    line-height:   1.1;
}

.tbw-hero__subhead {
    font-size:     var(--text-lg);
    color:         #ffffff;
    max-width:     680px;
    margin:        0 auto var(--space-md);
    opacity:       0.92;
}

/* Meta line below title on single post heroes (cohort year, hometown, etc.) */
.tbw-hero__meta {
    font-size:   var(--text-sm);
    color:       rgba(255, 255, 255, 0.8);
    margin-top:  var(--space-xs);
    letter-spacing: 0.04em;
}

.tbw-hero__meta span + span::before {
    content: ' · ';
}

/* ==========================================================================
   CARD GRID
   ========================================================================== */

.tbw-card-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-md);
    margin-bottom:         var(--space-md);
}

@media (max-width: 900px) {
    .tbw-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tbw-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CARD
   ========================================================================== */

.tbw-card {
    background:    #ffffff;
    border-radius: 6px;
    overflow:      hidden;
    border:        1px solid var(--line);
    transition:    box-shadow 0.2s ease, border-left-color 0.2s ease;
    display:       flex;
    flex-direction: column;
}

.tbw-card:hover {
    box-shadow:  0 4px 20px rgba(0, 0, 0, 0.10);
    border-left: 3px solid var(--trail);
}

/* Image wrapper — fixed aspect ratio container */
.tbw-card__image-link {
    display: block;
}

.tbw-card__image {
    width:    100%;
    height:   220px;
    overflow: hidden;
    background-color: var(--sand);   /* placeholder colour while image loads */
}

/* The <img> generated by get_the_post_thumbnail() */
.tbw-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.3s ease;
}

.tbw-card:hover .tbw-card__img {
    transform: scale(1.03);
}

.tbw-card__body {
    padding: var(--space-sm);
    flex:    1;
    display: flex;
    flex-direction: column;
}

.tbw-card__title {
    font-family:   var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:     var(--text-lg);
    margin-bottom: var(--space-xs);
    line-height:   1.3;
}

.tbw-card__title a {
    color:           var(--ink);
    text-decoration: none;
}

.tbw-card__title a:hover {
    color: var(--trail);
}

.tbw-card__excerpt {
    font-size:   var(--text-sm);
    color:       #4A4A42;
    margin:      0;
    flex:        1;
    line-height: 1.55;
}

/* ==========================================================================
   SECTION FOOTER LINK  (e.g. "See All Expeditions →")
   ========================================================================== */

.tbw-section__footer {
    text-align:  center;
    margin-top:  var(--space-sm);
}

.tbw-section__footer a {
    font-weight:     600;
    color:           var(--trail);
    text-decoration: none;
    font-size:       var(--text-base);
}

.tbw-section__footer a:hover {
    text-decoration: underline;
}

/* Empty-state message when no CPT posts exist */
.tbw-empty-state {
    text-align:  center;
    padding:     var(--space-md) 0;
    color:       #4A4A42;
    font-size:   var(--text-base);
    font-style:  italic;
}

/* ==========================================================================
   MISSION BAR  (Section 2 on homepage)
   ========================================================================== */

.tbw-mission-bar {
    background: var(--sand);
    text-align: center;
    padding:    var(--space-lg) var(--space-sm);
}

.tbw-mission-bar__text {
    font-family: var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:   var(--text-xl);
    color:       var(--ink);
    max-width:   760px;
    margin:      0 auto;
    line-height: 1.4;
}

/* ==========================================================================
   IMPACT BAND  (counter section)
   ========================================================================== */

.tbw-impact-band {
    background: var(--forest);
    padding:    var(--space-lg) 0;
}

.tbw-impact-band .tbw-section__heading {
    color:         #ffffff;
    text-align:    center;
    margin-bottom: var(--space-md);
}

.tbw-counter-grid {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             var(--space-md) var(--space-lg);
}

.tbw-counter {
    text-align: center;
    min-width:  140px;
}

.tbw-counter__number {
    display:     block;
    font-family: var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:   var(--text-3xl);
    font-weight: 700;
    color:       var(--sunrise);
    line-height: 1;
}

.tbw-counter__label {
    display:        block;
    font-size:      var(--text-sm);
    color:          var(--sand);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top:     var(--space-xs);
}

/* ==========================================================================
   FOOTER CTA BAND  (Section 6 on homepage)
   ========================================================================== */

.tbw-footer-cta {
    background: var(--forest);
    text-align: center;
    padding:    var(--space-lg) var(--space-sm);
}

.tbw-footer-cta__heading {
    font-family:   var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:     var(--text-2xl);
    color:         #ffffff;
    margin-bottom: var(--space-md);
}

.tbw-footer-cta__actions {
    display:         flex;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             var(--space-sm);
}

/* ==========================================================================
   FILTER TABS  (archive-rider.php, archive-tour.php)
   ========================================================================== */

.tbw-filter-tabs {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.5rem;
    margin-bottom: var(--space-md);
}

.tbw-filter-tabs__tab {
    display:         inline-block;
    padding:         0.4rem 1rem;
    border-radius:   999px;    /* pill */
    font-size:       var(--text-sm);
    font-weight:     600;
    text-decoration: none;
    background:      var(--sand);
    color:           var(--ink);
    border:          1px solid var(--line);
    transition:      background 0.15s ease, color 0.15s ease;
}

.tbw-filter-tabs__tab:hover {
    background: var(--forest);
    color:      #ffffff;
    border-color: var(--forest);
}

.tbw-filter-tabs__tab--active {
    background:   var(--forest);
    color:        #ffffff;
    border-color: var(--forest);
}

/* ==========================================================================
   ARCHIVE HERO  (smaller than full-bleed hero, used on CPT archives)
   ========================================================================== */

.tbw-archive-hero {
    background: var(--sky);
    padding:    var(--space-lg) 0;
    border-bottom: 3px solid var(--forest);
}

.tbw-archive-hero__title {
    font-family: var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:   var(--text-2xl);
    color:       var(--forest);
    margin-bottom: var(--space-xs);
}

.tbw-archive-hero__description {
    font-size:  var(--text-base);
    color:      #4A4A42;
    max-width:  640px;
    margin:     0;
}

/* ==========================================================================
   SINGLE POST LAYOUT  (two-column: content + sidebar)
   ========================================================================== */

.tbw-single-layout {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   var(--space-lg);
    align-items:           start;
}

@media (max-width: 900px) {
    .tbw-single-layout {
        grid-template-columns: 1fr;
    }
}

/* Post meta block on single-tour.php */
.tbw-post-meta {
    display:          flex;
    flex-wrap:        wrap;
    gap:              var(--space-sm) var(--space-md);
    background:       var(--sand);
    padding:          var(--space-sm) var(--space-md);
    border-radius:    4px;
    margin-bottom:    var(--space-md);
}

.tbw-post-meta__item {
    display:        flex;
    flex-direction: column;
    min-width:      120px;
}

.tbw-post-meta__label {
    font-size:      var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          #4A4A42;
    font-weight:    600;
}

.tbw-post-meta__value {
    font-size:   var(--text-base);
    color:       var(--ink);
    font-weight: 600;
    margin-top:  2px;
}

/* Related posts sidebar */
.tbw-related {
    background:    var(--sand);
    border-radius: 6px;
    padding:       var(--space-sm);
}

.tbw-related__heading {
    font-family:   var(--font-display);
    font-variation-settings: var(--display-vf);
    font-size:     var(--text-lg);
    color:         var(--forest);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--trail);
}

.tbw-related__list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.tbw-related__item {
    padding:     var(--space-xs) 0;
    border-bottom: 1px solid var(--line);
}

.tbw-related__item:last-child {
    border-bottom: none;
}

.tbw-related__item a {
    font-weight:     600;
    font-size:       var(--text-sm);
    color:           var(--ink);
    text-decoration: none;
}

.tbw-related__item a:hover {
    color: var(--trail);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.tbw-pagination {
    text-align:  center;
    margin-top:  var(--space-md);
    padding-top: var(--space-sm);
    border-top:  1px solid var(--line);
}

.tbw-pagination .page-numbers {
    display:         inline-block;
    padding:         0.4rem 0.75rem;
    margin:          0 0.2rem;
    border-radius:   4px;
    font-size:       var(--text-sm);
    text-decoration: none;
    color:           var(--river);
    border:          1px solid var(--line);
    transition:      background 0.15s ease;
}

.tbw-pagination .page-numbers.current,
.tbw-pagination .page-numbers:hover {
    background: var(--forest);
    color:      #ffffff;
    border-color: var(--forest);
}