/**
 * Metro Tile System CSS - Refactored Version (Final Correction)
 * ------------------------------------------------------------
 * This version corrects all font-size class names and restores the missing ones.
 * The core flexbox properties have been revised for consistency and robustness.
 *
 * 結構化、註解清晰且易於維護的磁貼樣式系統（最終修正版）。
 * 本版本修正了所有 font-size 的類別名稱並恢復了遺失的項目。
 *
 * Original file: metro_tile.css
 * Refactored & Corrected by: Gemini
 * Date: 2025-08-20
 */

/* ==========================================================================
   1. Core Layout & Basic Styles - 核心佈局與基礎樣式
   ========================================================================== */

   .metro-container {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    grid-auto-rows: 300px;
    gap: 20px;
    padding: 20px 0;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    box-sizing: border-box;
    grid-auto-flow: dense;
}

.tile {
    background: #f0f8ff;
    border: 1px solid #e0f0ff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex; /* Unified flex container */
    overflow: hidden;
    position: relative;
    padding: 0 !important; /* All padding is handled by tile-content now */
}

.tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.tile-content,
.tile-image {
    display: flex;
    position: relative;
    overflow: hidden;
    /* This is the key fix: force flex items to grow and shrink properly */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.tile-content {
    flex-direction: column;
    box-sizing: border-box;
    z-index: 2;
}

.tile-image {
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   2. Tile Sizing System - 磁貼尺寸系統
   ========================================================================== */

/* Vertically-oriented tiles (Default) */
.metro-1x1, .metro-1x2, .metro-1x3, .metro-1x4,
.metro-2x2, .metro-3x2, .metro-3x3, .metro-4x3, .metro-4x4 {
    flex-direction: column;
}

/* Horizontally-oriented tiles */
.metro-2x1, .metro-2x3, .metro-3x1, .metro-4x1, .metro-4x2 {
    flex-direction: row;
}

/* Grid size definitions */
.metro-1x1 { grid-column: span 1; grid-row: span 1; }
.metro-1x2 { grid-column: span 1; grid-row: span 2; }
.metro-1x3 { grid-column: span 1; grid-row: span 3; }
.metro-1x4 { grid-column: span 1; grid-row: span 4; }
.metro-2x1 { grid-column: span 2; grid-row: span 1; }
.metro-2x2 { grid-column: span 2; grid-row: span 2; }
.metro-2x3 { grid-column: span 2; grid-row: span 3; }
.metro-3x1 { grid-column: span 3; grid-row: span 1; }
.metro-3x2 { grid-column: span 3; grid-row: span 2; }
.metro-3x3 { grid-column: span 3; grid-row: span 3; }
.metro-4x1 { grid-column: span 4; grid-row: span 1; }
.metro-4x2 { grid-column: span 4; grid-row: span 2; }
.metro-4x3 { grid-column: span 4; grid-row: span 3; }
.metro-4x4 { grid-column: span 4; grid-row: span 4; }

/* Default internal layout for specific tile sizes */
.metro-1x1 .tile-image, .metro-1x2 .tile-image, .metro-2x2 .tile-image { order: 1; height: 50%; }
.metro-1x1 .tile-content, .metro-1x2 .tile-content, .metro-2x2 .tile-content { order: 2; height: 50%; padding: 25px; text-align: center; justify-content: center; }

.metro-2x1 .tile-image  { order: 1; width: 35%; }
.metro-2x1 .tile-content { order: 2; width: 65%; padding: 25px; justify-content: center; }

.metro-3x1 .tile-image  { order: 1; width: 50%; }
.metro-3x1 .tile-content { order: 2; width: 50%; padding: 32px; justify-content: center; }

.metro-4x1 .tile-image  { order: 1; width: 35%; }
.metro-4x1 .tile-content { order: 2; width: 65%; padding: 25px; justify-content: center; }

.metro-4x2 .tile-image  { order: 1; width: 50%; }
.metro-4x2 .tile-content { order: 2; width: 50%; padding: 25px; justify-content: center; }

.metro-2x3 .tile-image  { order: 1; width: 50%; }
.metro-2x3 .tile-content { order: 2; width: 50%; padding: 25px; justify-content: center; }

/* ==========================================================================
   3. Layout Modifiers - 佈局修飾符
   ========================================================================== */

/* 3.1. Image Position System */
.tile.img-left { flex-direction: row !important; }
.tile.img-right { flex-direction: row !important; }
.tile.img-top { flex-direction: column !important; }
.tile.img-bottom { flex-direction: column !important; }

.tile.img-left .tile-image, .tile.img-top .tile-image { order: 1 !important; }
.tile.img-left .tile-content, .tile.img-top .tile-content { order: 2 !important; }
.tile.img-right .tile-image, .tile.img-bottom .tile-image { order: 2 !important; }
.tile.img-right .tile-content, .tile.img-bottom .tile-content { order: 1 !important; }

/* 3.2. Image/Content Ratio System */
.img-20 .tile-image { flex-basis: 20% !important; } .img-20 .tile-content { flex-basis: 80% !important; }
.img-25 .tile-image { flex-basis: 25% !important; } .img-25 .tile-content { flex-basis: 75% !important; }
.img-30 .tile-image { flex-basis: 30% !important; } .img-30 .tile-content { flex-basis: 70% !important; }
.img-35 .tile-image { flex-basis: 35% !important; } .img-35 .tile-content { flex-basis: 65% !important; }
.img-40 .tile-image { flex-basis: 40% !important; } .img-40 .tile-content { flex-basis: 60% !important; }
.img-45 .tile-image { flex-basis: 45% !important; } .img-45 .tile-content { flex-basis: 55% !important; }
.img-50 .tile-image { flex-basis: 50% !important; } .img-50 .tile-content { flex-basis: 50% !important; }
.img-55 .tile-image { flex-basis: 55% !important; } .img-55 .tile-content { flex-basis: 45% !important; }
.img-60 .tile-image { flex-basis: 60% !important; } .img-60 .tile-content { flex-basis: 40% !important; }
.img-65 .tile-image { flex-basis: 65% !important; } .img-65 .tile-content { flex-basis: 35% !important; }
.img-70 .tile-image { flex-basis: 70% !important; } .img-70 .tile-content { flex-basis: 30% !important; }
.img-75 .tile-image { flex-basis: 75% !important; } .img-75 .tile-content { flex-basis: 25% !important; }

/* 3.3. No Image Mode */
.tile.no-image { padding: 25px !important; }
.tile.no-image .tile-image { display: none !important; }
.tile.no-image .tile-content {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* ==========================================================================
   4. Theming & Appearance Modifiers - 主題與外觀修飾符
   ========================================================================== */

/* 4.1. Background Color System */
.tile.bg-blue           { background-color: #e6f2ff; }
.tile.bg-blue-light     { background-color: #f0f8ff; }
.tile.bg-blue-lighter   { background-color: #f5faff; }
.tile.bg-green          { background-color: #e6ffe6; }
.tile.bg-green-light    { background-color: #f0fff0; }
.tile.bg-green-lighter  { background-color: #f5fff5; }
.tile.bg-purple         { background-color: #f2e6ff; }
.tile.bg-purple-light   { background-color: #f9f0ff; }
.tile.bg-purple-lighter { background-color: #faf5ff; }
.tile.bg-pink           { background-color: #ffe6f0; }
.tile.bg-pink-light     { background-color: #fff0f5; }
.tile.bg-pink-lighter   { background-color: #fff5f7; }
.tile.bg-yellow         { background-color: #fffbe6; }
.tile.bg-yellow-light   { background-color: #fffef0; }
.tile.bg-yellow-lighter { background-color: #fffdf5; }
.tile.bg-cyan           { background-color: #e6ffff; }
.tile.bg-cyan-light     { background-color: #f0ffff; }
.tile.bg-cyan-lighter   { background-color: #f5ffff; }
.tile.bg-gray           { background-color: #e6e6e6; }
.tile.bg-gray-light     { background-color: #f0f0f0; }
.tile.bg-gray-lighter   { background-color: #f5f5f5; }
.tile.bg-white          { background-color: #ffffff; }
.tile.bg-orange         { background-color: #fff0e6; }
.tile.bg-orange-light   { background-color: #fff5f0; }
.tile.bg-orange-lighter { background-color: #fffaf5; }
.tile.bg-indigo         { background-color: #e6e6ff; }
.tile.bg-indigo-light   { background-color: #f0f0ff; }
.tile.bg-indigo-lighter { background-color: #f5f5ff; }
.tile.bg-red            { background-color: #ffe6e6; }
.tile.bg-red-light      { background-color: #fff0f0; }
.tile.bg-red-lighter    { background-color: #fff5f5; }
.tile.bg-brown          { background-color: #f0e6e6; }
.tile.bg-brown-light    { background-color: #f5f0f0; }
.tile.bg-brown-lighter  { background-color: #faf5f5; }

/* 4.2. Special Background Modes */
.tile.no-border {
    border: none !important;
    box-shadow: none !important;
}
.tile.bg-transparent {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.tile.bg-translucent {
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 4.3. Split Tile Border Radius */
.tile.img-left .tile-image, .tile.img-left .tile-image img   { border-radius: 12px 0 0 12px !important; }
.tile.img-right .tile-image, .tile.img-right .tile-image img  { border-radius: 0 12px 12px 0 !important; }
.tile.img-top .tile-image, .tile.img-top .tile-image img      { border-radius: 12px 12px 0 0 !important; }
.tile.img-bottom .tile-image, .tile.img-bottom .tile-image img { border-radius: 0 0 12px 12px !important; }
.tile.no-image { border-radius: 12px !important; }

/* ==========================================================================
   5. Content & Text Styles - 內容與文字樣式
   ========================================================================== */

/* 5.1. Typography */
.tile h1, .tile-content h1 {
    font-size: 1.6rem;
    margin: 0 0 15px 0;
    line-height: 1.3;
}
.tile h2, .tile-content h2 {
    font-size: 1.1rem;
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
}

/* 5.2. Font Size System - CORRECTED AND COMPLETE */
.tile.font-size-10 .tile-content h1 { font-size: 0.625rem !important; } /* 10px */
.tile.font-size-12 .tile-content h1 { font-size: 0.75rem !important; } /* 12px */
.tile.font-size-14 .tile-content h1 { font-size: 0.875rem !important; } /* 14px */
.tile.font-size-16 .tile-content h1 { font-size: 1rem !important; } /* 16px */
.tile.font-size-18 .tile-content h1 { font-size: 1.125rem !important; } /* 18px */
.tile.font-size-20 .tile-content h1 { font-size: 1.25rem !important; } /* 20px */
.tile.font-size-22 .tile-content h1 { font-size: 1.375rem !important; } /* 22px */
.tile.font-size-24 .tile-content h1 { font-size: 1.5rem !important; } /* 24px */
.tile.font-size-26 .tile-content h1 { font-size: 1.625rem !important; } /* 26px */
.tile.font-size-28 .tile-content h1 { font-size: 1.75rem !important; } /* 28px */
.tile.font-size-30 .tile-content h1 { font-size: 1.875rem !important; } /* 30px */
.tile.font-size-32 .tile-content h1 { font-size: 2rem !important; } /* 32px */
.tile.font-size-34 .tile-content h1 { font-size: 2.125rem !important; } /* 34px */
.tile.font-size-35 .tile-content h1 { font-size: 2.1875rem !important; } /* 35px */
.tile.font-size-36 .tile-content h1 { font-size: 2.25rem !important; } /* 36px */
.tile.font-size-38 .tile-content h1 { font-size: 2.375rem !important; } /* 38px */
.tile.font-size-40 .tile-content h1 { font-size: 2.5rem !important; } /* 40px */
.tile.font-size-42 .tile-content h1 { font-size: 2.625rem !important; } /* 42px */
.tile.font-size-44 .tile-content h1 { font-size: 2.75rem !important; } /* 44px */
.tile.font-size-46 .tile-content h1 { font-size: 2.875rem !important; } /* 46px */
.tile.font-size-48 .tile-content h1 { font-size: 3rem !important; } /* 48px */
.tile.font-size-50 .tile-content h1 { font-size: 3.125rem !important; } /* 50px */
.tile.font-size-60 .tile-content h1 { font-size: 3.75rem !important; } /* 60px */
.tile.font-size-70 .tile-content h1 { font-size: 4.375rem !important; } /* 70px */
.tile.font-size-80 .tile-content h1 { font-size: 5rem !important; } /* 80px */
.tile.font-size-90 .tile-content h1 { font-size: 5.625rem !important; } /* 90px */
.tile.font-size-100 .tile-content h1 { font-size: 6.25rem !important; } /* 100px */

/* 讓第一個 H2（標題）繼承 H1 的字體大小設定，以保持視覺層次 */
.tile.font-size-10 .tile-content h2:first-child { font-size: 0.625rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 10px */
.tile.font-size-12 .tile-content h2:first-child { font-size: 0.75rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 12px */
.tile.font-size-14 .tile-content h2:first-child { font-size: 0.875rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 14px */
.tile.font-size-16 .tile-content h2:first-child { font-size: 1rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 16px */
.tile.font-size-18 .tile-content h2:first-child { font-size: 1.125rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 18px */
.tile.font-size-20 .tile-content h2:first-child { font-size: 1.25rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 20px */
.tile.font-size-22 .tile-content h2:first-child { font-size: 1.375rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 22px */
.tile.font-size-24 .tile-content h2:first-child { font-size: 1.5rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 24px */
.tile.font-size-26 .tile-content h2:first-child { font-size: 1.625rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 26px */
.tile.font-size-28 .tile-content h2:first-child { font-size: 1.75rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 28px */
.tile.font-size-30 .tile-content h2:first-child { font-size: 1.875rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 30px */
.tile.font-size-32 .tile-content h2:first-child { font-size: 2rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 32px */
.tile.font-size-34 .tile-content h2:first-child { font-size: 2.125rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 34px */
.tile.font-size-35 .tile-content h2:first-child { font-size: 2.1875rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 35px */
.tile.font-size-36 .tile-content h2:first-child { font-size: 2.25rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 36px */
.tile.font-size-38 .tile-content h2:first-child { font-size: 2.375rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 38px */
.tile.font-size-40 .tile-content h2:first-child { font-size: 2.5rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 40px */
.tile.font-size-42 .tile-content h2:first-child { font-size: 2.625rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 42px */
.tile.font-size-44 .tile-content h2:first-child { font-size: 2.75rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 44px */
.tile.font-size-46 .tile-content h2:first-child { font-size: 2.875rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 46px */
.tile.font-size-48 .tile-content h2:first-child { font-size: 3rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 48px */
.tile.font-size-50 .tile-content h2:first-child { font-size: 3.125rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 50px */
.tile.font-size-60 .tile-content h2:first-child { font-size: 3.75rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 60px */
.tile.font-size-70 .tile-content h2:first-child { font-size: 4.375rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 70px */
.tile.font-size-80 .tile-content h2:first-child { font-size: 5rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 80px */
.tile.font-size-90 .tile-content h2:first-child { font-size: 5.625rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 90px */
.tile.font-size-100 .tile-content h2:first-child { font-size: 6.25rem !important; margin: 0 0 15px 0; line-height: 1.3; } /* 100px */

/* 如果沒有指定 font-size-* 類別，第一個 H2 使用預設的 H1 字體大小 */
.tile-content h2:first-child {
    font-size: 1.6rem;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

/* 5.3. Text Style Modifiers */
.text-solid .tile-content h1  { color: inherit !important; -webkit-text-stroke: none !important; }
.text-hollow .tile-content h1 { color: transparent !important; -webkit-text-stroke: 1px #000 !important; }
.text-solid .tile-content h2:first-child  { color: inherit !important; -webkit-text-stroke: none !important; }
.text-hollow .tile-content h2:first-child { color: transparent !important; -webkit-text-stroke: 1px #000 !important; }
.text-left .tile-content { text-align: left !important; }
.text-center .tile-content { text-align: center !important; }
.text-right .tile-content { text-align: right !important; }
.text-top .tile-content { justify-content: flex-start !important; }

/* ==========================================================================
   6. Image Styles & Effects - 圖片樣式與效果
   ========================================================================== */

/* 6.1. Base Image Styles */
.tile-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
    transform-origin: center center;
    margin: 0 !important;
    padding: 0 !important;
}
/* For some horizontal layouts, `cover` is better for edge-to-edge images */
.metro-2x1 .tile-image img,
.metro-3x1 .tile-image img,
.metro-4x1 .tile-image img,
.metro-4x2 .tile-image img {
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force edge-to-edge images for specific layout classes */
.tile.img-left .tile-image img,
.tile.img-right .tile-image img,
.tile.img-top .tile-image img,
.tile.img-bottom .tile-image img {
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* When a ratio or position class is explicitly used, `cover` is preferred */
/*
.tile[class*="img-"] .tile-image img {
    object-fit: cover !important;
}
*/

/* 6.2. Image Scale on Hover */
.scale-11:hover .tile-image img   { transform: scale(1.1); }
.scale-115:hover .tile-image img  { transform: scale(1.15); }
.scale-12:hover .tile-image img   { transform: scale(1.2); }
.scale-125:hover .tile-image img  { transform: scale(1.25); }
.scale-13:hover .tile-image img   { transform: scale(1.3); }
.scale-14:hover .tile-image img   { transform: scale(1.4); }
.scale-15:hover .tile-image img   { transform: scale(1.5); }
.scale-2:hover .tile-image img    { transform: scale(2.0); }


/* ==========================================================================
   7. Responsive Design - 響應式設計
   ========================================================================== */

@media screen and (max-width: 992px) {
    .metro-container {
        grid-template-columns: repeat(2, 300px);
    }
    .tile h1 { font-size: 1.2rem; }
    .tile h2 { font-size: 1rem; }
    .tile-content h2:first-child { font-size: 1.2rem; margin: 0 0 15px 0; line-height: 1.3; }

    /* Force all tiles into a vertical layout */
    .tile {
        flex-direction: column !important;
    }
    /* Unified responsive styles for content and image containers */
    .tile .tile-image {
        order: 1 !important;
        height: 150px !important;
        flex-basis: 150px !important;
        flex-grow: 0;
        flex-shrink: 0;
        margin: 0 !important;
        padding: 0 !important;
    }
    .tile .tile-content {
        order: 2 !important;
        flex-basis: auto !important;
        flex-grow: 1;
        padding: 20px !important;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 576px) {
    .metro-container {
        grid-template-columns: 300px;
    }
    .tile h1 { font-size: 1.4rem; }
    .tile h2 { font-size: 0.9rem; }
    .tile-content h2:first-child { font-size: 1.4rem; margin: 0 0 15px 0; line-height: 1.3; }
    .tile .tile-content {
        text-align: left;
    }
}