/**
 * AppToday AutoPost Frontend Styles
 * Version: 1.2.5
 * 
 * All styling for app feed displays
 * Uses classes to avoid inline style corruption
 */

/* ===========================
   Base Feed Container
   =========================== */
.apptoday-autopost-apps {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

/* ===========================
   Layout 1: Grid (Images Only)
   =========================== */
.apptoday-feed-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.apptoday-feed-grid.gap-small {
    gap: 8px;
}

.apptoday-feed-grid.gap-medium {
    gap: 10px;
}

.apptoday-feed-grid.gap-large {
    gap: 15px;
}

.apptoday-feed-grid .app-icon-link {
    display: block;
    text-decoration: none;
}

.apptoday-feed-grid .app-icon-link.size-small {
    width: 60px;
    height: 60px;
}

.apptoday-feed-grid .app-icon-link.size-medium {
    width: 100px;
    height: 100px;
}

.apptoday-feed-grid .app-icon-link.size-large {
    width: 120px;
    height: 120px;
}

.apptoday-feed-grid .app-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===========================
   Layout 2: Images + Text
   =========================== */
.apptoday-feed-list {
    display: flex;
    flex-direction: column;
}

.apptoday-feed-list .app-row {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.apptoday-feed-list .app-index {
    min-width: 2.5em;
    text-align: right;
    font-weight: 400;
    color: #999;
    font-size: 16px;
    padding-right: 12px;
}

.apptoday-feed-list .app-icon-link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    margin-right: 15px;
}

.apptoday-feed-list .app-icon-link.size-small {
    width: 60px;
    height: 60px;
}

.apptoday-feed-list .app-icon-link.size-medium {
    width: 100px;
    height: 100px;
}

.apptoday-feed-list .app-icon-link.size-large {
    width: 120px;
    height: 120px;
}

.apptoday-feed-list .app-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.apptoday-feed-list .app-info {
    flex-grow: 1;
    min-width: 0;
}

.apptoday-feed-list .app-name {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 3px;
}

.apptoday-feed-list .app-name a {
    color: #0066cc;
    text-decoration: none;
}

.apptoday-feed-list .app-publisher {
    font-size: 15px;
    color: #666;
    margin-bottom: 2px;
}

.apptoday-feed-list .app-genre {
    font-size: 13px;
    color: #999;
}

/* ===========================
   Layout 3: Text Only
   =========================== */
.apptoday-feed-text {
    display: flex;
    flex-direction: column;
}

.apptoday-feed-text .app-row {
    padding: 15px 8px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.apptoday-feed-text .app-header {
    font-size: 18px;
    margin-bottom: 5px;
}

.apptoday-feed-text .app-index {
    display: inline-block;
    min-width: 2em;
    text-align: right;
    font-weight: 700;
    color: #999;
    margin-right: 0.5em;
}

.apptoday-feed-text .app-name a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.apptoday-feed-text .app-publisher {
    font-size: 15px;
    color: #666;
}

.apptoday-feed-text .app-publisher.with-indent {
    margin-left: 2.5em;
}

.apptoday-feed-text .app-genre {
    font-size: 13px;
    color: #999;
}

.apptoday-feed-text .app-genre.with-indent {
    margin-left: 2.5em;
}

/* ===========================
   Icon Shapes
   =========================== */
.app-icon.shape-square {
    border-radius: 0;
}

.app-icon.shape-squircle {
    border-radius: 22.5%;
    overflow: hidden;
}

/* ===========================
   Icon Shadow
   =========================== */
.app-icon.with-shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===========================
   Alternating Row Colors
   =========================== */
.apptoday-feed-list .app-row.row-odd {
    background-color: #ffffff;
}

.apptoday-feed-list .app-row.row-even {
    background-color: #f9f9f9;
}

.apptoday-feed-text .app-row.row-odd {
    background-color: #ffffff;
}

.apptoday-feed-text .app-row.row-even {
    background-color: #f9f9f9;
}

/* ===========================
   Hover Effects
   =========================== */
.apptoday-autopost-apps[data-hover="true"] .app-row:hover {
    background-color: #fffbcc !important;
}

/* ===========================
   Squircle Clip Path Support
   =========================== */
.apptoday-squircle {
    border-radius: 20%;
}

@supports (clip-path: path("")) {
    .apptoday-squircle {
        clip-path: path("M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z");
    }
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 768px) {
    .apptoday-feed-grid .app-icon-link.size-large {
        width: 80px;
        height: 80px;
    }
    
    .apptoday-feed-list .app-icon-link.size-large {
        width: 80px;
        height: 80px;
    }
    
    .apptoday-feed-list .app-name {
        font-size: 16px;
    }
    
    .apptoday-feed-list .app-publisher {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .apptoday-feed-grid .app-icon-link.size-medium {
        width: 80px;
        height: 80px;
    }
    
    .apptoday-feed-list .app-icon-link.size-medium {
        width: 80px;
        height: 80px;
    }
}