/* I Found... page-specific styles - layered on top of wrapt-theme.css */

/* Sticky footer: keep footer pinned to the bottom of the viewport on short
   pages, while still pushing down (and letting the gradient background
   grow with it) on taller pages. No fixed height on html/body here -
   that would cap the background to one viewport and cut the gradient off
   partway down on any page taller than the screen. min-height is enough
   for the sticky-footer effect. */
body.wrapt-theme {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
#app {
  flex: 1 0 auto;
}
.wrapt-footer {
  flex-shrink: 0;
}

.if-back-link {
  display: inline-block;
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  color: var(--wrapt-blue);
  text-decoration: none;
  font-weight: 600;
}

/* Tile grid - wider container + horizontal (photo-left, name-right) cards
   so each tile uses more lateral space instead of a tall narrow stack. */
.if-tile-grid {
  max-width: 1200px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.if-tile-grid .if-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.if-tile-photo {
  width: 110px;
  height: 90px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.if-tile h2 {
  font-size: 1.05rem;
  padding: 0 1rem;
  margin: 0;
}

/* Group / referral photo styling inside wrapt-section-with-photo.
   object-position biased toward the top so tall/portrait animal photos
   (e.g. a kangaroo climbing a tree) keep the head/face in frame instead
   of centering on the torso. */
.wrapt-section-with-photo img {
  border-radius: var(--wrapt-radius);
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 20%;
}

/* Heading between the group photo/safety block and the situation cards */
.if-situation-heading {
  max-width: 900px;
  margin: 1.75rem auto 0.75rem;
  padding: 0 1rem;
  color: var(--wrapt-blue);
  font-size: 1.15rem;
}

/* Situation cards - styled to read as tappable buttons rather than static
   info tiles: left accent bar, arrow affordance, lift + shadow on hover,
   press-down feedback on click/tap. */
.if-situation-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-left: 5px solid var(--wrapt-blue);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  padding-right: 2.75rem;
}
.if-situation-card::after {
  content: "\2192"; /* right arrow */
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--wrapt-blue);
  transition: transform 0.15s ease;
}
.if-situation-card:hover,
.if-situation-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(69, 110, 236, 0.18);
  border-left-color: var(--wrapt-blue-light);
  outline: none;
}
.if-situation-card:hover::after {
  transform: translateY(-50%) translateX(4px);
}
.if-situation-card:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 3px 10px rgba(69, 110, 236, 0.15);
}
.if-situation-card h2 {
  font-size: 1.1rem;
  color: var(--wrapt-blue);
}
.if-situation-card p {
  color: var(--wrapt-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0;
}

/* Safety gate (excluded species acknowledgement) */
.if-safety-gate {
  text-align: center;
  border: 2px solid #d9534f;
  background: #fff5f4;
}
.if-gate-photo {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--wrapt-radius);
  margin-bottom: 1rem;
}
.if-safety-gate h2 {
  color: #b3261e;
  margin-top: 0;
}
.if-btn-danger {
  background: #b3261e;
  color: #fff;
}
.if-btn-danger:hover {
  background: #8f1e18;
  transform: scale(1.05);
}

/* Notices reuse wrapt-notice but this content is a safety warning, not the
   default yellow "info" tone - override to a red/danger tone for clarity. */
.wrapt-notice {
  background: #fdecea;
  border-left-color: #d9534f;
  color: #7a1f1a;
}

.if-donts-heading {
  color: #b3261e;
}

/* Referral list */
.if-referral-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.if-referral-card {
  background: #fafbff;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Channels (what next) */
.if-channels {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eee;
  display: grid;
  gap: 0.75rem;
}
.if-channels h2 {
  color: var(--wrapt-blue);
  font-size: 1.05rem;
  margin: 0;
}
.if-channels .wrapt-btn {
  justify-self: start;
}

/* Photo credit note */
.if-photo-credit {
  text-align: center;
  color: var(--wrapt-text-muted);
  font-size: 0.75rem;
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}