/* ==========================================================================
   AAPOLIX LAYOUT.CSS
========================================================================== */
/* ==========================================================================
   01. CONTAINERS
========================================================================== */
.apx-container {
    width: 100%;
    max-width: var(--apx-container);
    padding-inline: var(--apx-4);
    margin-inline: auto;
}
.apx-container-fluid {
    width: 100%;
    padding-inline: var(--apx-4);
    margin-inline: auto;
}
.apx-content {
    width: 100%;
    max-width: var(--apx-content);
    margin-inline: auto;
}
.author-section {font-size: var(--apx-text-sm); margin-top: -15px; color: var(--apx-muted);}
.apx-shorts-desc {font-size: var(--apx-text-xs); margin-top: -15px; color: var(--apx-muted); padding-bottom:var(--apx-6); }
.apx-container img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-block: var(--apx-4);
}
/* ==========================================================================
   02. SECTIONS
========================================================================== */
.apx-section {
    padding-top: var(--apx-8);
    padding-bottom: var(--apx-5);	
}
.apx-section-sm {
	padding-left: 0px;
    padding-top: var(--apx-4);
    padding-bottom: var(--apx-4);
}
.apx-section-lg {
    padding-top: var(--apx-10);
    padding-bottom: var(--apx-10);
}
/* ==========================================================================
   03. GRID SYSTEM (MOBILE FIRST)
========================================================================== */
.apx-grid {
    display: grid;
    gap: var(--apx-5);
    grid-template-columns: 1fr; /* mobile default */
	padding-top: var(--apx-4);
    padding-bottom: var(--apx-4);
}
/* =========================================
   SEARCH PAGE
========================================= */
.apx-search-page {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 700px;      /* Bigger search field */
    margin: 28px auto 24px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.apx-search-page .apx-search-input {
    flex: 1;
    font-size: 17px;
    padding: 12px 10px;
}
.apx-search-page .apx-search-button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
}
.apx-pagination{
    margin-top:40px;
    text-align:center;
}
/* Tablet */
@media (min-width: 768px) {
    .apx-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .apx-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Desktop */
@media (min-width: 1024px) {
    .apx-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Auto responsive grid (very important for cards) */
.apx-grid-auto {
    display: grid;
    gap: var(--apx-5);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* ==========================================================================
   04. FLEX SYSTEM
========================================================================== */
.apx-flex {
    display: flex;
    gap: var(--apx-4);
}
.apx-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.apx-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apx-flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--apx-4);
	font-size: 7px;
}

/* ==========================================================================
   05. STACK SYSTEM (VERTICAL SPACING)
========================================================================== */
.apx-stack > * + * {
    margin-top: var(--apx-5);
}
/* ==========================================================================
   06. CLUSTER (INLINE GROUPS)
========================================================================== */
.apx-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--apx-3);
    align-items: center;
}
/* ==========================================================================
   07. SIDEBAR LAYOUT
========================================================================== */
.apx-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--apx-6);
}
/* ==========================================================
   SIDEBAR STYLING
========================================================== */
.apx-sidebar .apx-card {
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    overflow: hidden;
}
.apx-card-body img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
	padding-block: 0px;
}
/* Widget title */
.apx-sidebar .apx-card-title {
    font-size: 15px;
    font-weight: 600;
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #fafafa;
}
.apx-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* each item */
.apx-sidebar ul li {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.2s ease;
}
/* remove last line */
.apx-sidebar ul li:last-child {
    border-bottom: none;
}
/* hover effect */
.apx-sidebar ul li:hover {
    background: rgba(0,0,0,0.03);
}
/* links inside widgets */
.apx-sidebar ul li a {
    text-decoration: none;
    color: #333;
    display: block;
}
.apx-sidebar ul li a:hover {
    color: #000;
}
.apx-sidebar ul li {
    position: relative;
    padding: 10px 16px;
}
.apx-sidebar ul li::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.08), transparent);
}
.apx-sidebar ul li:last-child::after {
    display: none;
}
/* Desktop sidebar */
@media (min-width: 1024px) {
	.apx-layout-sidebar {
		min-width: 0;
        grid-template-columns: 1fr 320px;
    }
}
.apx-main {
    min-width: 0;
}
.apx-sidebar {
    min-width: 0;
}
/* ==========================================================================
   08. RESPONSIVE UTILITIES
========================================================================== */
@media (max-width: 768px) {
    .apx-hide-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .apx-hide-desktop {
        display: none !important;
    }
}
/*==========================================================================
APX COMMENTS UI
Mobile First
==========================================================================*/
/*--------------------------------------------------
Comment Form Card
--------------------------------------------------*/
.comment-respond{
    margin:var(--apx-6) 0;
    background:var(--apx-surface,#fff);
    border:1px solid var(--apx-border);
    border-top:3px solid var(--apx-primary);
    border-radius:var(--apx-radius-lg);
    box-shadow:var(--apx-shadow-sm);
}
/*--------------------------------------------------
Title
--------------------------------------------------*/
.comment-reply-title{
    margin:0 0 var(--apx-2);
padding:var(--apx-5);
    font-size:var(--apx-text-lg);
    font-weight:700;
    color:var(--apx-text);
}

.comment-notes{
    margin:0 0 var(--apx-5);
    font-size:var(--apx-text-sm);
    color:var(--apx-text-muted,#6b7280);
}
/*--------------------------------------------------
Form Layout
--------------------------------------------------*/
.comment-form{
    display:flex;
padding:var(--apx-5);
    flex-direction:column;
    gap:var(--apx-4);
}

.comment-form p{
    margin:0;
}
/*--------------------------------------------------
Labels
--------------------------------------------------*/
.comment-form label{
    display:block;
    margin-bottom:var(--apx-2);
    font-size:var(--apx-text-sm);
    font-weight:600;
    color:var(--apx-text);
}
/*--------------------------------------------------
Input Fields
--------------------------------------------------*/
.comment-form input,
.comment-form textarea{
    width:100%;
    padding:var(--apx-3);
    font-family:inherit;
    font-size:var(--apx-text-base);
    line-height:1.5;
    color:var(--apx-text);
    background:var(--apx-bg,#fff);
    border:1px solid var(--apx-border);
    border-radius:var(--apx-radius-md);
    transition:
        border-color .2s,
        box-shadow .2s;
}

.comment-form textarea{
    min-height:160px;
    resize:vertical;
}
/*--------------------------------------------------
Placeholder
--------------------------------------------------*/
.comment-form input::placeholder,
.comment-form textarea::placeholder{
    color:#9ca3af;
}
/*--------------------------------------------------
Focus
--------------------------------------------------*/
.comment-form input:focus,
.comment-form textarea:focus{
    outline:none;
    border-color:var(--apx-primary);
    box-shadow:0 0 0 3px rgba(10,102,194,.12);
}
/*--------------------------------------------------
Submit Button
--------------------------------------------------*/
.comment-form .submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    padding:.75rem 1.5rem;
    font-size:var(--apx-text-sm);
    font-weight:600;
    color:#fff;
    background:var(--apx-primary);
    border:0;
    border-radius:var(--apx-radius-md);
    cursor:pointer;
    transition:
        background-color .25s,
        transform .2s;
}
.comment-form .submit:hover{
    background:var(--apx-primary-hover);
}
.comment-form .submit:active{
    transform:scale(.98);
}
/*--------------------------------------------------
Required Mark
--------------------------------------------------*/
.comment-form .required{
    color:#dc2626;
}
/*--------------------------------------------------
Logged In Info
--------------------------------------------------*/
.logged-in-as{
    margin-bottom:var(--apx-4);
    font-size:var(--apx-text-sm);
}
.logged-in-as a{
    color:var(--apx-primary);
    text-decoration:none;
}
.logged-in-as a:hover{
    text-decoration:underline;
}
/*--------------------------------------------------
Cookies
--------------------------------------------------*/
.comment-form-cookies-consent{
    display:none;
}
/*--------------------------------------------------
Tablet
--------------------------------------------------*/
@media (min-width:768px){
    .comment-respond{
    }
}
/*--------------------------------------------------
Desktop
--------------------------------------------------*/
@media (min-width:1024px){
    .comment-respond{
    }
}