/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* -----------------------------
   Containers (mobile-first)
   - single column by default
-------------------------------*/
.portfolio-ingredients,
.portfolio-accompagnements,
.related-portfolio {
  display: grid;
  grid-template-columns: 1fr;   /* single column on small screens */
  gap: 12px;
  margin: 20px 0;
}

/* -----------------------------
   Card: keep horizontal layout
   - image on the left, text on the right
-------------------------------*/
.portfolio-ingredient,
.portfolio-accompagnement,
.related-portfolio .portfolio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
  /* Prevent inner items from forcing card to grow beyond container */
  min-height: 72px;
  overflow: hidden;
}

/* subtle hover / focus effect without layout jump */
.portfolio-ingredient:hover,
.portfolio-accompagnement:hover,
.related-portfolio .portfolio-item:hover,
.portfolio-ingredient:focus-within,
.portfolio-accompagnement:focus-within,
.related-portfolio .portfolio-item:focus-within {
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
  border-color: #cfcfcf;
  transform: translateY(-2px);
}

/* -----------------------------
   Thumbnail (fixed size)
   - keep it fixed so text stays on the right
-------------------------------*/
.portfolio-ingredient img,
.portfolio-accompagnement img,
.related-portfolio .portfolio-thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 60px; /* do not shrink below 60px */
}

/* -----------------------------
   Info / Title
   - allow text to take remaining space
   - prevent overflow from breaking layout
-------------------------------*/
.portfolio-ingredient .portfolio-info,
.portfolio-accompagnement .portfolio-info,
.related-portfolio .portfolio-info {
  flex: 1 1 auto;
  min-width: 0;              /* IMPORTANT: allows text truncation inside flexbox */
}

.portfolio-ingredient p,
.portfolio-accompagnement p,
.related-portfolio .portfolio-info h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  color: #222;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* make links accessible and tidy */
.portfolio-ingredient a,
.portfolio-accompagnement a,
.related-portfolio .portfolio-info a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.portfolio-ingredient a:hover,
.portfolio-accompagnement a:hover,
.related-portfolio .portfolio-info a:hover {
  color: #0073aa; /* WP blue */
}

/* -----------------------------
   Responsive grid columns
   - only create columns when each card has enough width
-------------------------------*/
/* Tablet and above: create flexible columns, but ensure each card stays wide enough */
@media (min-width: 768px) {
  .portfolio-ingredients,
  .portfolio-accompagnements,
  .related-portfolio {
    /* auto-fit maintains as many columns as fit, each at least 320px */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }
}

/* Large desktop: allow more columns if space permits */
@media (min-width: 1200px) {
  .portfolio-ingredients,
  .portfolio-accompagnements,
  .related-portfolio {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
  }
}

/* -----------------------------
   Small devices tweaks
   - keep images small and readable
-------------------------------*/
@media (max-width: 480px) {
  .portfolio-ingredient img,
  .portfolio-accompagnement img,
  .related-portfolio .portfolio-thumb img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }

  .portfolio-ingredient,
  .portfolio-accompagnement,
  .related-portfolio .portfolio-item {
    padding: 10px 12px;
  }

  .portfolio-ingredient p,
  .portfolio-accompagnement p,
  .related-portfolio .portfolio-info h3 {
    font-size: 14px;
  }
}

/* -----------------------------
   Optional: small utility to limit very long titles
-------------------------------*/
.related-portfolio .portfolio-info h3,
.portfolio-ingredient p,
.portfolio-accompagnement p {
  /* show up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}