/* ══════════════════════════════════════════════════════════════════
   Attraction Tiles — Sights, Beaches & Trails Collection Pages
   Used on: /[island]/beaches, /[island]/sights, /[island]/hiking-trails
   ══════════════════════════════════════════════════════════════════ */

/* ─── Card wrapper ──────────────────────────────────────────────── */
.atile-block {
  padding: 4px 0 !important;
  overflow: visible !important;
}

.atile-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 3px 16px rgba(0,0,0,0.10);
  overflow: hidden;
  margin: 0 0 28px 0 !important;
  border: 1px solid #e8eaed;
  min-height: 240px;
}

/* Image on the right, content on the left for alternating tiles */
.atile-inner--flip {
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/* ─── Image column ──────────────────────────────────────────────── */
.atile-img-col {
  -webkit-flex: 0 0 280px !important;
  -ms-flex: 0 0 280px !important;
  flex: 0 0 280px !important;
  width: 280px !important;
  min-height: 240px !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden;
  background: #e8eaed;
}

/* Type B pages nest the link inside nav > div — propagate height down the chain */
.atile-img-col > nav,
.atile-img-col > nav > div {
  display: block;
  height: 100%;
}

.atile-img-col a.top10-img-link {
  display: block;
  height: 100%;
  border-radius: 0 !important;
  overflow: hidden;
}

/* Hide the caption paragraph that Type B pages put inside the image link */
.atile-img-col a.top10-img-link > p {
  display: none !important;
}

.atile-img-col a.top10-img-link picture {
  display: block;
  height: 100%;
}

.atile-img-col a.top10-img-link img {
  width: 100% !important;
  height: 100% !important;
  min-height: 240px;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: none !important;
  display: block;
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
}

.atile-img-col:hover a.top10-img-link img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* ─── Content column ────────────────────────────────────────────── */
.atile-content {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 22px 26px 18px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}

/* Attraction name */
.atile-content > h3 {
  font-size: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 3px !important;
  line-height: 1.2;
}

/* Region label */
.atile-content > h5 {
  font-size: 12px !important;
  color: #888 !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Rating badge */
.atile-content > h6 {
  font-size: 13px !important;
  color: #e67e22 !important;
  margin: 0 0 13px !important;
  font-weight: 700 !important;
}

/* Description text */
.atile-content > p {
  font-size: 15px !important;
  color: #444 !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

/* ─── Info box ──────────────────────────────────────────────────── */
.atile-info-box {
  font-size: 13px !important;
  margin: 6px 0 14px !important;
  border-radius: 8px !important;
  overflow: hidden;
  border: 1px solid #e8eaed !important;
  background: #f8f9fa !important;
}

.atile-info-box .row-fluid {
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
}

.atile-info-box .row-fluid:last-child {
  border-bottom: none;
}

/* Remove the inline border from the info box inner div */
.atile-info-box > div[style*="dotted"],
.atile-info-box > div[style*="border"] {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ─── Action bar ────────────────────────────────────────────────── */
.atile-actions {
  margin-top: auto;
  padding-top: 14px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-top: 1px solid #f0f2f4;
}

/* View Details button */
.atile-view-btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: #2e86de;
  color: #fff !important;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  border: none;
  letter-spacing: 0.01em;
}

.atile-view-btn:hover {
  background: #1a6cbf;
  color: #fff !important;
  text-decoration: none !important;
}

/* ─── Save button (positioned on image) ─────────────────────────── */
/* The .hg-card-save styles from itinerary.css handle the save button  */
/* We just ensure the image col is position:relative (handled in JS)   */

/* ─── Number badge ──────────────────────────────────────────────── */
.atile-rank {
  display: inline-block;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  letter-spacing: 0.03em;
}

/* ─── Responsive: tablet ────────────────────────────────────────── */
@media only screen and (max-width: 900px) {
  .atile-img-col {
    -webkit-flex: 0 0 220px !important;
    -ms-flex: 0 0 220px !important;
    flex: 0 0 220px !important;
    width: 220px !important;
  }
  .atile-content {
    padding: 18px 20px 16px;
  }
}

/* ─── Responsive: mobile (stack vertically) ─────────────────────── */
@media only screen and (max-width: 640px) {
  .atile-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 0;
  }

  .atile-img-col {
    -webkit-flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 200px !important;
    height: 200px;
  }

  .atile-img-col a.top10-img-link img {
    height: 200px !important;
    min-height: 200px;
  }

  .atile-content {
    padding: 16px 18px 14px;
  }

  .atile-content > h3 {
    font-size: 19px !important;
  }

  .atile-actions {
    gap: 8px;
  }

  .atile-view-btn {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* ─── Print: show as simple list ───────────────────────────────── */
@media print {
  .atile-inner {
    box-shadow: none;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
  .atile-actions {
    display: none;
  }
}