/**
 * Art Revisionist Content Styles
 * Floating image layout for single posts and custom post types
 */

/* ==========================================================================
   FLOATING IMAGE LAYOUT
   ========================================================================== */

/* Container with clearfix */
.ar-float-images {
  position: relative;
}

.ar-float-images::after {
  content: "";
  display: table;
  clear: both;
}

/* Featured Image - Always Float Right */
.ar-featured-image {
  float: right;
  margin: 0 0 var(--ar-space-xl) var(--ar-space-xl);
  max-width: 400px;
  width: 100%;
}

.ar-featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--ar-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: block;
}

/* Additional Images - Alternating Float */
.ar-image-wrapper {
  margin-bottom: var(--ar-space-lg);
}

.ar-image-wrapper.ar-float-left {
  float: left;
  margin: 0 var(--ar-space-xl) var(--ar-space-lg) 0;
  max-width: 350px;
  width: 100%;
  clear: left;
}

.ar-image-wrapper.ar-float-right {
  float: right;
  margin: 0 0 var(--ar-space-lg) var(--ar-space-xl);
  max-width: 350px;
  width: 100%;
  clear: right;
}

.ar-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: var(--ar-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: block;
}

/* Image captions if present */
.ar-image-wrapper figcaption,
.ar-featured-image figcaption {
  margin-top: var(--ar-space-sm);
  font-size: var(--ar-text-sm);
  color: var(--ar-text-light);
  font-style: italic;
  text-align: center;
}

/* WordPress default figure wrapper */
.ar-float-images figure.ar-image-wrapper,
.ar-float-images figure.ar-featured-image {
  margin: 0;
}

/* ==========================================================================
   CONTENT TYPOGRAPHY WITH FLOATING IMAGES
   ========================================================================== */

/* Ensure paragraphs flow around images */
.ar-single-post__content p {
  margin: 0 0 var(--ar-space-md) 0;
}

/* Content headings - styled to match site design language */
.ar-single-post__content h2 {
  clear: both;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--ar-font-heading);
  font-size: var(--ar-text-lg);
  font-weight: var(--ar-weight-semibold);
  color: var(--ar-primary);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ar-border);
}

.ar-single-post__content h2::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ar-accent);
  margin-bottom: 0.6rem;
}

.ar-single-post__content h3 {
  clear: both;
  margin-top: 2rem;
  margin-bottom: var(--ar-space-md);
  font-family: var(--ar-font-heading);
  font-size: var(--ar-text-base);
  font-weight: var(--ar-weight-semibold);
  color: var(--ar-primary);
  letter-spacing: 0.05em;
}

.ar-single-post__content h4 {
  clear: both;
  margin-top: var(--ar-space-xl);
  margin-bottom: var(--ar-space-md);
  font-family: var(--ar-font-heading);
  font-size: var(--ar-text-sm);
  font-weight: var(--ar-weight-semibold);
  color: var(--ar-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Lists */
.ar-single-post__content ul,
.ar-single-post__content ol {
  margin: 0 0 var(--ar-space-md) 0;
  padding-left: var(--ar-space-xl);
}

.ar-single-post__content li {
  margin-bottom: var(--ar-space-sm);
}

/* Blockquotes */
.ar-single-post__content blockquote {
  margin: var(--ar-space-lg) 0;
  padding: var(--ar-space-md) var(--ar-space-lg);
  border-left: 4px solid var(--ar-primary);
  background: rgba(0, 0, 0, 0.02);
  font-style: italic;
  clear: both;
}

/* ==========================================================================
   RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Tablet (portrait) */
@media (max-width: 900px) {
  .ar-featured-image,
  .ar-image-wrapper.ar-float-left,
  .ar-image-wrapper.ar-float-right {
    max-width: 300px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Stack all images on mobile */
  .ar-featured-image,
  .ar-image-wrapper.ar-float-left,
  .ar-image-wrapper.ar-float-right {
    float: none !important;
    margin: 0 auto var(--ar-space-lg) auto !important;
    max-width: 100% !important;
    clear: both !important;
  }

  .ar-featured-image img,
  .ar-image-wrapper img {
    margin: 0 auto;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .ar-featured-image,
  .ar-image-wrapper {
    margin-bottom: var(--ar-space-md) !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .ar-featured-image,
  .ar-image-wrapper.ar-float-left,
  .ar-image-wrapper.ar-float-right {
    float: none !important;
    margin: var(--ar-space-md) 0 !important;
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  .ar-image-wrapper img,
  .ar-featured-image img {
    box-shadow: none;
  }
}

/* ==========================================================================
   COMPATIBILITY & FIXES
   ========================================================================== */

/* Clear floats before footer elements */
.ar-single-post__tags,
.ar-post-navigation {
  clear: both;
  margin-top: var(--ar-space-xl);
}

/* Ensure content doesn't collapse if only images */
.ar-single-post__content:empty {
  min-height: 100px;
}

/* Fix for WordPress blocks if they exist */
.ar-single-post__content .wp-block-image {
  margin: 0;
}

.ar-single-post__content .wp-block-image img {
  margin: 0;
}