/* =======================================================================
   sustainability.css
   -----------------------------------------------------------------------
   Stylesheet KHUSUS section "Sustainability Reports" di sustainability.html.
   Sengaja dipisah dari main.css (hasil generate Tailwind) supaya tidak
   campur dengan style halaman lain. Semua kelas ber-prefix "sr-"
   (sustainability reports).

   Layout mengikuti referensi desain:
     judul  -> deskripsi -> toolbar (label Filter + search + dropdown tahun)
     -> grid kartu 2 kolom (cover, judul, tombol Download)
     -> footer (info "Showing 1 - X of Y results" + pagination)

   Breakpoint mengikuti tailwind.config.js:
     390 / 768 / 1024 / 1280 / 1440 / 1920 / 2560 (min-width, mobile-first)
   ======================================================================= */

:root {
   --sr-text: #111111;            /* neutral-dark */
   --sr-text-muted: #666666;      /* neutral-slate */
   --sr-border: #d9d9d9;          /* neutral-smoke */
   --sr-surface-alt: #f5f5f5;
   --sr-link: #005eb8;            /* biru brand (hue ocean-blue #6BA6FF, digelapkan agar kontras >= 4.5:1) */
   --sr-link-hover: #004a92;
   --sr-radius: 8px;
   --sr-speed: 200ms;             /* durasi transisi mikro-interaksi */
}

/* ---------- Section shell ---------- */

.sr-section {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   padding: 56px 24px 64px;
   background: #ffffff;
}

.sr-header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
}

/* ---------- Judul & deskripsi ---------- */

.sr-title {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 32px;
   font-weight: 600;
   letter-spacing: -0.05em;
   line-height: 1;
   color: var(--sr-text);
   text-align: left;
}

.sr-desc {
   /* full width sesuai revisi: tanpa max-width; keterbacaan dijaga
      lewat penskalaan font per breakpoint di bawah */
   margin-top: 24px;
   font-family: 'Figtree', sans-serif;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: -0.02em;
   line-height: 1.5;
   color: var(--sr-text);
   text-align: justify;
}

.sr-desc p {
   margin: 0;
}

.sr-desc p + p {
   margin-top: 16px;
}

/* ---------- Toolbar: Filter + search + dropdown tahun ---------- */

.sr-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
   margin-top: 40px;
}

.sr-toolbar-label {
   font-family: 'Figtree', sans-serif;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: var(--sr-text);
}

.sr-toolbar-controls {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
}

/* Search box */
.sr-search {
   position: relative;
   display: inline-flex;
}

.sr-search-icon {
   position: absolute;
   top: 50%;
   left: 14px;
   width: 16px;
   height: 16px;
   transform: translateY(-50%);
   pointer-events: none;
   color: var(--sr-text-muted);
}

.sr-search-input {
   box-sizing: border-box;
   width: 240px;
   height: 44px;               /* target sentuh minimal 44px */
   padding: 0 14px 0 40px;
   font-family: 'Figtree', sans-serif;
   font-size: 15px;
   color: var(--sr-text);
   background: #ffffff;
   border: 1px solid var(--sr-border);
   border-radius: var(--sr-radius);
   outline: none;
   transition: border-color var(--sr-speed) ease, box-shadow var(--sr-speed) ease;
}

.sr-search-input::placeholder {
   color: var(--sr-text-muted);
}

.sr-search-input::-webkit-search-cancel-button {
   cursor: pointer;
}

/* Dropdown tahun */
.sr-select {
   position: relative;
   display: inline-flex;
}

.sr-select-select {
   box-sizing: border-box;
   width: 160px;
   height: 44px;
   padding: 0 40px 0 14px;
   font-family: 'Figtree', sans-serif;
   font-size: 15px;
   color: var(--sr-text);
   background: #ffffff;
   border: 1px solid var(--sr-border);
   border-radius: var(--sr-radius);
   outline: none;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   transition: border-color var(--sr-speed) ease, box-shadow var(--sr-speed) ease;
}

.sr-select-icon {
   position: absolute;
   top: 50%;
   right: 14px;
   width: 14px;
   height: 14px;
   transform: translateY(-50%);
   pointer-events: none;
   color: var(--sr-text-muted);
}

/* Ring fokus yang jelas untuk keyboard (tidak dihilangkan) */
.sr-search-input:focus-visible,
.sr-select-select:focus-visible {
   border-color: var(--sr-link);
   box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.25);
}

/* ---------- Grid kartu laporan ---------- */

.sr-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px 48px;
   width: 100%;
   margin-top: 40px;
}

.sr-card {
   display: flex;
   align-items: flex-start;
   gap: 24px;
}

.sr-card-cover {
   flex-shrink: 0;
   width: 96px;
   aspect-ratio: 3 / 4;        /* cegah layout shift saat gambar dimuat */
   overflow: hidden;
   background: var(--sr-surface-alt);
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sr-card-cover img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.sr-card-body {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
   padding-top: 4px;
}

.sr-card-title {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.3;
   color: var(--sr-text);
}

/* Tombol / tautan Download */
.sr-card-download {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 44px;           /* area sentuh memadai walau teks kecil */
   padding: 0 4px;
   font-family: 'Figtree', sans-serif;
   font-size: 15px;
   font-weight: 500;
   color: var(--sr-link);
   text-decoration: none;
   transition: color var(--sr-speed) ease;
}

.sr-card-download svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
}

.sr-card-download:hover {
   color: var(--sr-link-hover);
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* ---------- Empty state ---------- */

.sr-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: 64px 16px;
   text-align: center;
}

.sr-empty[hidden] {
   display: none;
}

.sr-empty-title {
   margin: 0;
   font-family: 'Geist', sans-serif;
   font-size: 18px;
   font-weight: 600;
   color: var(--sr-text);
}

.sr-empty-text {
   margin: 0;
   font-family: 'Figtree', sans-serif;
   font-size: 15px;
   color: var(--sr-text-muted);
}

.sr-empty-reset {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 0 8px;
   font-family: 'Figtree', sans-serif;
   font-size: 15px;
   font-weight: 500;
   color: var(--sr-link);
   background: none;
   border: none;
   cursor: pointer;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.sr-empty-reset:hover {
   color: var(--sr-link-hover);
}

/* ---------- Footer: info hasil + pagination ---------- */

.sr-footer {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   width: 100%;
   margin-top: 48px;
}

.sr-info {
   margin: 0;
   font-family: 'Figtree', sans-serif;
   font-size: 14px;
   letter-spacing: -0.01em;
   color: var(--sr-text-muted);
}

.sr-pagination {
   display: flex;
   align-items: center;
   gap: 8px;
}

.sr-page-btn {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding: 0 8px;
   font-family: 'Figtree', sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: var(--sr-text);
   background: #ffffff;
   border: 1px solid var(--sr-border);
   border-radius: 6px;
   cursor: pointer;
   transition: background-color var(--sr-speed) ease,
               color var(--sr-speed) ease,
               border-color var(--sr-speed) ease;
}

.sr-page-btn svg {
   width: 14px;
   height: 14px;
}

.sr-page-btn:hover:not(:disabled):not(.is-active) {
   background: var(--sr-surface-alt);
}

.sr-page-btn.is-active {
   color: #ffffff;
   background: var(--sr-text);
   border-color: var(--sr-text);
}

.sr-page-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
}

.sr-page-ellipsis {
   min-width: 24px;
   font-family: 'Figtree', sans-serif;
   font-size: 14px;
   color: var(--sr-text-muted);
   text-align: center;
   user-select: none;
}

/* Fokus keyboard konsisten untuk semua kontrol */
.sr-card-download:focus-visible,
.sr-empty-reset:focus-visible,
.sr-page-btn:focus-visible {
   outline: 2px solid var(--sr-link);
   outline-offset: 2px;
   border-radius: 6px;
}

/* ---------- Tablet ke atas ---------- */

@media (min-width: 768px) {
   .sr-section {
      padding: 64px 32px 72px;
   }

   .sr-title {
      font-size: 36px;
   }

   .sr-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 48px 56px;
   }

   .sr-card-cover {
      width: 110px;
   }

   .sr-card-title {
      font-size: 17px;
   }
}

/* Mobile: kontrol filter melebar mengisi lebar agar mudah disentuh */
@media (max-width: 767px) {
   .sr-toolbar {
      flex-direction: column;
      align-items: stretch;
   }

   .sr-toolbar-controls {
      flex-direction: column;
      align-items: stretch;
   }

   .sr-search,
   .sr-select {
      display: flex;
   }

   .sr-search-input,
   .sr-select-select {
      flex: 1;
      width: 100%;
   }
}

@media (min-width: 1024px) {
   .sr-section {
      padding: 64px 40px 80px;
   }

   .sr-desc {
      font-size: 17px;
   }
}

/* ---------- Desktop lebar ---------- */

/* Breakpoint 2xl proyek (1440): grid jadi 3 kolom (revisi: layar besar).
   1536 = default 2xl Tailwind yang di-override proyek ini menjadi 1440,
   sehingga ambang dipakai 1440 agar konsisten dengan skala situs.
   Harus selaras dengan matchMedia di sustainability-reports.js. */
@media (min-width: 1440px) {
   .sr-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 48px 40px;
   }

   .sr-card-cover {
      width: 120px;
   }

   .sr-card-title {
      font-size: 18px;
   }

   .sr-desc {
      font-size: 18px;
   }
}

@media (min-width: 1920px) {
   .sr-section {
      padding: 80px 56px 96px;
   }

   .sr-title {
      font-size: 38px;
   }

   .sr-desc {
      font-size: 22px;
   }

   .sr-card-cover {
      width: 132px;
   }

   .sr-card-title {
      font-size: 20px;
   }

   .sr-card-download,
   .sr-search-input,
   .sr-select-select {
      font-size: 16px;
   }
}

@media (min-width: 2560px) {
   .sr-section {
      padding: 96px 64px 112px;
   }

   .sr-title {
      font-size: 40px;
   }

   .sr-desc {
      font-size: 28px;
   }

   .sr-card-cover {
      width: 148px;
   }

   .sr-card-title {
      font-size: 24px;
   }
}

/* ---------- Aksesibilitas: hormati preferensi reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
   .sr-search-input,
   .sr-select-select,
   .sr-card-download,
   .sr-page-btn {
      transition: none;
   }
}