/*
Theme Name:   Astra Child
Theme URI:    https://twojastrona.pl
Description:  Child theme dla motywu Astra
Author:       Twoje Imię
Template:     astra
Version:      1.0.0
*/

/* -------------------------------------------------------------
   1) Styl kontenera wyszukiwarki
------------------------------------------------------------- */
.quick-search {
  padding: 2rem;
  margin: 3rem auto;
  max-width: 1200px;
  width: 100%;
  background: #f9fbfe;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* -------------------------------------------------------------
   2) Pole input
------------------------------------------------------------- */
#algolia-search-box input {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* -------------------------------------------------------------
   3) Pojedynczy wynik (hit-item)
------------------------------------------------------------- */
.hit-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  writing-mode: horizontal-tb;
  /*text-align: left;*/
  word-break: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.hit-item:hover {
  border-color: #5048e5;
  box-shadow: 0 8px 24px rgba(80, 72, 229, 0.12);
}

/* -------------------------------------------------------------
   4) Tytuł, opis i przycisk w wyniku
------------------------------------------------------------- */
.hit-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.3em !important;
  margin-bottom: 0.5rem;
}

.hit-excerpt {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
  flex-grow: 1;
}

.hit-button {
  margin-top: 1rem;
  align-self: flex-start;
  background-color: #5048e5;
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.hit-button:hover {
  background-color: #3b36c8;
}

/* -------------------------------------------------------------
   5) Reset inline’owych wymiarów wyników Algolia
------------------------------------------------------------- */
.quick-search  {
  width: auto !important;
  height: auto !important;
}
.ais-Hits-item {
  width: auto !important;
  height: auto !important;
  border: none !important;     /* bez ramki */
  box-shadow: none !important;  /* bez cienia */
  padding: 0.3rem !important;
  margin-left: 0 !important;
}

/* -------------------------------------------------------------
   6) GRID dla listy wyników Algolia – 4 | 3 | 1 kolumna
------------------------------------------------------------- */
/* Duże ekrany (≥1025px) – zawsze 4 kolumny */
@media (min-width: 1025px) {
  .quick-search .ais-Hits-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-gap: 3px !important;
    width: 100%;
    list-style: none;
    padding: 0;
    margin-top: 2rem;
    box-sizing: border-box;
  }
}

/* Średnie ekrany (769px–1024px) – 3 kolumny */
@media (min-width: 769px) and (max-width: 1024px) {
  .quick-search .ais-Hits-list {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: 3px !important;
  }
}

/* Małe ekrany (≤768px) – 1 kolumna */
@media (max-width: 768px) {
  .quick-search .ais-Hits-list {
    grid-template-columns: 1fr !important;
    grid-gap: 3px !important;
  }
}

/* -------------------------------------------------------------
   7) Styl facetów, paginacji i gwiazdki
------------------------------------------------------------- */
/* ukrycie lupy */
.ais-SearchBox-submit {
  display: none !important;
}

/* Linki w facetach, menu i paginacji */
.ais-Breadcrumb-link,
.ais-HierarchicalMenu-link,
.ais-Menu-link,
.ais-Pagination-link,
.ais-RatingMenu-link {
  color: #5048e5 !important;
  transition: color 0.2s ease-out;
}

.ais-Pagination-item--selected .ais-Pagination-link {
  color: #fff !important;
  background-color: #5048e5 !important;
  border-color: #5048e5 !important;
}

.ais-Pagination-list {
  padding-top: 15px !important;
}
  
/* -------------------------------------------------------------
   8) Komentarze w formie kart – TYLKO na stronie głównej
------------------------------------------------------------- */
body .comment-cards-grid.no-wpdiscuz {
  all: initial;
  all: revert-layer;
  display: grid !important;
  gap: 1.5rem !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  margin-top: 2rem !important;
  padding: 0 !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.2s ease !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-text {
  font-style: italic !important;
  font-size: 0.95rem !important;
  margin-bottom: 1rem !important;
  color: #374151 !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-avatar {
  border-radius: 50% !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-author {
  font-weight: 600 !important;
  color: #111827 !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-post a {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  text-decoration: none !important;
}

body .comment-cards-grid.no-wpdiscuz .comment-post a:hover {
  text-decoration: underline !important;
}