/* ===================================================================
 * Costin Category Cards — front styles
 * Two layouts share the same CSS file (loaded only when there's
 * any active content, see hookActionFrontControllerSetMedia).
 *
 *   1. .costin-cc           — Landscape grid (image full + title below)
 *   2. .costin-cc-tile-wrap — Wide tile (image left + title/desc + arrow)
 *
 * Brand: orange #eb4815; slate text #1a202c.
 * =================================================================== */

/* -------------------------------------------------------------------
 *  1) LANDSCAPE GRID
 * ------------------------------------------------------------------- */
.costin-cc {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 28px 20px 32px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0 0 16px 16px;
  position: relative;
  z-index: 10;
  clear: both;
  border-top: 2px solid #eb4815;
}

@media (max-width: 575px) {
  .costin-cc {
    padding: 18px 12px 22px;
    border-radius: 0 0 10px 10px;
  }
}

.costin-cc__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.costin-cc__card {
  flex: 0 0 calc((100% - (var(--cc-lg, 4) - 1) * 20px) / var(--cc-lg, 4));
  max-width: calc((100% - (var(--cc-lg, 4) - 1) * 20px) / var(--cc-lg, 4));
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px 14px 0 0;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 991px) {
  .costin-cc__card {
    flex-basis: calc((100% - (var(--cc-md, 3) - 1) * 20px) / var(--cc-md, 3));
    max-width:  calc((100% - (var(--cc-md, 3) - 1) * 20px) / var(--cc-md, 3));
  }
}

@media (max-width: 575px) {
  .costin-cc__grid { gap: 12px; }
  .costin-cc__card {
    flex-basis: calc((100% - (var(--cc-sm, 2) - 1) * 12px) / var(--cc-sm, 2));
    max-width:  calc((100% - (var(--cc-sm, 2) - 1) * 12px) / var(--cc-sm, 2));
  }
}

.costin-cc__card:hover,
.costin-cc__card:focus {
  transform: translateY(-3px) scale(1.012);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.05),
    0 10px 20px rgba(15, 23, 42, 0.07);
  text-decoration: none;
  color: inherit;
}

.costin-cc__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cc-aspect, 4 / 3);
  overflow: hidden;
  background: #fff;
}

.costin-cc__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.04);
}

@supports not (aspect-ratio: 1 / 1) {
  .costin-cc__image-wrap {
    padding-top: 75%; /* 4:3 fallback */
  }
  .costin-cc__image-wrap > picture,
  .costin-cc__image-wrap > img {
    position: absolute;
    inset: 0;
  }
}

.costin-cc__image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.costin-cc__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.costin-cc__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  background: #fff;
  border-top: 3px solid #eb4815;
}

.costin-cc__title {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  letter-spacing: 0.1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  position: relative;
  line-height: 1.3;
  min-height: 2.6em;
  /* Wrap whole words only — never split a word with a hyphen.
   * Long words that can't fit just push to the next line. */
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Suppress theme's h3 ornament + add our own short orange accent below the title */
.costin-cc__title::before {
  content: none !important;
  display: none !important;
}
.costin-cc__title::after {
  content: '' !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: 32px;
  height: 2px;
  background: #eb4815;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px;
}

.costin-cc__arrow {
  color: #eb4815;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.costin-cc__card:hover .costin-cc__arrow {
  transform: translateX(3px);
}

@media (max-width: 575px) {
  .costin-cc__arrow { font-size: 22px; }
}

/* -------------------------------------------------------------------
 *  2) WIDE TILE
 *  Image left, title + description middle, "Descoperă colecția"
 *  pill button right. Hardcoded 2/2/1 columns layout (desktop / tablet
 *  / mobile) per the brand requirement.
 * ------------------------------------------------------------------- */
.costin-cc-tile-wrap {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 15px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  text-align: center;
  border-top: 2px solid #eb4815;
  padding-top: 20px;
}

/* Tablet AND mobile: 1 wide tile per row. Otherwise the card aspect 10:3 makes
 * each tile too short (~111px tall at tablet 2-col widths) and content overflows. */
@media (max-width: 991px) {
  .costin-cc-tile-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 575px) {
  .costin-cc-tile-wrap {
    gap: 12px;
  }
}

.costin-cc-tile {
  display: grid;
  grid-template-columns: 35% 1fr;
  /* No locked card aspect: the IMAGE cell holds aspect-ratio 4:3 and the body
   * cell shrinks to fit alongside it. This avoids the previous bug where
   * minmax(180px, 40%) clamped the image cell to a non-4:3 ratio at narrow
   * widths, producing distorted/over-cropped photos. */
  background: #fff;
  border-radius: 14px;
  overflow: hidden;          /* clips both image AND body overflow */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.costin-cc-tile:hover,
.costin-cc-tile:focus {
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 12px 24px rgba(15, 23, 42, 0.08);
  text-decoration: none;
  color: inherit;
}

/* Image cell maintains its own 4:3 aspect-ratio (matches recommended source
 * size) so the photo always fills cleanly without distortion at any viewport
 * width. The card height auto-grows to match this cell. */
.costin-cc-tile__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f8f9fa;
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .costin-cc-tile__media {
    height: 0;
    padding-top: 75%; /* 4:3 fallback for old browsers */
    position: relative;
  }
  .costin-cc-tile__media > picture,
  .costin-cc-tile__media > img {
    position: absolute;
    inset: 0;
  }
}

.costin-cc-tile__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.costin-cc-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right column: smaller padding so the body always fits within the locked
 * card height (= image height). overflow:hidden is a safety net in case the
 * title is unusually long. */
.costin-cc-tile__body {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.costin-cc-tile__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.costin-cc-tile__title {
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: 0.1px;
  margin: 0 0 6px 0;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  line-height: 1.25;
  /* Whole-word wrapping only — no hyphen splits */
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: none;
  /* Hard-cap the title at 2 lines so it never pushes past the image. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* suppress theme h3 ornaments inside tile too */
.costin-cc-tile__title::before,
.costin-cc-tile__title::after {
  content: none !important;
  display: none !important;
}

.costin-cc-tile__desc {
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.costin-cc-tile__cta {
  background: #eb4815;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;          /* push to right inside the body column */
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}

.costin-cc-tile:hover .costin-cc-tile__cta {
  background: #c93b10;
  transform: translateX(2px);
}

/* Tablet 1-col tiles are wide enough — keep desktop's body padding + title size */

@media (max-width: 575px) {
  .costin-cc-tile {
    grid-template-columns: 40% 1fr;
    border-radius: 10px;
  }
  .costin-cc-tile__body {
    padding: 10px 10px 10px 12px;
  }
  .costin-cc-tile__cta {
    font-size: 13px;
    padding: 4px 9px;
  }
  .costin-cc-tile__title {
    margin: 0 0 4px 0;
  }
  .costin-cc-tile__desc {
    -webkit-line-clamp: 2;
  }
}