/* ===================================================================
   Kadence Dynamic Posts Widget Pro v3.1
   Section 1 bg: #f5f4f2  |  Section 2 bg: #dff0f0
   Title colour: #1a1a1a  |  Title hover:  #757575
   =================================================================== */

:root {
    --kdpw-accent:         #1a1a1a;
    --kdpw-text:           #1a1a1a;
    --kdpw-text-hover:     #757575;
    --kdpw-text-muted:     #757575;
    --kdpw-bg-top:         #f5f4f2;
    --kdpw-bg-bottom:      #dff0f0;
    --kdpw-divider:        rgba(0,0,0,0.10);
    --kdpw-col-divider:    rgba(0,0,0,0.10);
    --kdpw-radius:         12px;
    --kdpw-transition:     0.17s ease;
}

/* ── Wrapper ── */
.kdpw-wrap {
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

/* =============================================
   SECTION 1 — TOP LIST  (bg #f5f4f2)
   ============================================= */
.kdpw-itineraries {
    background: var(--kdpw-bg-top);
    border-radius: var(--kdpw-radius);
    overflow: hidden;
    margin-bottom: 8px;
}

.kdpw-itineraries__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    text-decoration: none;
    color: var(--kdpw-text);
    transition: color var(--kdpw-transition);
    position: relative;
}

/* row dividers */
.kdpw-itineraries__item + .kdpw-itineraries__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--kdpw-divider);
}

/* hover — title turns #757575 */
.kdpw-itineraries__item:hover,
.kdpw-itineraries__item:focus {
    color: var(--kdpw-text-hover);
    text-decoration: none;
}

.kdpw-itineraries__item:focus-visible {
    outline: 2px solid var(--kdpw-accent);
    outline-offset: -2px;
    border-radius: 3px;
}

/* circle-arrow icon */
.kdpw-itineraries__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--kdpw-accent);
    transition: transform var(--kdpw-transition);
}

.kdpw-itineraries__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.kdpw-itineraries__item:hover .kdpw-itineraries__icon {
    transform: translateX(2px);
    color: var(--kdpw-text-hover);
}

/* post title text */
.kdpw-itineraries__title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
    /* inherit current color from parent <a> */
}

/* =============================================
   SECTION 2 — BOTTOM TWO COLUMNS  (bg #dff0f0)
   ============================================= */
.kdpw-topics {
    display: flex;
    align-items: stretch;
    background: var(--kdpw-bg-bottom);
    border-radius: var(--kdpw-radius);
    overflow: hidden;
    margin-top: 0;
}

/* each column */
.kdpw-topic-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;    /* title sits at bottom, category below */
    gap: 3px;
    padding: 14px 16px 15px;
    text-decoration: none;
    color: var(--kdpw-text);
    box-sizing: border-box;
    transition: color var(--kdpw-transition), background var(--kdpw-transition);
    cursor: pointer;
    position: relative;
}

/* divider between the two columns */
.kdpw-topic-col--right {
    border-left: 1px solid var(--kdpw-col-divider);
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    justify-content: space-between;
}

/* hover state — title colour changes to #757575 */
.kdpw-topic-col:hover,
.kdpw-topic-col:focus {
    color: var(--kdpw-text-hover);
    background: rgba(0,0,0,0.04);
    text-decoration: none;
}

.kdpw-topic-col:focus-visible {
    outline: 2px solid var(--kdpw-accent);
    outline-offset: -2px;
}

/* post title */
.kdpw-topic-col__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
    /* colour inherited from parent <a> */
    margin: 0;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

/* category name — always muted grey, sits below title */
.kdpw-topic-col__cat {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--kdpw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.2;
    margin-top: 2px;
}

/* right column inner wrapper (title + cat stacked) */
.kdpw-topic-col__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* right-column chevron arrow */
.kdpw-topic-col__arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--kdpw-text);
    opacity: 0.45;
    transition: transform var(--kdpw-transition), opacity var(--kdpw-transition);
    align-self: center;
}

.kdpw-topic-col__arrow svg {
    width: 17px;
    height: 17px;
    display: block;
}

.kdpw-topic-col--right:hover .kdpw-topic-col__arrow {
    transform: translateX(2px);
    opacity: 0.8;
    color: var(--kdpw-text-hover);
}

/* =============================================
   EMPTY STATE
   ============================================= */
.kdpw-empty {
    padding: 24px 20px;
    text-align: center;
    border: 2px dashed rgba(0,0,0,0.12);
    border-radius: var(--kdpw-radius);
}

.kdpw-empty p {
    margin: 0;
    font-size: 13px;
    color: var(--kdpw-text-muted);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 400px) {
    .kdpw-itineraries__item { padding: 10px 13px; gap: 9px; }
    .kdpw-itineraries__title { font-size: 13.5px; }
    .kdpw-topic-col { padding: 12px 13px 13px; }
    .kdpw-topic-col__title { font-size: 13px; }
}

/* Fill full width inside Kadence / Elementor columns */
.wp-block-column .kdpw-wrap,
.elementor-widget-kdpw_dynamic_posts .kdpw-wrap,
.kdpw-classic-widget .kdpw-wrap {
    max-width: 100%;
}

/* =============================================
   ELEMENTOR EDITOR PLACEHOLDER
   ============================================= */
.kdpw-elementor-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    border: 2px dashed #ccc;
    border-radius: 10px;
    color: #888;
    text-align: center;
}

.kdpw-elementor-placeholder p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Gutenberg manual editor */
.kdpw-manual-editor .components-base-control { margin-bottom: 6px !important; }