/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ========================================
   AETV Utility Classes
   ======================================== */

/* --- Utility: Text Colors --- */
.u-text-coral { color: #E8907A; }
.u-text-mint { color: #5BC5B3; }
.u-text-peach { color: #D4A88C; }
.u-text-cream { color: #EDE8E3; }
.u-text-muted { color: #8A9A9E; }
.u-text-body { color: #C5B9AE; }

/* --- Utility: Background Colors --- */
.u-bg-dark { background-color: #1E2A2D; }
.u-bg-surface { background-color: #263438; }
.u-bg-footer { background-color: #161F22; }
.u-bg-coral { background-color: #E8907A; }
.u-bg-mint { background-color: #5BC5B3; }

/* --- Utility: Hover Effects --- */
.u-hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.u-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.u-hover-glow { transition: box-shadow 0.3s ease; }
.u-hover-glow:hover { box-shadow: 0 0 20px rgba(91,197,179,0.2); }
.u-hover-coral { transition: color 0.2s ease; }
.u-hover-coral:hover { color: #E8907A; }
.u-hover-mint { transition: color 0.2s ease; }
.u-hover-mint:hover { color: #5BC5B3; }

/* --- Utility: Text Clamp --- */
.u-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Component: Card --- */
.c-card { background: #263438; border: 1px solid #374A50; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.c-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.c-card img { width: 100%; height: auto; display: block; }

/* --- Component: Badge --- */
.c-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.c-badge--mint { background: rgba(91, 197, 179, 0.5); color: white !important}
.c-badge--coral { background: rgba(232, 144, 122, 0.15); color: white; }

/* --- Component: Thumbnail + Duration --- */
.c-thumb-wrap { position: relative; overflow: hidden; }
.c-thumb-wrap img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.c-card:hover .c-thumb-wrap img { transform: scale(1.05); }
.c-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.75); color: #EDE8E3; padding: 2px 8px; border-radius: 4px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; }

/* --- Component: Video Embed 16:9 --- */
.c-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background: #161F22; }
.c-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* --- Object: Decorations --- */
.o-dot-separator { display: flex; justify-content: center; padding: 40px 0; }
.o-dot-separator::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(212,168,140,0.6);
  box-shadow:
    -32px 0 0 rgba(232,144,122,0.6),
    -16px 0 0 rgba(91,197,179,0.6),
    16px 0 0 rgba(91,197,179,0.6),
    32px 0 0 rgba(232,144,122,0.6);
}
.o-divider-teal { border: none; height: 1px; background: linear-gradient(90deg, transparent, #5BC5B3, transparent); opacity: 0.3; margin: 0; }

/* --- Object: Gradient Overlay --- */
.o-overlay-gradient { position: relative; }
.o-overlay-gradient::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,1), transparent); pointer-events: none; }

/* --- Global: Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1E2A2D; }
::-webkit-scrollbar-thumb { background: #374A50; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #5BC5B3; }

/* --- Global: Selection, Scroll, Focus --- */
::selection { background: rgba(91,197,179,0.3); color: #EDE8E3; }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #5BC5B3; outline-offset: 2px; }


/* --- Base: Images --- */
img { max-width: 100%; height: auto; }

/* --- Base: Links --- */
a { transition: color 0.2s ease; text-decoration: none; }

/* --- Base: Headings --- */
h1, h2, h3, h4, h5, h6 { font-family: "DM Serif Display", serif; color: #EDE8E3}

/* --- Object: Container --- */
.o-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }


/* --- Base: Images --- */
img { max-width: 100%; height: auto; }

/* --- Base: Links --- */
a { transition: color 0.2s ease; text-decoration: none; }

/* --- Base: Headings --- */
h1, h2, h3, h4, h5, h6 { font-family: "DM Serif Display", serif; }

/* --- Object: Container --- */
.o-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }


/* --- Base: Images --- */
img { max-width: 100%; height: auto; }

/* --- Base: Links --- */
a { transition: color 0.2s ease; text-decoration: none; }

/* --- Base: Headings --- */
h1, h2, h3, h4, h5, h6 { font-family: "DM Serif Display", serif; }

/* --- Object: Container --- */
.o-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }


/* --- Component: Post Tags --- */
.post-tags { padding-top: 24px; margin-top: 32px; border-top: 1px solid rgba(91,197,179,0.1); }
.post-tags a {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
  background: #253337;
  border: 1px solid rgba(138,154,158,0.15);
  border-radius: 6px;
  font-size: 13px;
  color: #8A9A9E;
  text-decoration: none;
  transition: all 0.2s;
}
.post-tags a:hover {
  border-color: #5BC5B3;
  color: #5BC5B3;
  background: rgba(91,197,179,0.05);
}

/* --- Component: Post Tags --- */
.post-tags { padding-top: 24px; margin-top: 32px; border-top: 1px solid rgba(91,197,179,0.1); }
.post-tags a {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
  background: #253337;
  border: 1px solid rgba(138,154,158,0.15);
  border-radius: 6px;
  font-size: 13px;
  color: #8A9A9E;
  text-decoration: none;
  transition: all 0.2s;
}
.post-tags a:hover {
  border-color: #5BC5B3;
  color: #5BC5B3;
  background: rgba(91,197,179,0.05);
}

/* --- Component: Sidebar --- */
.sidebar-section { background: #253337; border-radius: 12px; padding: 24px; margin-bottom: 24px; }

/* --- Component: Share Buttons --- */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: #2A3B40;
  border: 1px solid rgba(138,154,158,0.1);
  color: #8A9A9E;
  text-decoration: none;
  transition: all 0.2s;
}
.share-btn:hover {
  border-color: #5BC5B3;
  color: #5BC5B3;
  background: rgba(91,197,179,0.05);
}

/* --- Component: Sidebar --- */
.sidebar-section { background: #253337; border-radius: 12px; padding: 24px; margin-bottom: 24px; }

/* --- Component: Share Buttons --- */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: #2A3B40;
  border: 1px solid rgba(138,154,158,0.1);
  color: #8A9A9E;
  text-decoration: none;
  transition: all 0.2s;
}
.share-btn:hover {
  border-color: #5BC5B3;
  color: #5BC5B3;
  background: rgba(91,197,179,0.05);
}