/* =========================================================
   TAMMIA — halaman Shop by Brand dan Shop by Category
   CSS Injector "tammia_redesign_katbrand_page", Request path:
     /brands
     /shop-by-category

   Susunannya: hero, konten, testimoni, footer.
   Hero ditaruh di header view masing-masing supaya teksnya bisa diubah
   admin lewat Views UI, bukan hardcode di CSS.
   Kartu kategori memakai view kategori_showcase yang sama dengan
   halaman depan, jadi bentuk kartunya otomatis sama.

   CATATAN PENTING: header Views defaultnya memakai format Basic HTML
   yang membuang tag <section>, <div>, <h1> beserta atributnya. Hero
   tidak akan muncul kalau formatnya tidak diganti ke Full HTML.
   ========================================================= */

/* Judul halaman bawaan Drupal disembunyikan, hero sudah punya h1 */
body #block-tammia-theme-page-title { display: none !important; }
body #block-tammia-theme-breadcrumbs { margin-bottom: 0; }

/* ---------- Hero ----------
   Ditarik selebar layar. Induknya .container milik theme, jadi tanpa ini
   latarnya berhenti di 1320px. Cara yang sama dipakai di /about. */
body .tm-page-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(160deg, #faf9f7 0%, #fcf0f0 100%);
  padding: 84px 0 76px;
  margin-bottom: 64px;
  text-align: center;
}
body .tm-page-hero .container { max-width: 860px; }
body .tm-page-hero .hero-eyebrow {
  font-family: "Comfortaa", "Poppins", sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: #e11d25;
  margin: 0 0 18px; display: inline-block;
}
body .tm-page-hero h1.section-title,
body .tm-page-hero .section-title {
  font-family: "Comfortaa", "Poppins", sans-serif !important;
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  font-weight: 300 !important; line-height: 1.05 !important;
  letter-spacing: -.02em !important; color: #1a1a1a !important;
  text-transform: none !important; text-align: center !important;
  margin: 0 0 18px !important;
}
body .tm-page-hero .section-title em { font-style: normal; color: #e11d25; }
body .tm-page-hero .section-sub {
  color: #414042; font-size: 16px; max-width: 560px;
  margin: 0 auto; text-align: center;
}
@media (max-width: 575px) {
  body .tm-page-hero { padding: 56px 0 48px; margin-bottom: 40px; }
}

/* =========================================================
   SHOP BY BRAND — grid logo bergaris seperti .brand-grid template
   ========================================================= */
body .view-brand.view-display-id-page_1 .view-content,
body .page-brands .view-brand .view-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #e6e2dd;
  border: 1px solid #e6e2dd;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 80px;
}
body .view-brand.view-display-id-page_1 .views-view-responsive-grid,
body .view-brand.view-display-id-page_1 .views-view-responsive-grid__item,
body .view-brand.view-display-id-page_1 .views-view-responsive-grid__item-inner { display: contents; }
body .view-brand.view-display-id-page_1 .views-row,
body .view-brand.view-display-id-page_1 .views-field-field-logo {
  aspect-ratio: 5/3;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
/* Kotak brand tetap putih waktu di-hover, tanpa latar pink. Permintaan
   Aditya. transition background ikut dilepas karena tidak ada lagi yang
   dianimasikan; hover teks untuk brand tanpa logo diatur terpisah di
   injector base (.tm-brand-fallback a) dan tidak terpengaruh. */
body .view-brand.view-display-id-page_1 .views-field-field-logo a,
body .view-brand.view-display-id-page_1 .views-field-field-logo .field-content {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
/* Logo dikunci supaya selalu muat, sama seperti perbaikan di /about */
body .view-brand.view-display-id-page_1 img {
  max-width: 62% !important;
  max-height: 58% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}
@media (max-width: 1199px) { body .view-brand.view-display-id-page_1 .view-content { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { body .view-brand.view-display-id-page_1 .view-content { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { body .view-brand.view-display-id-page_1 .view-content { grid-template-columns: repeat(2, 1fr); margin-bottom: 48px; } }

/* =========================================================
   SHOP BY CATEGORY — kartu besar, bentuknya ikut halaman depan
   ========================================================= */
body .view-kategori-showcase.view-display-id-page_1 .tm-cat__grid { margin-bottom: 80px; }
@media (max-width: 575px) {
  body .view-kategori-showcase.view-display-id-page_1 .tm-cat__grid { margin-bottom: 48px; }
}

/* ---------- Testimoni di kedua halaman ---------- */
body #block-tammia-theme-testimonialkatbrand { display: block; padding-bottom: 100px; }
@media (max-width: 575px) {
  body #block-tammia-theme-testimonialkatbrand { padding-bottom: 60px; }
}