/* Tiles WebPart styles - theming, hover animations, layout.
 * Consumes CSS variables set by WP_Tiles.js on .wp_tiles_container:
 *   --tile-radius, --tile-shadow, --tile-border-color, --tile-text-color,
 *   --tile-title-color, --tile-title-size, --tile-font-family
 * Hover effect classes (on container or tile): wp_tiles_hover_<effect>,
 *   wp_tile_hover_<effect>: zoom | lift | glow | scale
 */

.wp_tiles_container { font-family: var(--tile-font-family, inherit); }
.wp_tiles_header { padding: 8px 4px; margin-bottom: 6px; font-weight: 600; }

.wp_tiles_grid { padding: 2px; }

/* Base tile */
.wp_tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    min-height: 60px;
    color: var(--tile-text-color, inherit);
    border-radius: var(--tile-radius, 0px);
    box-shadow: var(--tile-shadow, none);
    border: 1px solid var(--tile-border-color, transparent);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    cursor: default;
}
.wp_tile.wp_tile_has_link { cursor: pointer; }

.wp_tile_content { width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; box-sizing: border-box; }
.wp_tile_title { font-weight: 600; font-size: var(--tile-title-size, 15px); color: var(--tile-title-color, inherit); line-height: 1.25; }
.wp_tile_description { font-size: 12px; opacity: 0.92; }
.wp_tile_text_content { font-size: 13px; line-height: 1.4; }
.wp_tile_icon_wrapper i { display: inline-block; }

/* Image overlay for image tiles */
.wp_tile_overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); pointer-events: none; }

/* Edit button (draft mode) */
.wp_tile_editBtn { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,0.85); border: 1px solid #ccc; border-radius: 4px; padding: 2px 6px; cursor: pointer; z-index: 5; }
.wp_tiles_add_btn { margin-top: 8px; padding: 6px 14px; background: #f0f4f9; border: 1px dashed #a0aab4; border-radius: 4px; cursor: pointer; color: #0078d4; align-self: flex-start; }

/* ── Hover effects ── */
.wp_tiles_hover_zoom .wp_tile:hover, .wp_tile_hover_zoom:hover { transform: scale(1.04); z-index: 2; }
.wp_tiles_hover_lift .wp_tile:hover, .wp_tile_hover_lift:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); z-index: 2; }
.wp_tiles_hover_glow .wp_tile:hover, .wp_tile_hover_glow:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.2); z-index: 2; }
.wp_tiles_hover_scale .wp_tile:hover, .wp_tile_hover_scale:hover { transform: scale(1.06) rotate(-0.5deg); z-index: 2; }

/* Legacy generic hover class (kept for backward compat) */
.wp_tile_hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.wp_tile_hover:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }

/* Carousel controls */
.wp_tile_carousel { position: relative; width: 100%; height: 100%; }
.wp_tile_carousel_inner { width: 100%; height: 100%; }
.wp_tile_carousel_image { width: 100%; height: 100%; background-size: cover; background-position: center; }
.wp_tile_carousel_prev, .wp_tile_carousel_next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.7); border: 0; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; z-index: 4; }
.wp_tile_carousel_prev { left: 4px; } .wp_tile_carousel_next { right: 4px; }
.wp_tile_carousel_dots { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; z-index: 4; }
.wp_tile_carousel_dot { width: 6px; height: 6px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.wp_tile_carousel_dot.active { background: #fff; }

/* KPI / count / clock / date displays */
.wp_tile_kpi_value, .wp_tile_count_value, .wp_tile_time { font-size: 22px; font-weight: 700; }
.wp_tile_kpi_caption, .wp_tile_weather_location, .wp_tile_date { font-size: 12px; opacity: 0.9; }
.wp_tile_weather_temp { font-size: 18px; font-weight: 600; }

/* List / news / rss items */
.wp_tile_list_item, .wp_tile_news_item, .wp_tile_rss_items > p { font-size: 12px; line-height: 1.5; text-align: left; width: 100%; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.wp_tile_news_title, .wp_tile_rss_items > p > b { font-weight: 600; }