/* ============================================================
   CARDS — Tour, Destination, Activity, Testimonial, Why
   /assets/css/cards.css
============================================================ */

/* ── TOUR CARDS ── */
.tours-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.625rem; }

.tour-card {
  background: #fff;
  border-radius: var(--r-xl, 24px);
  overflow: hidden;
  border: 1px solid var(--border, #E2E8F0);
  display: flex;
  flex-direction: column;
  transition: transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
.tour-card:hover { transform: translateY(-7px); box-shadow: 0 20px 48px rgba(10,79,110,.16), 0 8px 20px rgba(0,0,0,.08); }

/* Image */
.tour-card-image,
.tour-card-img {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(135deg, var(--ocean,#0A4F6E), var(--flame,#E8832A));
  flex-shrink: 0;
}
.tour-card-image img,
.tour-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.tour-card:hover .tour-card-image img,
.tour-card:hover .tour-card-img img { transform: scale(1.07); }

/* Placeholder */
.tc-placeholder {
  width: 100%; height: 100%; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
}
.tc-placeholder svg  { opacity: .35; }
.tc-placeholder span { font-size: .72rem; color: rgba(255,255,255,.4); text-align: center; padding: 0 1rem; }

/* Badges */
.tour-card-badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2; }

/* Wishlist */
.tour-wishlist {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--mist,#94A3B8); transition: all .15s; backdrop-filter: blur(8px);
}
.tour-wishlist:hover,
.tour-wishlist.wished { color: #e11d48; transform: scale(1.1); }
.tour-wishlist.wished svg { fill: #e11d48; }
.tour-wishlist:focus-visible { outline: 2px solid var(--ocean,#0A4F6E); outline-offset: 2px; }

/* Body */
.tour-card-body {
  padding: 1.25rem 1.375rem; flex: 1;
  display: flex; flex-direction: column; gap: .45rem;
}
.tour-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tc-region,
.tour-card-location { display: flex; align-items: center; gap: .25rem; font-size: .71rem; color: var(--mist,#94A3B8); }
.tc-category,
.tour-card-category { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--flame,#E8832A); background: rgba(232,131,42,.09); padding: .18em .55em; border-radius: 9999px; }
.tour-card-title { font-size: .95rem; font-weight: 700; color: var(--navy,#111827); line-height: 1.35; flex: 1; }
.tour-card-title a { color: inherit; transition: color .15s; }
.tour-card-title a:hover { color: var(--ocean,#0A4F6E); }

/* Rating */
.tc-rating { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--steel,#475569); }
.tc-stars   { display: flex; align-items: center; gap: .1rem; }
.tc-rating-avg   { font-weight: 700; color: var(--navy,#111827); }
.tc-rating-count { color: var(--mist,#94A3B8); }

/* Specs */
.tc-specs,
.tour-card-details { display: flex; flex-wrap: wrap; gap: .35rem .875rem; }
.tc-spec,
.tour-card-details span { display: flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--steel,#475569); }

/* Footer */
.tour-card-footer,
.tour-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: .925rem 1.375rem; background: var(--surface,#F8FAFC);
  border-top: 1px solid var(--border,#E2E8F0); gap: .75rem; flex-wrap: wrap;
}
.tc-price,
.tour-card-price { display: flex; flex-direction: column; gap: .06rem; }
.tc-price-orig,
.price-original  { font-size: .71rem; text-decoration: line-through; color: var(--mist,#94A3B8); display: block; }
.tc-price-curr,
.price-current   { font-size: 1.2rem; font-weight: 800; color: var(--ocean,#0A4F6E); line-height: 1.1; display: block; }
.tc-price-note,
.price-note      { font-size: .67rem; color: var(--mist,#94A3B8); }
.tc-price-req,
.price-on-request { font-size: .9rem; font-weight: 600; color: var(--flame,#E8832A); }

/* ── DESTINATION CARDS ── */
.destinations-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr;
  gap: 1rem;
}
.destination-card {
  position: relative; border-radius: var(--r-xl,24px); overflow: hidden;
  aspect-ratio: 3/4; display: block; cursor: pointer;
  background: linear-gradient(135deg, var(--ocean,#0A4F6E), var(--ocean-d,#063348));
}
.destination-card-inner { position: absolute; inset: 0; width: 100%; height: 100%; }
.destination-card-inner img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.destination-card:hover .destination-card-inner img { transform: scale(1.07); }
.destination-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,22,40,.9) 0%, rgba(10,22,40,.08) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.375rem;
  transition: background .25s;
}
.destination-card:hover .destination-card-overlay {
  background: linear-gradient(0deg, rgba(10,79,110,.93) 0%, rgba(10,79,110,.28) 65%, transparent 100%);
}
.destination-card-flag { font-size: 1.25rem; margin-bottom: .2rem; line-height: 1; }
.destination-card-name { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.destination-card-count{ font-size: .73rem; color: rgba(255,255,255,.75); }
.destination-card-desc { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .2rem; }

/* ── ACTIVITY CARDS ── */
.activities-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.activity-card {
  position: relative; border-radius: var(--r-xl,24px); overflow: hidden;
  aspect-ratio: 4/3; cursor: pointer;
  background: linear-gradient(135deg, var(--ocean,#0A4F6E), var(--ocean-d,#063348));
}
.activity-card img,
.activity-card-bg { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.activity-card:hover img,
.activity-card:hover .activity-card-bg { transform: scale(1.07); }
.activity-card-overlay,
.activity-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,22,40,.9) 0%, rgba(10,22,40,.1) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.375rem;
}
.activity-icon    { font-size: 2rem; line-height: 1; margin-bottom: .4rem; }
.activity-name    { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .3rem; }
.activity-excerpt,
.activity-desc    { font-size: .78rem; color: rgba(255,255,255,.75); line-height: 1.55; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.activity-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  padding: .35rem .9rem; border-radius: 9999px; font-size: .73rem; font-weight: 600;
  transition: background .15s; width: fit-content; text-decoration: none;
}
.activity-btn:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ── TESTIMONIAL CARDS ── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.625rem; }
.testimonial-card {
  background: #fff; border-radius: var(--r-xl,24px); padding: 1.875rem;
  border: 1px solid var(--border,#E2E8F0); position: relative; overflow: hidden;
  transition: transform .24s, box-shadow .24s;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.testimonial-card::before {
  content: '\201C'; position: absolute; top: .25rem; right: 1.25rem;
  font-family: var(--serif,'Playfair Display',serif);
  font-size: 5.5rem; color: var(--border,#E2E8F0); line-height: 1; z-index: 0;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.tc-stars-row  { display: flex; gap: .15rem; margin-bottom: .875rem; }
.testimonial-text { font-size: .9rem; line-height: 1.8; color: var(--steel,#475569); font-style: italic; margin-bottom: 1.375rem; position: relative; z-index: 1; }
.testimonial-author { display: flex; align-items: center; gap: .875rem; padding-top: 1.1rem; border-top: 1px solid var(--border,#E2E8F0); }
.testimonial-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border,#E2E8F0); }
.tca-initials {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ocean,#0A4F6E), var(--flame,#E8832A));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.1rem;
}
.tca-info { flex: 1; min-width: 0; }
.testimonial-name    { font-weight: 700; font-size: .9rem; color: var(--navy,#111827); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tc-verified { background: #059669; color: #fff; font-size: .6rem; padding: .1em .45em; border-radius: 4px; font-weight: 600; }
.testimonial-location { font-size: .75rem; color: var(--mist,#94A3B8); margin-top: .1rem; }
.tc-tour-label { font-size: .73rem; color: var(--mist,#94A3B8); margin-top: .15rem; }
.tc-date { margin-left: auto; font-size: .7rem; color: var(--border,#E2E8F0); align-self: flex-start; white-space: nowrap; }

/* ── WHY CARDS ── */
.why-card {
  background: #fff; border-radius: var(--r-xl,24px); padding: 1.875rem;
  border: 1px solid var(--border,#E2E8F0);
  transition: all .24s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.why-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ocean,#0A4F6E), var(--flame,#E8832A));
  transform: scaleX(0); transform-origin: left; transition: transform .24s;
}
.why-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.1); }
.why-card:hover::after { transform: scaleX(1); }
.why-icon {
  width: 54px; height: 54px; border-radius: var(--r-lg,16px); margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(10,79,110,.07), rgba(232,131,42,.06));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; transition: all .24s;
}
.why-card:hover .why-icon { background: linear-gradient(135deg, var(--ocean,#0A4F6E), var(--flame,#E8832A)); }
.why-title { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: var(--navy,#111827); }
.why-desc  { font-size: .85rem; color: var(--steel,#475569); line-height: 1.72; }

/* ── GALLERY ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .875rem; }
.gallery-item { position: relative; border-radius: var(--r-lg,16px); overflow: hidden; cursor: pointer; background: var(--surface,#F8FAFC); aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; display: block; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay { position: absolute; inset: 0; background: rgba(10,22,40,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-item:focus-visible { outline: 3px solid var(--ocean,#0A4F6E); outline-offset: 2px; }
.gallery-zoom { color: #fff; }

/* ── CARDS RESPONSIVE ── */
@media (max-width: 1024px) {
  .tours-grid        { grid-template-columns: repeat(2,1fr); }
  .destinations-grid { grid-template-columns: repeat(3,1fr); }
  .testimonials-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .tours-grid           { grid-template-columns: 1fr !important; }
  .destinations-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .activities-grid      { grid-template-columns: repeat(2,1fr) !important; }
  .testimonials-grid    { grid-template-columns: 1fr !important; }
  .gallery-grid         { grid-template-columns: repeat(2,1fr) !important; }
  .tour-card-footer,
  .tour-card-foot       { }
}
@media (max-width: 480px) {
  .destinations-grid    { grid-template-columns: 1fr 1fr !important; }
  .activities-grid      { grid-template-columns: 1fr !important; }
  .tour-card-footer,
  .tour-card-foot       { flex-direction: column; align-items: flex-start; }
  .tour-card-footer .btn,
  .tour-card-foot .btn  { width: 100%; }
}