/* island-detail-specific.css */

/* Ensure font paths are correct relative to this CSS file if it's not in the root
   or relative to the HTML file that links it (start.html).
   If start.html is in root, and assets/fonts is in root: */
@font-face {
    font-family: 'Graphik-Light';
    src: url('../../assets/fonts/Graphik-Light.woff') format('woff'); /* Adjusted path */
    font-weight: lighter; font-style: normal;
}
@font-face {
    font-family: 'Graphik-Medium';
    src: url('../../assets/fonts/Graphik-Medium.woff') format('woff'); /* Adjusted path */
    font-weight: Medium; font-style: normal;
}
@font-face {
    font-family: 'Graphik-Regular';
    src: url('../../assets/fonts/Graphik-Regular.woff') format('woff'); /* Adjusted path */
    font-weight: Regular; font-style: normal;
}
@font-face {
    font-family: 'Graphik-Black';
    src: url('../../assets/fonts/Graphik-Black.woff') format('woff'); /* Adjusted path */
    font-weight: bolder; font-style: normal;
}
@font-face {
    font-family: 'Graphik-Bold';
    src: url('../../assets/fonts/Graphik-Bold.woff') format('woff'); /* Adjusted path */
    font-weight: bold; font-style: normal;
}

/* Reset any potential body/html/navbar/footer styles if they were in the original islands_style.css */
/* Make sure ONLY styles for the island detail content are here */

/* --- Island Hero Section --- */
.island-section {
    /* background-image: url("../../assets/images/image_relief.jpg"); */ /* Path from start.html */
    /* If this CSS is in assets/ and images are in assets/images: */
    background-image: url("../images/background/image_relief.jpg"); /* Adjusted path */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* background-attachment: fixed; */ /* Can cause issues inside a scrollable pane, consider removing or testing thoroughly */
    color: white;
    padding: 3rem 1rem 2rem 1rem; /* Adjusted padding for being inside a pane */
    font-family: 'Graphik-Regular', sans-serif;
    position: relative; /* For ::before overlay */
}

.island-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(5, 23, 77, 0.8); /* Dark blue overlay */
    z-index: 1;
}

.island-section .container { /* Bootstrap container within this section */
    position: relative;
    z-index: 2;
    max-width: 100%; /* Allow it to use the full width of the pane */
}

.island-title {
    font-family: 'Graphik-Bold', sans-serif;
    font-size: 2.5rem; /* Base size for desktop inside pane */
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.island-description {
    font-family: 'Graphik-Light', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Island section image (right column) */
.island-section .col-lg-5 img { /* Targeting the image specifically */
    width: 100%; /* Make it responsive within its column */
    max-width: 450px; /* Optional: Max width for very large screens */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    margin-left: auto; /* Center if column is wider */
    margin-right: auto;/* Center if column is wider */
}

/* Stats Container in Hero Section */
.stats-container {
    display: flex;
    flex-direction: row; /* HORIZONTAL by default for larger screens */
    flex-wrap: wrap;     /* Allow items to wrap to the next line if not enough space */
    gap: 1.5rem;         /* Gap between items */
    justify-content: space-between; /* Distribute items nicely, or use 'flex-start' or 'center' */
    align-items: flex-start; /* Align items to the top if they wrap and have different heights */
    margin-top: 2rem;    /* Add some top margin */
}

.stats-container .stat-item { /* Item within .stats-container of hero section */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto; /* Allow items to grow and shrink */
    min-width: 180px; /* Minimum width before wrapping */
    box-sizing: border-box; /* Ensure padding/border included in width/height */
}

.stats-container .stat-icon { /* For SVG icons in hero's stats-container */
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.stats-container .stat-content { /* Text content in hero's stats-container */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.stats-container .stat-value {
    font-family: 'Graphik-Bold', sans-serif;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    word-break: break-word;
}

.stats-container .stat-label {
    font-family: 'Graphik-Light', sans-serif;
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}


/* --- Tab Stat Section --- */
.tab_stat {
    background-color: #0B192C;
    color: white;
    padding: 2rem 1rem; /* Responsive padding */
}

.tab_stat .container-fluid {
    max-width: 1200px; /* Max width for content inside */
    margin-left: auto;
    margin-right: auto;
}

.stats-row { /* Container for multiple stat items in tab_stat */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: stretch; /* Make items same height */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.tab_stat .stat-item { /* Styles specific to stat items in tab_stat section */
    /* This .stat-item is DIFFERENT from the one in .stats-container */
    display: flex; /* Ensure this is set for items here too */
    align-items: center; /* Align icon/chart and text */
    padding: 1rem; /* Internal padding for each stat box */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex: 1 1 280px; /* Allow items to grow and shrink, with a preferred basis */
    box-sizing: border-box;
}

.tab_stat .stat-item:last-child {
    border-right: none;
}

.chart-section { /* For progress rings */
    width: 100px;
    height: 100px;
    position: relative;
    margin-right: 1rem; /* Space from text */
    flex-shrink: 0;
}

.tab_stat .stat-content { /* For text next to progress rings/bars */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow to take space */
    min-width: 0; /* For wrapping */
}


.metric-value { /* Text inside .tab_stat .stat-content */
    font-size: 1.75rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.25rem;
}

.metric-label { /* Text inside .tab_stat .stat-content */
    font-size: 0.85rem;
    color: #8B9CB3;
    margin-bottom: 0.1rem;
}

.metric-subtext { /* Text inside .tab_stat .stat-content */
    font-size: 0.75rem;
    color: #5D7290;
}

.progress-ring {
    width: 100px; height: 100px; border-radius: 50%;
    /* background conic-gradient is set by JS */
    display: flex; align-items: center; justify-content: center;
}
.progress-ring::before {
    content: ''; width: 75px; height: 75px;
    background: #0B192C; border-radius: 50%; position: absolute;
}
.progress-value {
    position: relative; z-index: 1; font-size: 1.25rem;
    font-weight: bold; color: white;
}

/* Taxon Progress Bar Section (within .tab_stat .stat-item) */
.chart-container { /* Wrapper for taxon bars */
    width: 100%;
    margin: 0;
    padding: 0;
}
.taxon-row {
    display: flex; align-items: center;
    margin-bottom: 0.5rem;
    gap: 8px;
}
.taxon-icon {
    min-width: 20px;
    text-align: center; font-size: 1em;
    flex-shrink: 0;
}
.taxon-icon img { max-width: 100%; height: auto; }

.taxon-name {
    flex-basis: 80px;
    flex-shrink: 0;
    font-size: 0.8rem; color: #8B9CB3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress-wrapper { flex: 1; min-width: 80px; }
.progress { height: 12px; background-color: rgba(255,255,255,0.1); border-radius: 6px; }
.progress-bar { background-color: #4A90E2; border-radius: 6px; transition: width 0.3s ease; }
.percentage {
    min-width: 35px;
    font-size: 0.8rem; color: #8B9CB3; text-align: right;
    flex-shrink: 0;
}


/* --- Info Section (Species Table) --- */
.table_liste{
    background-image: url("../images/background/background_table.png");
}

.py-5.bg-beige-custom {
    background-color: rgb(255, 255, 255);
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}
.py-5.bg-beige-custom .container {
    max-width: 100%;
}

.py-5.bg-beige-custom h1 {
    color: #09334F;
    font-weight: bold;
    font-size: 1.75rem;
    margin-bottom: 1.5rem !important;
}

.table-container {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.table-rounded { border-radius: 10px; background-color: white;}
.table-rounded thead th {
    background-color: #09334F; color: #f0f0f0;
    border: none; padding: 1rem; font-size: 0.9rem;
}
.table-rounded tbody td {
    color: #555;
    border: none; padding: 0.85rem 1rem; font-size: 0.85rem;
    vertical-align: middle;
}
.table-rounded tbody tr:nth-child(even) { background-color: #ececec; }
.table-rounded .form-control { /* Search input */
    border-radius: 20px; padding: 0.5rem 1rem;
    border-color: #09334F; margin-bottom: 1rem;
}
.pagination { margin-top: 1rem; justify-content: center; }
.pagination .page-item.active .page-link { background-color: #09334F; border-color: #09334F; }
.pagination .page-link { color: #09334F; }
.table-info { color: #6c757d; margin-top: 0.5rem; font-size: 0.85rem; }


/* --- Gallery Section --- */
.py-5.bg-darkblue-custom {
    background-color: #0B192C;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}
.gallery-section {
    position: relative;
    margin: 0 auto;
    padding: 0 40px;
}
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}
.gallery-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.05); filter: brightness(1.1); }

.nav-buttons { /* For gallery arrows */
    position: absolute; width: calc(100% + 50px);
    top: 50%; left: -25px;
    transform: translateY(-50%);
    display: flex; justify-content: space-between;
    pointer-events: none; padding: 0;
}
.nav-arrow {
    width: 40px; height: 40px;
    border-radius: 50%; background-color: rgba(255, 255, 255, 0.9);
    border: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    pointer-events: auto; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}
.nav-arrow:hover { background-color: white; }
.nav-arrow:disabled { opacity: 0.5; cursor: not-allowed; }
.nav-arrow svg { width: 18px; height: 18px; }

/* General Animation Classes (if used by gallery) */
.slide-left { animation: slideLeft 0.5s ease-out; }
.slide-right { animation: slideRight 0.5s ease-out; }
@keyframes slideLeft { from { transform: translateX(50%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideRight { from { transform: translateX(-50%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }


/* --- Responsive Media Queries for Island Detail Content --- */

/* Tablet and Larger Mobile */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint */
    .island-title { font-size: 2rem; text-align: center; }
    .island-description { font-size: 0.95rem; text-align: center; }
    .island-section .col-lg-5 img { margin-top: 1.5rem; max-width: 350px; }

    .stats-container { /* Hero section stats */
        /* Still row, but might wrap items sooner */
        justify-content: center; /* Center items if they wrap */
        gap: 1.25rem;
    }
    .stats-container .stat-item {
        min-width: 160px; /* Slightly smaller min-width before wrapping */
        flex-grow: 0; /* Don't let them grow too much if few items */
        flex-basis: auto; /* Let content + min-width define size */
    }

    .stats-row { /* Tab_stat section */
        flex-direction: column; padding: 1rem; gap: 1rem;
    }
    .tab_stat .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        padding: 1rem 0.5rem;
        flex-basis: auto;
        flex-direction: row; /* Keep icon/chart and text side-by-side */
    }
    .tab_stat .stat-item:last-child { border-bottom: none; }
    .chart-container { margin: 0; }
    .taxon-name { flex-basis: 70px; font-size: 0.75rem; }
    .percentage { font-size: 0.75rem; }

    .gallery-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .gallery-section { padding: 0 20px; }
    .nav-buttons { width: calc(100% + 40px); left: -20px; }
    .nav-arrow { width: 35px; height: 35px; }

    .py-5.bg-beige-custom h1 { font-size: 1.5rem; }
    .table-rounded thead th, .table-rounded tbody td { padding: 0.75rem; font-size: 0.8rem; }
}

/* Small Mobile */
@media (max-width: 767.98px) { /* Bootstrap's md breakpoint (often phone portrait) */
    .island-section { padding: 2rem 1rem 1.5rem 1rem; }
    .island-section .col-lg-7 { order: 1; } /* Text first */
    .island-section .col-lg-5 { order: 2; } /* Image second */
    .island-section .col-lg-5 img { margin-top: 1.5rem; max-width: 100%; }

    .stats-container { /* Hero section stats */
        flex-direction: column; /* STACK VERTICALLY */
        align-items: flex-start; /* Align all items to the left */
        gap: 1rem;
    }
    .stats-container .stat-item {
        width: 100%; /* Make each item take full width when stacked */
        min-width: 0;  /* Reset min-width */
        justify-content: flex-start;
    }

    .tab_stat { padding: 1.5rem 0.5rem; }
    .stats-row { padding: 0.75rem; }
    .tab_stat .stat-item {
        padding: 0.75rem 0.25rem;
        flex-direction: column; /* Stack icon/chart above text */
        align-items: flex-start; /* Align content to left */
    }
    .tab_stat .stat-item .chart-section { margin-right: 0; margin-bottom: 0.5rem; } /* Adjust chart spacing */

    .metric-value { font-size: 1.5rem; }
    .metric-label { font-size: 0.8rem; }
    .progress-ring, .chart-section { width: 80px; height: 80px; }
    .progress-ring::before { width: 60px; height: 60px; }
    .progress-value { font-size: 1.1rem; }
    .taxon-row { gap: 5px; margin-bottom: 0.35rem; }
    .taxon-icon { min-width: 18px; font-size: 0.9em; }
    .taxon-name { flex-basis: auto; white-space: normal; font-size: 0.7rem; } /* Allow taxon name to wrap */
    .progress { height: 10px; }
    .percentage { min-width: 30px; font-size: 0.7rem; }

    .py-5.bg-beige-custom { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-5.bg-beige-custom h1 { font-size: 1.3rem; margin-bottom: 1rem !important; }
    .table-rounded .form-control { margin-bottom: 0.75rem; font-size: 0.9rem; }
    .table-rounded thead th, .table-rounded tbody td { padding: 0.5rem; font-size: 0.75rem; }
    .table-info { font-size: 0.75rem; }
    .pagination .page-link { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

    .gallery-container { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; }
    .gallery-section { padding: 0 10px; }
    .nav-buttons { display: none; /* Hide arrows on smallest screens, rely on scroll or fewer items */ }
}

/* Very Small Mobile specific tweaks if needed, often covered by 767px query */
@media (max-width: 575.98px) {
    .island-title { font-size: 1.6rem; } /* Slightly smaller */
    .stats-container .stat-value { font-size: 1.1rem; }
    .stats-container .stat-label { font-size: 0.7rem; }
    .stats-container .stat-icon { width: 1.75rem; height: 1.75rem; }

    .tab_stat .stat-item .chart-section { width: 70px; height: 70px; }
    .progress-ring {width: 70px; height: 70px;}
    .progress-ring::before {width: 50px; height: 50px;}
    .progress-value {font-size: 1rem;}


    .gallery-container { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .islands-image { width: 90px; height: 90px; } /* This class wasn't in the provided HTML, assuming it's for a list of islands */
    .island-name { font-size: 0.95rem; }
    .island-location { font-size: 0.75rem; }
}

/* --- New Taxon Showcase Section --- */
.taxon-showcase-section {
    /*background-color: #1e2c69;  Lighter green background */
    background-image: url("../images/background/background_stat.png"); /* Path from start.html */
    padding: 2.5rem 1rem;
    color: white;
}

.taxon-showcase-section .container { /* Using Bootstrap's .container for max-width and padding */
    max-width: 1200px; /* Or your preferred max width */
    margin-left: auto;
    margin-right: auto;
}

.taxon-card-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Desktop: 7 columns */
    gap: 0.85rem; /* Gap between cards */
}

.taxon-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Ensure the link takes up the whole card space for clickability */
    height: 100%; /* Make link fill the card height */
}

.taxon-card {
    background-color: #0D1F16; /* Very dark green/black from screenshot */
    border-radius: 14px;     /* More rounded corners */
    padding: 1.25rem 0.75rem;  /* Internal padding (vertical horizontal) */
    display: flex;
    flex-direction: column;
    align-items: center; /* HORIZONTALLY CENTER content */
    justify-content: center; /* VERTICALLY CENTER content */
    text-align: center;    /* Center text lines if they don't fill width */
    height: 100%; /* Make cards in a row equal height if content varies */
    min-height: 165px; /* Minimum height for cards - adjust as needed */
    box-sizing: border-box; /* Padding and border included in height/width */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.taxon-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.taxon-card-icon {
    margin-bottom: 1rem; /* Space below icon */
    width: 50px;  /* Adjust size of icon container */
    height: 50px; /* Adjust size of icon container */
}
.taxon-card-icon img,
.taxon-card-icon svg,
.taxon-card-icon i { /* For Font Awesome or SVGs */
    width: 100%;
    height: 100%;
    object-fit: contain; /* Scales image down to fit, preserving aspect ratio */
    color: #ffffff; /* White icon */
    /* If using black SVGs and want them white: */
    filter: brightness(0) invert(1);
}

.taxon-name-display { /* Formerly taxon-card-type, now Taxon Name */
    font-size: 0.9rem;
    color: #aec2e7; /* Light green text from screenshot */
    margin-bottom: 0.35rem; /* Space between taxon name and count */
    font-weight: 500; /* Medium weight */
    line-height: 1.3;
    word-break: break-word; /* Allow long names to wrap */
}

.taxon-observation-count { /* Formerly taxon-card-name, now Observation Count */
    font-size: 1.2rem; /* Larger font for the number */
    font-weight: 700;  /* Bold for emphasis */
    color: #ffffff;
    line-height: 1.2;
}


/* --- Responsive Adjustments for Taxon Card Grid --- */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .taxon-card-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for tablets */
        gap: 0.75rem;
    }
    .taxon-card {
        padding: 1.1rem 0.65rem;
        min-height: 155px;
        border-radius: 12px;
    }
    .taxon-card-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 0.85rem;
    }
    .taxon-name-display {
        font-size: 0.85rem;
    }
    .taxon-observation-count {
        font-size: 1.1rem;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .taxon-showcase-section {
        padding: 2rem 0.75rem;
    }
    .taxon-card-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        gap: 0.65rem;
    }
    .taxon-card {
        padding: 1rem 0.5rem;
        min-height: 145px;
        border-radius: 10px;
    }
    .taxon-card-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0.75rem;
    }
    .taxon-name-display {
        font-size: 0.8rem;
    }
    .taxon-observation-count {
        font-size: 1rem;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .taxon-card-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 0.5rem;
    }
     .taxon-card {
        padding: 0.85rem 0.5rem;
        min-height: 140px; /* Or even a bit less if names are short */
    }
    .taxon-card-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 0.65rem;
    }
    .taxon-name-display {
        font-size: 0.75rem;
    }
    .taxon-observation-count {
        font-size: 0.95rem;
    }
}