/* Hide default theme headers and featured images on Single Success Stories */
.single-success_story .wp-post-image,
.single-success_story .entry-header,
.single-success_story .page-header,
.single-success_story .post-thumbnail {
    display: none !important;
}

/* ==========================================
   1. SHORTCODE ARCHIVE: Teaser Grid
   ========================================== */
/* Prevent theme pseudo-elements from stealing CSS grid slots */
.success-stories-archive-grid::before,
.success-stories-archive-grid::after {
    display: none !important;
    content: none !important;
}

.success-stories-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.story-teaser-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.story-teaser-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.teaser-img-link img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.teaser-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.teaser-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    line-height: 1.3;
    text-transform: uppercase;
}

.teaser-title a {
    text-decoration: none;
    color: #333;
}

.read-story-btn {
    display: inline-block;
    margin-top: auto;
    font-weight: bold;
    text-decoration: none;
    color: #0073aa; 
}

/* ==========================================
   2. SINGLE PAGE: Full Layouts
   ========================================== */
   .story-page-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}
.single-success-story-wrapper {
    margin: 2rem 0;
}

.web-story-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; 
}

/* Base Image Block Styling for Web Layouts */
.story-img {
    width: 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    display: block;
}

/* Aspect ratios matching PDF proportions natively on the web */
.story-img-wide { aspect-ratio: 8.5 / 3.25; }
.story-img-boxy { aspect-ratio: 3.4 / 2.25; }

.story-quote {
    margin: 0;
    padding: 1rem;
    background: #f9f9f9;
    border-left: 4px solid #333;
    font-style: italic;
    color: #222;
    font-weight: bold;
}

.story-content p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

/* Clean up WordPress auto-injected phantom tags inside the grid */
.web-story-card > p:empty,
.web-story-card > br {
    display: none !important;
}

/* Desktop Grid Layouts - Strictly Pinned */
@media (min-width: 768px) {
    
    .web-story-card {
        display: grid;
        gap: 1.5rem 5%;
        align-items: start;
    }

    /* TEMPLATE 1 */
    .template_1 { grid-template-columns: 55% 40%; }
    .template_1 .story-img-1   { grid-column: 1 / -1; grid-row: 1; }
    .template_1 .story-content { grid-column: 1;      grid-row: 2 / span 2; }
    .template_1 .story-img-2   { grid-column: 2;      grid-row: 2; }
    .template_1 .story-quote   { grid-column: 2;      grid-row: 3; }

    /* TEMPLATE 2 */
    .template_2 { grid-template-columns: 30% 65%; }
    .template_2 .story-img-1   { grid-column: 1; grid-row: 1; }
    .template_2 .story-img-2   { grid-column: 1; grid-row: 2; }
    .template_2 .story-quote   { grid-column: 1; grid-row: 3; }
    .template_2 .story-content { grid-column: 2; grid-row: 1 / span 3; }

    /* TEMPLATE 3 */
    .template_3 { grid-template-columns: 55% 40%; }
    .template_3 .story-content { grid-column: 1; grid-row: 1 / span 3; }
    .template_3 .story-img-1   { grid-column: 2; grid-row: 1; }
    .template_3 .story-quote   { grid-column: 2; grid-row: 2; }
    .template_3 .story-img-2   { grid-column: 2; grid-row: 3; }
}