/**
 * Archive Layouts CSS
 * ==================
 * Styles for all new archive/taxonomy post layout options.
 * All layouts are AMP compatible — CSS-only, no JS dependencies.
 *
 * Layouts:
 *   1. Title Only       (.arc-layout-title)
 *   2. Big Thumbnail     (.arc-layout-bigthumb)
 *   3. Compact Row       (.arc-layout-compact)
 *   4. Card Minimal      (.arc-layout-card)
 *   5. Headline Stack    (.arc-layout-headline)
 */

/* =========================================================================
   SHARED RESETS
   ========================================================================= */
.arc-layout-title,
.arc-layout-bigthumb,
.arc-layout-compact,
.arc-layout-card,
.arc-layout-headline {
  display: block;
}

.arc-layout-title a,
.arc-layout-bigthumb a,
.arc-layout-compact a,
.arc-layout-card a,
.arc-layout-headline a {
  text-decoration: none;
  color: inherit;
}

.arc-layout-title .post-item,
.arc-layout-bigthumb .post-item,
.arc-layout-compact .post-item,
.arc-layout-card .post-item,
.arc-layout-headline .post-item {
  margin: 0;
}


/* =========================================================================
   1. TITLE ONLY — Minimal list, just title + meta
   ========================================================================= */
.arc-layout-title {
  max-width: 800px;
}

.arc-title-only {
  border-bottom: 1px solid #eee;
}

.arc-title-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  transition: background 0.15s ease;
}

.arc-title-link:hover {
  background: #f8f8f8;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 6px;
}

.arc-title-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ff027f;
  white-space: nowrap;
  min-width: 70px;
}

.arc-title-heading {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  color: #222;
}

.arc-title-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

.arc-title-author {
  color: #777;
}

/* Title Only: First item highlight */
.arc-layout-title .arc-title-only:first-child .arc-title-heading {
  font-size: 18px;
  font-weight: 600;
}


/* =========================================================================
   2. BIG THUMBNAIL — Large image card with text below
   ========================================================================= */
.arc-layout-bigthumb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.arc-big-thumb {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.arc-big-thumb:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.arc-big-link {
  display: block;
}

.arc-big-img {
  width: 100%;
  overflow: hidden;
}

.arc-big-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.arc-big-thumb:hover .arc-big-img img {
  transform: scale(1.03);
}

.arc-big-body {
  padding: 18px 20px 20px;
}

.arc-big-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ff027f;
  margin-bottom: 6px;
}

.arc-big-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.arc-big-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
  margin: 0 0 12px;
}

.arc-big-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #999;
}

.arc-big-avatar {
  display: inline-flex;
}

.arc-big-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.arc-big-author {
  color: #555;
  font-weight: 500;
}

/* Big Thumb: First item spans full width */
.arc-layout-bigthumb .arc-big-thumb:first-child {
  grid-column: 1 / -1;
}

.arc-layout-bigthumb .arc-big-thumb:first-child .arc-big-img {
  max-height: 400px;
}

.arc-layout-bigthumb .arc-big-thumb:first-child .arc-big-title {
  font-size: 24px;
}


/* =========================================================================
   3. COMPACT ROW — Small thumb + title in one line, ~80px height
   ========================================================================= */
.arc-layout-compact {
  max-width: 900px;
}

.arc-compact-row {
  border-bottom: 1px solid #f0f0f0;
}

.arc-compact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  min-height: 80px;
  transition: background 0.15s ease;
}

.arc-compact-link:hover {
  background: #fafafa;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
  border-radius: 8px;
}

.arc-compact-img {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f0f0;
}

.arc-compact-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arc-compact-no-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.arc-compact-placeholder {
  color: #ccc;
  font-size: 20px;
}

.arc-compact-body {
  flex: 1;
  min-width: 0;
}

.arc-compact-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ff027f;
  margin-bottom: 2px;
}

.arc-compact-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 3px;
  color: #222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arc-compact-excerpt {
  font-size: 12px;
  line-height: 1.4;
  color: #888;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arc-compact-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #aaa;
}

.arc-compact-author {
  color: #777;
}

/* Compact: alternating subtle background */
.arc-layout-compact .arc-compact-row:nth-child(even) .arc-compact-link {
  background: #fcfcfc;
}


/* =========================================================================
   4. CARD MINIMAL — Clean modern card with soft shadow
   ========================================================================= */
.arc-layout-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.arc-card-min {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0f0f0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.arc-card-min:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.arc-card-link {
  display: block;
}

.arc-card-img {
  width: 100%;
  overflow: hidden;
}

.arc-card-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.arc-card-min:hover .arc-card-img img {
  transform: scale(1.04);
}

.arc-card-body {
  padding: 16px 18px 18px;
}

.arc-card-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ff027f;
  margin-bottom: 6px;
}

.arc-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arc-card-excerpt {
  font-size: 13px;
  line-height: 1.45;
  color: #777;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arc-card-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #aaa;
}

.arc-card-author {
  color: #666;
  font-weight: 500;
}


/* =========================================================================
   5. HEADLINE STACK — Bold news feed (Apple News / Google News style)
   ========================================================================= */
.arc-layout-headline {
  max-width: 800px;
}

.arc-headline {
  border-bottom: 1px solid #eee;
}

.arc-headline:first-child {
  border-top: 3px solid #222;
  padding-top: 4px;
}

.arc-headline-link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  transition: background 0.15s ease;
}

.arc-headline-link:hover {
  background: #f9f9f9;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
  border-radius: 6px;
}

.arc-headline-text {
  flex: 1;
  min-width: 0;
}

.arc-headline-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ff027f;
  margin-bottom: 4px;
}

.arc-headline-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px;
  color: #111;
}

.arc-headline-excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arc-headline-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #999;
}

.arc-headline-author {
  color: #666;
  font-weight: 500;
}

.arc-headline-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  margin-top: 4px;
}

.arc-headline-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Headline: First item is hero-sized */
.arc-layout-headline .arc-headline:first-child .arc-headline-link {
  flex-direction: column;
  gap: 12px;
}

.arc-layout-headline .arc-headline:first-child .arc-headline-thumb {
  width: 100%;
  height: auto;
  border-radius: 10px;
  order: -1;
}

.arc-layout-headline .arc-headline:first-child .arc-headline-title {
  font-size: 24px;
  line-height: 1.25;
}

.arc-layout-headline .arc-headline:first-child .arc-headline-excerpt {
  -webkit-line-clamp: 3;
  font-size: 15px;
}


/* =========================================================================
   DARK MODE — All layouts
   ========================================================================= */

/* Title Only */
[data-theme="dark"] .arc-title-only {
  border-bottom-color: #333;
}
[data-theme="dark"] .arc-title-link:hover {
  background: #1e1e2e;
}
[data-theme="dark"] .arc-title-heading {
  color: #e0e0e0;
}
[data-theme="dark"] .arc-title-meta {
  color: #666;
}
[data-theme="dark"] .arc-title-author {
  color: #888;
}

/* Big Thumbnail */
[data-theme="dark"] .arc-big-thumb {
  background: #1a1a2e;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .arc-big-thumb:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="dark"] .arc-big-img {
  background: #2a2a3a;
}
[data-theme="dark"] .arc-big-title {
  color: #e0e0e0;
}
[data-theme="dark"] .arc-big-excerpt {
  color: #999;
}
[data-theme="dark"] .arc-big-meta {
  color: #666;
}
[data-theme="dark"] .arc-big-author {
  color: #aaa;
}

/* Compact Row */
[data-theme="dark"] .arc-compact-row {
  border-bottom-color: #2a2a3a;
}
[data-theme="dark"] .arc-compact-link:hover {
  background: #1e1e2e;
}
[data-theme="dark"] .arc-compact-img {
  background: #2a2a3a;
}
[data-theme="dark"] .arc-compact-no-img .arc-compact-placeholder {
  color: #555;
}
[data-theme="dark"] .arc-compact-title {
  color: #e0e0e0;
}
[data-theme="dark"] .arc-compact-excerpt {
  color: #777;
}
[data-theme="dark"] .arc-compact-meta {
  color: #666;
}
[data-theme="dark"] .arc-layout-compact .arc-compact-row:nth-child(even) .arc-compact-link {
  background: #16162a;
}

/* Card Minimal */
[data-theme="dark"] .arc-card-min {
  background: #1a1a2e;
  border-color: #2a2a3a;
}
[data-theme="dark"] .arc-card-min:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .arc-card-img {
  background: #2a2a3a;
}
[data-theme="dark"] .arc-card-title {
  color: #e0e0e0;
}
[data-theme="dark"] .arc-card-excerpt {
  color: #888;
}
[data-theme="dark"] .arc-card-meta {
  color: #666;
}
[data-theme="dark"] .arc-card-author {
  color: #aaa;
}

/* Headline Stack */
[data-theme="dark"] .arc-headline {
  border-bottom-color: #333;
}
[data-theme="dark"] .arc-headline:first-child {
  border-top-color: #e0e0e0;
}
[data-theme="dark"] .arc-headline-link:hover {
  background: #1e1e2e;
}
[data-theme="dark"] .arc-headline-title {
  color: #e0e0e0;
}
[data-theme="dark"] .arc-headline-excerpt {
  color: #999;
}
[data-theme="dark"] .arc-headline-meta {
  color: #666;
}
[data-theme="dark"] .arc-headline-author {
  color: #aaa;
}
[data-theme="dark"] .arc-headline-thumb {
  background: #2a2a3a;
}


/* =========================================================================
   RESPONSIVE — Tablet (max-width: 768px)
   ========================================================================= */
@media (max-width: 768px) {

  /* Title Only */
  .arc-title-link {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .arc-title-cat {
    min-width: auto;
  }
  .arc-title-meta {
    width: 100%;
    padding-left: 0;
  }
  .arc-title-heading {
    font-size: 15px;
    width: 100%;
  }

  /* Big Thumbnail: single column */
  .arc-layout-bigthumb {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .arc-layout-bigthumb .arc-big-thumb:first-child .arc-big-img {
    max-height: 300px;
  }
  .arc-layout-bigthumb .arc-big-thumb:first-child .arc-big-title {
    font-size: 20px;
  }
  .arc-big-title {
    font-size: 16px;
  }

  /* Compact Row */
  .arc-compact-link {
    min-height: 70px;
    gap: 10px;
  }
  .arc-compact-img {
    width: 70px;
    height: 52px;
  }
  .arc-compact-title {
    font-size: 14px;
  }

  /* Card Minimal: 2 columns */
  .arc-layout-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Headline Stack */
  .arc-headline-title {
    font-size: 16px;
  }
  .arc-headline-thumb {
    width: 100px;
    height: 75px;
  }
  .arc-layout-headline .arc-headline:first-child .arc-headline-title {
    font-size: 20px;
  }
}


/* =========================================================================
   RESPONSIVE — Mobile (max-width: 480px)
   ========================================================================= */
@media (max-width: 480px) {

  /* Title Only */
  .arc-title-link {
    padding: 12px 0;
  }
  .arc-title-heading {
    font-size: 14px;
  }
  .arc-title-cat {
    font-size: 10px;
  }

  /* Big Thumbnail */
  .arc-big-body {
    padding: 14px 16px 16px;
  }
  .arc-big-title {
    font-size: 15px;
  }
  .arc-big-excerpt {
    font-size: 13px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .arc-layout-bigthumb .arc-big-thumb:first-child .arc-big-title {
    font-size: 18px;
  }

  /* Compact Row */
  .arc-compact-link {
    min-height: 64px;
    gap: 10px;
    padding: 8px 0;
  }
  .arc-compact-img {
    width: 60px;
    height: 46px;
    border-radius: 4px;
  }
  .arc-compact-title {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
  .arc-compact-excerpt {
    display: none;
  }
  .arc-compact-cat {
    font-size: 9px;
  }

  /* Card Minimal: single column */
  .arc-layout-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .arc-card-title {
    font-size: 14px;
  }
  .arc-card-body {
    padding: 12px 14px 14px;
  }

  /* Headline Stack */
  .arc-headline-link {
    padding: 14px 0;
    gap: 12px;
  }
  .arc-headline-title {
    font-size: 15px;
  }
  .arc-headline-excerpt {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
  .arc-headline-thumb {
    width: 80px;
    height: 60px;
    border-radius: 6px;
  }
  .arc-layout-headline .arc-headline:first-child .arc-headline-title {
    font-size: 18px;
  }
  .arc-layout-headline .arc-headline:first-child .arc-headline-thumb {
    border-radius: 8px;
  }
}


/* =========================================================================
   WITH SIDEBAR — Adjust grid counts when sidebar is visible
   ========================================================================= */
.has-sidebar .arc-layout-bigthumb {
  grid-template-columns: 1fr;
}

.has-sidebar .arc-layout-card {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .has-sidebar .arc-layout-card {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   FULL WIDTH (no cover) — Wider grids
   ========================================================================= */
.f-width .arc-layout-bigthumb {
  grid-template-columns: repeat(3, 1fr);
}

.f-width .arc-layout-bigthumb .arc-big-thumb:first-child {
  grid-column: 1 / -1;
}

.f-width .arc-layout-card {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .f-width .arc-layout-bigthumb {
    grid-template-columns: 1fr 1fr;
  }
  .f-width .arc-layout-card {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .f-width .arc-layout-bigthumb {
    grid-template-columns: 1fr;
  }
  .f-width .arc-layout-card {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .f-width .arc-layout-card {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   AMP COMPATIBILITY NOTES
   ========================================================================= */
/*
 * All layouts above are fully AMP compatible:
 * - No JavaScript dependencies
 * - All animations use CSS transitions only (transform, opacity, box-shadow)
 * - Semantic HTML5 elements (<article>, <time>, <a>, <h3>)
 * - No external resources beyond WordPress-generated images
 * - Font Awesome icons (only in compact-row placeholder) degrade gracefully
 * - All images use natural proportions (display: block; height: auto)
 * - Flexbox and CSS Grid are well-supported on all AMP runtimes
 * - No !important overrides except where inheriting from theme defaults
 * - No inline styles — all styles are in this external stylesheet
 * - -webkit-line-clamp is supported in all modern browsers including AMP
 *
 * For AMP pages, ensure the AMP plugin processes these templates.
 * The <img> tags from the_post_thumbnail() will be converted to <amp-img>
 * automatically by the official AMP for WordPress plugin.
 */

/* ─── Homepage Compact Row: 100px thumbnails (larger than archive 80px) ─── */
#latest-posts.arc-layout-compact .arc-compact-img {
  width: 100px;
  height: 75px;
}
#latest-posts.arc-layout-compact .arc-compact-title {
  font-size: 17px;
}