/* 
=================================================================
HUGOCIB - TIPS & TOPS SECTION (REFACTORED)
=================================================================
Box-based layout for travel tips with alternating left/right positioning
*/

/* =================================================================
   CSS VARIABLES - Centralized Control
   ================================================================= */
:root {
  /* Tips & Tops Dimensions - Modify these values to control all sizes */
  --tips-image-size: 350px;        /* Square images width/height */
  --tips-border-radius: 12px;      /* Image border radius */
  
  /* Responsive Breakpoints - Auto-applied on different screen sizes */
  --tips-image-size-tablet: 200px;
  --tips-image-size-mobile: 180px;
}

/*
USAGE: To change Tips & Tops sizes globally, modify the variables above:
- For larger images: change --tips-image-size to 300px
- For spacing/typography: modify variables in base.css
- For rounded corners: change --tips-border-radius to 20px

Typography and spacing now controlled by global variables in base.css:
- --content-gap: spacing between text and image
- --font-size-content-title: for tip titles and travel steps
- --font-size-content-text: for descriptions and step content
*/

/* =================================================================
   TIP/TOP BOX LAYOUT
   ================================================================= */

/* Individual tip/top box */
.tip-top-box {
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  background: transparent;
  padding: var(--content-gap) 0;
  margin-bottom: var(--content-gap);
  transition: all 0.3s ease;
}

/* Hover effect for interactivity */
.tip-top-box:hover {
  transform: translateY(-2px);
}

/* =================================================================
   ALTERNATING LAYOUT PATTERN
   ================================================================= */

/* Default layout: text left, image right */
.tip-top-box .tip-content {
  flex: 1;
  order: 1;
}

.tip-top-box .tip-image {
  flex: 0 0 var(--tips-image-size);
  order: 2;
}

/* Reverse layout for alternating items */
.tip-top-box.reverse .tip-content {
  flex: 1;
  order: 2;
}

.tip-top-box.reverse .tip-image {
  flex: 0 0 var(--tips-image-size);
  order: 1;
}

/* =================================================================
   TIP/TOP CONTENT STYLING
   ================================================================= */

/* Text content container */
.tip-content {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-small);
}

/* Tip title styling */
.tip-title {
  color: var(--text-primary);
  font-family: var(--font-headings);
  font-size: var(--font-size-content-title);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}

/* Tip description styling */
.tip-description {
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-content-text);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  margin: 0;
  transition: color 0.3s ease;
}

/* =================================================================
   IMAGE STYLING
   ================================================================= */

/* Image container */
.tip-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--tips-border-radius);
  width: var(--tips-image-size);
  height: var(--tips-image-size);
  aspect-ratio: 1 / 1; /* keep images square */
  background: #f0f0f0;
  flex-shrink: 0;
}

/* Square image styling */
.tip-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tip-top-box:hover .tip-image img {
  transform: scale(1.05);
}

/* =================================================================
   RESPONSIVE TIPS & TOPS
   ================================================================= */

/* Tablet layout */
@media (max-width: 768px) {
  .tip-top-box {
    flex-direction: column;
    text-align: center;
    padding: var(--content-gap-small) 0;
    gap: var(--content-gap-small);
  }
  
  /* Reset order for mobile - always image on top */
  .tip-top-box .tip-content,
  .tip-top-box.reverse .tip-content {
    order: 2;
  }
  
  .tip-top-box .tip-image,
  .tip-top-box.reverse .tip-image {
    order: 1;
    width: var(--tips-image-size-tablet);
    max-width: 90%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
}

/* Mobile layout */
@media (max-width: 480px) {
  .tip-top-box {
    padding: var(--content-gap-small) 0;
    margin-bottom: var(--content-gap-small);
  }
  
  .tip-image {
    width: var(--tips-image-size-mobile);
    aspect-ratio: 1 / 1;
  }
}

/* =================================================================
   DARK MODE SUPPORT (Now handled by global CSS variables)
   ================================================================= */

/* 
Dark mode styling is now automatically handled by the global CSS variables
in base.css. Colors will change based on the theme without manual overrides.
The --text-primary and --text-secondary variables handle theme switching.
*/