/* ===========================================================
   products.css — Kimple • Products page (UNIFICAT pentru toate seriile)
   =========================================================== */

/* ================= Variabile ================= */
:root {
  --ww-blue-1: #1fb6da;
  /* turcoaz deschis */
  --ww-blue-2: #0b6ea8;
  /* albastru puternic */
  --ww-blue-3: #075a88;
  /* albastru închis */
  --ww-text-dark: #0a2740;
  --ww-text: #1e3a55;
  --ww-white: #fff;

  --ww-shadow: 0 6px 18px rgba(2, 44, 77, .18);
  --ww-shadow-sm: 0 3px 10px rgba(2, 44, 77, .14);
  --ww-focus: #7cd1ff;

  --card-border: #e6edf5;
  --card-bg: #fff;
  --fig-bg: #f7fbff;

  --radius: 14px;
}

/* ================= Titlu categorie ================= */
.cat-title {
  text-align: center;
  letter-spacing: 1px;
  color: var(--ww-text-dark);
}

/* ================= Grid modele ================= */
.models-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 26px;
}

@media (max-width:1100px) {
  .models-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:760px) {
  .models-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:520px) {
  .models-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= Card model ================= */
.model-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(2, 44, 77, .05);
}

/* ===== Figura (identic Adventure) ===== */
.model-fig {
  position: relative;
  aspect-ratio: 3/4;
  /* baseline Adventure – folosește peste tot */
  background: var(--fig-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* fără padding */
}

.model-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* NU tăiem barca */
  margin: 0;
  padding: 0;
  border: 0;
}

/* ===== Săgeți (ascunse implicit; apar pe hover pe poză) ===== */
.m-prev,
.m-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, rgba(12, 109, 167, .95), rgba(27, 178, 217, .95));
  box-shadow: 0 6px 16px rgba(4, 44, 77, .22);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
  opacity: 0;
  pointer-events: none;
}

.model-fig:hover .m-prev,
.model-fig:hover .m-next {
  opacity: 1;
  pointer-events: auto;
}

.m-prev {
  left: 8px;
}

.m-next {
  right: 8px;
}

.m-prev:hover,
.m-next:hover {
  box-shadow: 0 8px 20px rgba(4, 44, 77, .28);
  filter: brightness(.98);
}

@media (max-width:980px) {

  .m-prev,
  .m-next {
    display: none;
  }
}

/* ===== Dots ===== */
.g-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.g-dots>button {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--ww-blue-2), #fff 75%);
  opacity: .6;
  transition: opacity .15s ease, transform .15s ease;
}

.g-dots>button.active {
  background: var(--ww-blue-2);
  opacity: 1;
  transform: scale(1.2);
}

/* ================= Nume model ================= */
.model-name {
  margin: 0;
  padding: 14px 14px 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ww-text-dark);
  text-align: center;
}

/* ================= Acțiuni (butoane) ================= */
.model-actions {
  margin-top: auto;
  padding: 10px 14px 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-gallery,
.btn-details {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s ease;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Buton Galerie (secundar) */
.btn-gallery {
  background: #eef6fc;
  color: var(--ww-blue-3);
  border: 1px solid rgba(11, 110, 168, .15);
}

.btn-gallery:hover:not(:disabled) {
  background: #e1eff9;
  color: var(--ww-blue-2);
  border-color: rgba(11, 110, 168, .25);
}

.btn-gallery:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Buton Detalii (primar) */
.btn-details {
  background: linear-gradient(135deg, var(--ww-blue-2), var(--ww-blue-1));
  color: #fff;
  border: 0;
  box-shadow: 0 4px 12px rgba(11, 110, 168, .25);
}

.btn-details:hover {
  box-shadow: 0 6px 16px rgba(11, 110, 168, .35);
  transform: translateY(-1px);
}

/* ================= LIGHTBOX ================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 39, 64, .95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.lightbox:not([hidden]):not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.lb-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transform: scale(.95);
  transition: transform .25s ease;
}

.lightbox:not([hidden]):not(.hidden) .lb-img {
  transform: scale(1);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}

.lb-close {
  top: 20px;
  right: 20px;
  font-size: 36px;
  width: 48px;
  height: 48px;
}

.lb-prev,
.lb-next {
  top: 50%;
  width: 60px;
  height: 60px;
  font-size: 48px;
  margin-top: -30px;
}

.lb-prev {
  left: 20px;
}

.lb-next {
  right: 20px;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  transform: scale(1.1);
  color: var(--ww-blue-1);
}

/* ================= MODAL DETALII ================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 39, 64, .6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.modal:not([hidden]):not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: #fff;
  width: min(900px, 92%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 40px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  transform: translateY(20px);
  transition: transform .3s ease;
}

.modal:not([hidden]):not(.hidden) .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 0;
  background: #f0f4f8;
  border-radius: 50%;
  font-size: 24px;
  color: #567;
  cursor: pointer;
  transition: background .2s;
}

.modal-close:hover {
  background: #e1e8f0;
  color: #000;
}

.modal-title {
  margin: 0 0 10px;
  font-size: 28px;
  color: var(--ww-text-dark);
}

.modal-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #456;
  margin-bottom: 24px;
}

.modal-specs {
  margin-bottom: 24px;
  background: #f7fbff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #eef5fa;
}

.modal-specs-title {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--ww-blue-3);
}

.modal-specs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}

.spec-item {
  font-size: 14px;
  color: #345;
  display: flex;
  align-items: baseline;
}

.spec-item::before {
  content: "•";
  color: var(--ww-blue-1);
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

.modal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

@media (max-width:700px) {
  .modal-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.modal-col h3 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ww-text-dark);
  border-bottom: 2px solid #eef3f8;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.modal-list li {
  font-size: 14px;
  color: #456;
  padding-left: 14px;
  position: relative;
}

.modal-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ww-blue-2);
  font-weight: bold;
  font-size: 12px;
  top: 2px;
}

.btn-ww24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: background .2s, transform .2s;
}

.btn-ww24:hover {
  background: #e65f00;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 106, 0, .25);
}

/* ================= HERO (Generic & Specific) ================= */
/* Base Hero Style (matches Adventure) */
.hero-adventure,
.hero-angler,
.hero-bass-s,
.hero-bass-ha,
.hero-bass-k,
.hero-bass-v,
.hero-bass-hunter,
.hero-boeing,
.hero-bowrider,
.hero-catch,
.hero-dolphin,
.hero-explorer,
.hero-fisherman,
.hero-hunter,
.hero-jon,
.hero-riverrunner,
.hero-searanger,
.hero-streamer,
.hero-trout,
.hero-voyager {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55));
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 16px;
}

.hero-content h1 {
  font-size: clamp(26px, 4vw, 44px);
  margin-bottom: 12px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.hero-content p {
  font-size: clamp(15px, 2vw, 20px);
  line-height: 1.6;
  color: #f0f4f8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* Specific Hero Backgrounds (optional override if not inline) */
/* .hero-adventure .hero-bg { background-image: url("/assets/img/hero/adventure-hero.jpg"); } */
/* .hero-angler .hero-bg { background-image: url("/assets/img/hero/angler-hero.jpg"); } */
/* ... others can be set inline in HTML or here ... */


/* ==== MOBILE LAYOUT FIXES (final override) ==== */

/* 1) Grila de carduri pe 2 coloane pe mobil */
@media (max-width: 640px) {
  .models-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* 1b) Pe telefoane foarte înguste, revine la 1 coloană */
@media (max-width: 380px) {
  .models-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2) Containerul de acțiuni din card = grid 2×1 */
@media (max-width: 900px) {
  .model-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px 10px 12px !important;
    margin-top: 6px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }
}

/* 3) Butoanele: lățime 100%, fără min-width care taie */
@media (max-width: 900px) {

  .model-actions .btn-gallery,
  .model-actions .btn-details {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }
}

/* 3b) Sub 380px, butoanele pe două rânduri pentru aerisire */
@media (max-width: 380px) {
  .model-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Mic polish: titlul să lase loc butoanelor pe două coloane */
@media (max-width: 900px) {
  .model-name {
    font-size: 14px !important;
    padding: 0 10px 6px !important;
    margin: 0 !important;
  }
}

/* ==== MOBILE buttons centering & full width (FINAL override) ==== */
@media (max-width: 900px) {

  /* containerul de acțiuni = grid 2x1 și întinde conținutul pe celulă */
  .model-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px 10px 12px !important;
    margin-top: 6px !important;
    justify-items: stretch !important;
    /* <-- important pentru grid */
    align-items: stretch !important;
  }

  /* butoanele: lățime 100%, fără min-width/max-width din stilurile vechi */
  .model-actions .btn-gallery,
  .model-actions .btn-details {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    /* ca să putem centra textul */
    justify-content: center !important;
    /* textul pe mijloc */
    align-items: center !important;
  }
}

/* pe telefoane foarte înguste punem butoanele unul sub altul */
@media (max-width: 380px) {
  .model-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Footer */
.kb-footer {
    background: #0b6393;
    color: #ffffff;
    padding: 2rem 0;
    text-align: center;
    margin-top: 0;
}

.kb-footer p {
    margin: 0;
    opacity: 0.9;
}