/* 
 ---------------------------------
 |   LAST UPDATED: 2026-04-13    |
 ---------------------------------
 */

/* VIEWPORT HEADNOTE: Standard boundaries 1024, 768–1023, ≤767. min-width 1439px and 1920px are desktop tiers, not standard boundaries. max-width 479px is not tied to our device viewport sizes; used for small-mobile refinement only. */

/* ========================================================================
   VIEWPORT-AGNOSTIC (base styles)
   ======================================================================== */
.slider {
    overflow: hidden;
}

.slider-inner {
    display: flex;
    overflow-x: scroll;
    cursor: grab;
    cursor: -webkit-grab;
    scrollbar-width: none;
}

.slider-inner .card:last-child {
    border-right: none;
  }

.slider-inner::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.active-grab, .active-grab a{
    cursor: grabbing;
    cursor: -webkit-grabbing;
}


.card {
    padding: calc(3.75vw * var(--scale)) calc(2.5vw * var(--scale));
    width: calc(38vw * var(--scale));
    border-right: 1px solid var(--text-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-start;
}

.card a {
    color: var(--text-color);
}

.card .category-link,
.latest-post .category-link {
    font-family: var(--cm);
    background-color: var(--port);
    color: var(--background-color) !important;
    border: 1px solid var(--port);
    padding: 0.25rem 0.25rem;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.2s ease;
    text-transform: uppercase;
    text-decoration: none;
    font-optical-sizing: auto;
    font-size: calc(14px * var(--scale));
    margin-bottom: calc(1.6vw * var(--scale));
}

.category-link:hover {
    text-decoration: underline !important;
    text-decoration-style: wavy !important;
    text-decoration-color: var(--cannon-pink) !important;
}clean

.card-title-link {
    margin-top: calc(0.8vw * var(--scale));
    margin-bottom: calc(1.5vw * var(--scale));
    text-decoration: none;
}

.card-title-link:hover {
    text-decoration: underline var(--cannon-pink);
    text-decoration-thickness: 3px;
}

.card-image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    height: calc(35vw * var(--scale));
    border: 0px solid var(--text-color);
    overflow: hidden;
    width: 100%;
}

/* Post/slider cards (`card.hbs`): figure first — drop auto-push; author-grid cards keep margin-top:auto above. */
#latest-stories-grid .card > .card-image-link,
#tag-stories-grid .card > .card-image-link,
.slider-inner .card > .card-image-link {
    margin-top: 0;
    margin-bottom: calc(0.8vw * var(--scale));
}

#latest-stories-grid .card > .card-title-link,
#tag-stories-grid .card > .card-title-link,
.slider-inner .card > .card-title-link {
    margin-top: 0;
}

.card-subtitle {
    margin: 0 0 calc(1vw * var(--scale));
    font-family: var(--ed) !important;
    font-style: italic;
    font-size: calc(var(--fontSizeH5) * var(--scale));
    line-height: 1.15;
    color: var(--text-color);
}

.grid .card .takeaway-card.card-grid-takeaway,
.slider-inner .card .takeaway-card.card-grid-takeaway {
    background-color: var(--background-color);
}

.card-text-with-button,
.card-excerpt-with-arrow {
    margin-top: calc(1.9vw * var(--scale));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: calc(1.5vw * var(--scale));
    width: 100%;
}

.card-excerpt-with-arrow .takeaway-card {
    flex: 1;
    min-width: 0;
}

.card-excerpt-with-arrow .arrow-character-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 5vw, 60px);
    height: clamp(44px, 5vw, 60px);
    border-radius: 999px;
    background: var(--revolver);
    border: none;
    text-decoration: none;
    transition: transform var(--ease-transition), background-color var(--ease-transition), box-shadow var(--ease-transition);
}

.card-excerpt-with-arrow .arrow-character-link .arrow-character {
    font-family: var(--edb);
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 40px);
    color: #ffffff;
    line-height: 1;
}

.card-excerpt-with-arrow .arrow-character-link:hover,
.card-excerpt-with-arrow .arrow-character-link:focus-visible {
    transform: translateX(calc(8px * var(--scale)));
    background: var(--port);
    box-shadow: 0 0 0 calc(2px * var(--scale)) var(--swiss-coffee);
}

.card-excerpt-with-arrow .arrow-character-link:hover .arrow-character,
.card-excerpt-with-arrow .arrow-character-link:focus-visible .arrow-character {
    color: var(--background-color);
}

.card-excerpt-with-arrow .arrow-character-link:active {
    transform: translateX(calc(5px * var(--scale)));
}

.card-image-link:hover figure,
.card-image-link:hover .placeholder-svg {
    scale: 1.05;
}

.no-right-border {
    border-right: none;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: var(--background-color);
}

/* Homepage latest-stories grid is explicitly 1-col until desktop. */
#latest-stories-grid,
main .latest-stories #latest-stories-grid {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Safety lock for exact rendered homepage structure:
 * keep latest-stories as a single column below desktop.
 */
body .site-main main .latest-stories > #latest-stories-grid.grid.pagination-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.grid .card {
    width: 100%;
    border-bottom: 1px solid var(--text-color);
}

.grid .card:nth-child(3n) {
    border-right: none;
}

.grid .card-image-link {
    height: calc(35vw * var(--scale) * 0.85);
}





/* ========================================================================
   1. DESKTOP (1024px+)
   ======================================================================== */
@media (min-width: 1024px) {
    #latest-stories-grid,
    main .latest-stories #latest-stories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .site-main main .latest-stories > #latest-stories-grid.grid.pagination-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Override generic 3n border logic for the 2-column homepage grid. */
    #latest-stories-grid .card:nth-child(3n),
    main .latest-stories #latest-stories-grid .card:nth-child(3n) {
        border-right: 1px solid var(--text-color);
    }

    #latest-stories-grid .card:nth-child(2n),
    main .latest-stories #latest-stories-grid .card:nth-child(2n) {
        border-right: none;
    }
}





.tag-card {
    display: flex;
    flex-direction: column;
    width: calc(17.5vw * var(--scale));
    min-width: calc(17.5vw * var(--scale));
    padding-right: calc(2.5vw * var(--scale));
    margin-bottom: calc(4vw * var(--scale));
}

.tag-card img, .tag-card figure {
    width: 105%;
    height: 105%;
}

.tag-card .card-image-link {
    height: calc(15vw * var(--scale));
    margin-top: 0;
    overflow: hidden;
}

.slider-inner .tag-card:first-child {
    margin-left: calc(2.5vw * var(--scale));
}

.tag-heading-link {
    margin-top: calc(1.2vw * var(--scale));
    color: var(--text-color);
    text-decoration: none;
}

.tag-heading-link:hover {
    text-decoration: underline;
}

.tags-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding-left: calc(2.5vw * var(--scale));
    padding-right: calc(2.5vw * var(--scale));
    gap: calc(2.5vw * var(--scale));
    padding-bottom: calc(4.5vw * var(--scale));
}

.tags-grid .tag-card {
    padding-right: 0;
    width: 100%;
    min-width: unset;
    margin-bottom: 0 !important;
}

.tags-grid .card-image-link {
    width: 100%;
    padding-top: 100%;
    position: relative;
}

.tags-grid .card-image-link figure,  .tags-grid .card-image-link .placeholder {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: unset;
    width: unset;
}

.post-number {
    opacity: 0.8;
    margin-top: 0.3vw;
}

.card-link-category-link {
    display: flex;
    align-items: center;
}

.restricted-access-icon {
    margin-top: 2px;
    width: 15px;
    margin-left: calc(0.6vw * var(--scale));
}





/* ========================================================================
   1. DESKTOP (1024px+; 1439px tier)
   ======================================================================== */
@media (min-width: 1439px) {

    .restricted-access-icon {
        width: calc(1vw * var(--scale));
        margin-left: calc(0.6vw * var(--scale));
    }
}





/* ========================================================================
   2a. TABLET + MOBILE (≤1023px)
   ======================================================================== */
@media (max-width: 1023px) {
    body .site-main main .latest-stories > #latest-stories-grid.grid.pagination-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .site-main main .latest-stories > #latest-stories-grid.grid.pagination-grid .card {
        border-right: none !important;
    }
}





/* ========================================================================
   2c. MOBILE (≤767px)
   ======================================================================== */
@media (max-width: 767px) {

    .card {
        padding: 56px 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .card-title-link {
        margin-top: 12px;
        margin-bottom: 18px;
    }

    .card-image-link {
        height: 70vw;
    }
    
    .card-text-with-button,
    .card-excerpt-with-arrow {
        margin-top: 24px;
        column-gap: 18px;
    }

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

    /* Homepage Latest Stunts: force 1 column on tablet + mobile (≤767px). */
    #latest-stories-grid,
    main .latest-stories #latest-stories-grid,
    body .site-main main .latest-stories > #latest-stories-grid.grid.pagination-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #latest-stories-grid .card,
    main .latest-stories #latest-stories-grid .card {
        border-right: none !important;
    }

    .grid .card:nth-child(2n) {
        border-right: none !important;
    }

    .grid .card:nth-child(3n) {
        border-right: none !important;
    }

    .grid .card-image-link {
        height: 50vw;
    }

    .tag-card {
        width: calc(30px + 25vw);
        min-width: calc(30px + 25vw);
        padding-right: 30px;
        margin-bottom: 45px;
    }
    
    .tag-card .card-image-link {
        height: 25vw;
    }
    
    .slider-inner .tag-card:first-child {
        margin-left: 30px;
    }
    
    .tag-heading-link {
        margin-top: 16px;
    }
  
    .tags-grid {
        grid-template-columns: 1fr 1fr 1fr;
        padding-left: 30px;
        padding-right: 30px;
        gap: 30px;
        padding-bottom: 45px;
    }

    .post-number {
        margin-top: 3px;
    }

    .restricted-access-icon {
        width: 14px;
        margin-left: 8px;
    }
}

/* ========================================================================
   2c. MOBILE (≤479px)
   ======================================================================== */
@media (max-width: 479px) {
    .card {
        padding: 42px 18px;
        width: 100%;
        box-sizing: border-box;
    }

    .card-title-link {
        margin-top: 8px;
        margin-bottom: 16px;
    }

    .card-image-link {
        height: 75vw;
    }
    
    .card-text-with-button,
    .card-excerpt-with-arrow {
        margin-top: 22px;
        column-gap: 14px;
    }



    .grid .card:nth-child(2n), .grid .card:nth-child(3n) {
        border-right: none !important;
    }

    .grid .card {
        border-right: none !important;
    }

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

    #latest-stories-grid,
    main .latest-stories #latest-stories-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #latest-stories-grid .card,
    main .latest-stories #latest-stories-grid .card {
        border-right: none !important;
    }

    .grid .card-image-link {
        height: 90vw;
    }

    .tag-card {
        width: calc(18px + 39vw);
        min-width: calc(18px + 39vw);
        padding-right: 18px;
    }
    
    .tag-card .card-image-link {
        height: 39vw;
    }
    
    .slider-inner .tag-card:first-child {
        margin-left: 18px;
    }
    
    .tag-heading-link {
        margin-top: 13px;
    }

    .tags-grid {
        grid-template-columns: 1fr 1fr;
        padding-left: 18px;
        padding-right: 18px;
        gap: 18px;
    }

    .post-number {
        margin-top: 2px;
    }

    .restricted-access-icon {
        width: 12px;
        margin-left: 6px;
    }
}