<div class="confession-corner-grid">
    <style>
        /* General Body & Typography */
        body {
            font-family: 'Helvetica', 'Arial', sans-serif;
            color: #1C1E21;
            line-height: 1.38;
            background-color: #F0F2F5;
        }

        /* --- Submission Form Styles --- */
        .confession-corner-form-wrap {
            max-width: 600px;
            margin: 20px auto;
            padding: 16px;
            background: #FFFFFF;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .confession-corner-form-wrap h2 {
            text-align: left;
            color: #1C1E21;
            margin: 0 0 16px;
            font-size: 20px;
            font-weight: 600;
        }
        .confession-corner-form-wrap .form-group {
            margin-bottom: 16px;
        }
        .confession-corner-form-wrap label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #1C1E21;
            font-size: 14px;
        }
        .confession-corner-form-wrap input[type="text"],
        .confession-corner-form-wrap input[type="number"],
        .confession-corner-form-wrap textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #DADDE1;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 14px;
            color: #1C1E21;
            background-color: #FFFFFF;
            transition: border-color 0.2s ease;
        }
        .confession-corner-form-wrap input[type="text"]:focus,
        .confession-corner-form-wrap input[type="number"]:focus,
        .confession-corner-form-wrap textarea:focus {
            outline: none;
            border-color: #1B74E4;
            box-shadow: 0 0 0 2px rgba(27, 116, 228, 0.2);
        }
        .confession-corner-form-wrap textarea {
            resize: vertical;
            min-height: 100px;
        }
        .confession-corner-form-wrap input[type="file"] {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            color: #606770;
        }
        .confession-corner-form-wrap small {
            color: #606770;
            font-size: 12px;
            margin-top: 4px;
            display: block;
        }
        .confession-corner-form-wrap .required {
            color: #E41E26;
            margin-left: 4px;
        }
        .confession-corner-form-wrap .privacy-policy {
            display: flex;
            align-items: flex-start;
            font-size: 13px;
            margin-top: 12px;
        }
        .confession-corner-form-wrap .privacy-policy input[type="checkbox"] {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .confession-corner-form-wrap .privacy-policy label {
            display: inline;
            margin-bottom: 0;
            font-weight: 400;
            color: #606770;
            line-height: 1.38;
        }
        .confession-corner-form-wrap .privacy-policy a {
            color: #1B74E4;
            text-decoration: none;
            font-weight: 600;
        }
        .confession-corner-form-wrap .privacy-policy a:hover {
            text-decoration: underline;
        }
        .confession-corner-form-wrap button {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #1B74E4;
            color: #FFFFFF;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease;
            margin-top: 16px;
        }
        .confession-corner-form-wrap button:hover {
            background-color: #166FE5;
        }
        .confession-corner-form-wrap button:disabled {
            background-color: #E4E6EB;
            color: #BCC0C4;
            cursor: not-allowed;
        }
        .confession-form-messages {
            margin-top: 16px;
            padding: 12px;
            border-radius: 6px;
            font-size: 13px;
            text-align: center;
            line-height: 1.38;
            display: none;
        }
        .confession-form-messages.success {
            background-color: #E7F3EC;
            color: #13753F;
            border: 1px solid #B3D6C1;
        }
        .confession-form-messages.error {
            background-color: #F9E6E7;
            color: #A3121A;
            border: 1px solid #F5C6CB;
        }

        /* --- Story Grid Styles (Facebook Post Replica, 3x3 Grid) --- */
        .confession-corner-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Strict 3-column grid */
            gap: 16px; /* Consistent spacing */
            padding: 16px;
            max-width: 960px; /* Optimized for 3 columns */
            margin: 20px auto;
            box-sizing: border-box;
        }
        .confession-grid-tile {
            background: #FFFFFF;
            border: 1px solid #DADDE1;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            text-decoration: none;
            color: #1C1E21;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            min-height: 240px; /* Consistent tile height */
            display: flex;
            flex-direction: column;
        }
        .confession-grid-tile:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        .confession-grid-tile .tile-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: #F5F6F8; /* Subtle header background */
        }
        .confession-grid-tile .tile-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            background-size: cover;
            background-position: center;
            background-color: #E4E6EB; /* Fallback for missing images */
        }
        .confession-grid-tile .tile-meta {
            flex-grow: 1;
        }
        .confession-grid-tile .tile-username {
            font-weight: 600;
            font-size: 14px;
            color: #1B74E4;
            margin-bottom: 2px;
            display: block;
        }
        .confession-grid-tile .tile-submeta {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .confession-grid-tile .tile-location,
        .confession-grid-tile .tile-date {
            font-size: 12px;
            color: #606770;
            line-height: 1.38;
        }
        .confession-grid-tile .tile-image {
            width: 100%;
            max-height: 200px;
            object-fit: cover;
            display: block;
            background-color: #F0F2F5; /* Fallback for images */
        }
        .confession-grid-tile .tile-content {
            padding: 12px 16px;
            flex-grow: 1;
        }
        .confession-grid-tile .tile-content h3 {
            font-size: 16px;
            font-weight: 600;
            color: #1C1E21;
            margin: 0 0 8px;
        }
        .confession-grid-tile .tile-content p {
            font-size: 14px;
            color: #1C1E21;
            line-height: 1.38;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* Limit to 3 lines */
            -webkit-box-orient: vertical;
        }
        .confession-grid-tile .tile-footer {
            padding: 8px 16px;
            border-top: 1px solid #DADDE1;
            font-size: 13px;
            color: #606770;
            display: flex;
            justify-content: space-between;
            background: #F5F6F8;
        }
        .confession-grid-tile .tile-action {
            color: #1B74E4;
            font-weight: 600;
            text-decoration: none;
        }
        .confession-grid-tile .tile-action:hover {
            text-decoration: underline;
        }

        /* Empty State */
        .confession-corner-empty-state {
            max-width: 600px;
            margin: 20px auto;
            padding: 16px;
            background: #FFFFFF;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .confession-corner-empty-state p {
            font-size: 14px;
            color: #606770;
            margin: 0;
        }
        .confession-corner-empty-state .button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #1B74E4;
            color: #FFFFFF;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            margin-top: 12px;
            transition: background-color 0.2s ease;
        }
        .confession-corner-empty-state .button:hover {
            background-color: #166FE5;
        }

        /* --- Single Story Page Styles --- */
        .confession-corner-single-story {
            max-width: 600px;
            margin: 20px auto;
            padding: 16px;
            background: #FFFFFF;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-family: 'Helvetica', 'Arial', sans-serif;
            line-height: 1.38;
            color: #1C1E21;
        }
        .confession-corner-single-story h1 {
            font-size: 20px;
            font-weight: 600;
            color: #1C1E21;
            margin: 8px 0;
        }
        .confession-corner-single-story .story-meta {
            font-size: 13px;
            color: #606770;
            margin-bottom: 16px;
            border-bottom: 1px solid #DADDE1;
            padding-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .confession-corner-single-story .story-image {
            margin: 16px 0;
        }
        .confession-corner-single-story .story-image img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .confession-corner-single-story .story-content {
            font-size: 14px;
            line-height: 1.38;
            margin-bottom: 16px;
            white-space: pre-wrap;
        }
        .confession-corner-single-story .story-content p {
            margin-bottom: 1em;
        }
        .confession-corner-single-story .back-to-stories {
            display: inline-block;
            padding: 8px 16px;
            background-color: #F0F2F5;
            color: #606770;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 13px;
            transition: background-color 0.2s ease;
        }
        .confession-corner-single-story .back-to-stories:hover {
            background-color: #E4E6EB;
            color: #1C1E21;
        }

        /* --- Responsive Adjustments --- */
        @media (max-width: 960px) {
            .confession-corner-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
            }
            .confession-corner-form-wrap,
            .confession-corner-single-story {
                padding: 0 8px;
                margin: 16px 8px;
            }
            .confession-grid-tile .tile-content h3 {
                font-size: 15px;
            }
            .confession-corner-single-story h1 {
                font-size: 18px;
            }
        }
        @media (max-width: 600px) {
            .confession-corner-grid {
                grid-template-columns: 1fr; /* 1 column for small screens */
            }
            .confession-corner-form-wrap,
            .confession-corner-single-story {
                padding: 0 6px;
                margin: 12px 6px;
            }
            .confession-grid-tile .tile-content h3 {
                font-size: 14px;
            }
            .confession-corner-single-story h1 {
                font-size: 16px;
            }
        }

        /* --- Dark Mode Support --- */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #18191A;
                color: #E4E6EB;
            }
            .confession-corner-form-wrap,
            .confession-grid-tile,
            .confession-corner-single-story,
            .confession-corner-empty-state {
                background-color: #242526;
                border-color: #3A3B3C;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
            .confession-corner-form-wrap h2,
            .confession-grid-tile .tile-content h3,
            .confession-corner-single-story h1 {
                color: #E4E6EB;
            }
            .confession-corner-form-wrap label,
            .confession-grid-tile .tile-content p,
            .confession-corner-single-story .story-content {
                color: #B0B3B8;
            }
            .confession-corner-form-wrap input[type="text"],
            .confession-corner-form-wrap input[type="number"],
            .confession-corner-form-wrap textarea {
                background-color: #3A3B3C;
                border-color: #4A4B4C;
                color: #E4E6EB;
            }
            .confession-corner-form-wrap input[type="text"]:focus,
            .confession-corner-form-wrap input[type="number"]:focus,
            .confession-corner-form-wrap textarea:focus {
                border-color: #3578E5;
                box-shadow: 0 0 0 2px rgba(53, 120, 229, 0.3);
            }
            .confession-corner-form-wrap small,
            .confession-grid-tile .tile-username,
            .confession-grid-tile .tile-location,
            .confession-grid-tile .tile-date,
            .confession-corner-single-story .story-meta {
                color: #B0B3B8;
            }
            .confession-grid-tile .tile-username:hover {
                color: #3578E5;
            }
            .confession-form-messages.success {
                background-color: #2A4B2A;
                color: #A8DAD6;
                border-color: #3A6A3B;
            }
            .confession-form-messages.error {
                background-color: #5C2A2A;
                color: #F7BABA;
                border-color: #7D2A2A;
            }
            .confession-grid-tile .tile-image,
            .confession-grid-tile .tile-header,
            .confession-grid-tile .tile-footer {
                background-color: #2D2E2F;
                border-color: #3A3B3C;
            }
            .confession-corner-single-story .back-to-stories {
                background-color: #3A3B3C;
                color: #B0B3B8;
            }
            .confession-corner-single-story .back-to-stories:hover {
                background-color: #4A4B4C;
                color: #E4E6EB;
            }
            .confession-corner-empty-state .button {
                background-color: #3578E5;
            }
            .confession-corner-empty-state .button:hover {
                background-color: #2A65C9;
            }
        }
    </style>

    <?php foreach ( $stories as $story ) :
        $story_preview = wp_trim_words( $story['story'], 20, '...' );
        $story_link    = esc_url( home_url( '/confession/' . $story['id'] . '/' ) );
        $avatar_url    = !empty( $story['image_url'] ) ? esc_url( $story['image_url'] ) : 'https://via.placeholder.com/40';
    ?>
        <a href="<?php echo $story_link; ?>" class="confession-grid-tile">
            <div class="tile-header">
                <div class="tile-avatar" style="background-image: url('<?php echo $avatar_url; ?>');"></div>
                <div class="tile-meta">
                    <span class="tile-username"><?php echo esc_html( $story['name'] ); ?></span>
                    <div class="tile-submeta">
                        <span class="tile-location">from <?php echo esc_html( $story['location'] ); ?></span>
                        <span class="tile-date"><?php echo human_time_diff( strtotime( $story['submission_date'] ), current_time( 'timestamp' ) ) . ' ago'; ?></span>
                    </div>
                </div>
            </div>
            <?php if ( ! empty( $story['image_url'] ) ) : ?>
                <img src="<?php echo esc_url( $story['image_url'] ); ?>" class="tile-image" alt="Story image">
            <?php endif; ?>
            <div class="tile-content">
                <h3><?php echo esc_html( $story['story_title'] ); ?></h3>
                <p><?php echo esc_html( $story_preview ); ?></p>
            </div>
            <div class="tile-footer">
                <span class="tile-action">Read More</span>
            </div>
        </a>
    <?php endforeach; ?>
</div>