/**
 * Styles for the ELE Standard List Addon (ele-standard-list-widget.php)
 */

/* -------------------------------------------
 * 1. Wrapper (Flexbox Parent for Content + Grid)
 * ------------------------------------------- */
.ele-standard-list-wrapper {
    /* Base for the two-column layout defined in PHP controls */
    display: flex;
    box-sizing: border-box;
    /* Default gap is set via PHP control: grid_gap */
}

/* -------------------------------------------
 * 2. Left Content Area (Title/Global Content)
 * ------------------------------------------- */
.ele-content-area {
    /* Ensures content area respects its width set in PHP */
    box-sizing: border-box;
}

.ele-list-title {
    /* Default title reset */
    margin-top: 0;
}

/* -------------------------------------------
 * 3. Right Grid Area (List Items Container)
 * ------------------------------------------- */
.ele-grid-area ul {
    /* Essential reset for the UL when used as a CSS Grid container */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Grid properties (display: grid; grid-template-columns) are set in PHP control: grid_columns */
}

/* -------------------------------------------
 * 4. List Item (Flexbox Parent for Icon + Content)
 * ------------------------------------------- */
.list-item {
    /* Default layout for icon and content (moved from 'enable_predefined_style' control) */
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* Default visual styling (moved from 'enable_predefined_style' control) */
    /*background-color: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 15px 20px;*/
}

/* -------------------------------------------
 * 5. Icon Styling
 * ------------------------------------------- */
.list-item-icon {
    /* Base for the icon container. Size, background, and rounding is set by PHP control: icon_size */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents icon container from shrinking */
}

.list-item-icon img {
    /* Ensures images are contained */
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------
 * 6. Link Content Styling
 * ------------------------------------------- */
.list-item-content {
    /* Ensures content area uses remaining space */
    flex-grow: 1;
}

.list-item-content a {
    /* Reset default link styling */
    text-decoration: none;
    /* Color is set by PHP control: link_color */
}

/* -------------------------------------------
 * 7. Responsiveness (Optional, for example)
 * ------------------------------------------- */
/* Example: Switch to column layout on mobile */
@media (max-width: 767px) {
    .ele-standard-list-wrapper {
        flex-direction: column;
    }
    
    .ele-content-area {
        /* Remove the fixed width/flex-basis on small screens */
        flex-basis: auto !important;
        width: 100%;
        padding-right: 0 !important;
        margin-bottom: 20px; /* Space between content and list */
    }
}


/* Section wrapper */
.omf-section{
  background:var(--bg);
  padding:48px 20px;
  color:var(--text);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Inner container */
.omf-inner{
  max-width:var(--max-width);
  margin:0 auto;
  text-align:center;
}

/* Title */
.omf-title{
  font-size:34px;
  line-height:1.05;
  font-weight:700;
  margin:6px 0 18px;
  letter-spacing:0.2px;
}

/* Stripe band (with diagonal pattern) */
.omf-stripe-wrap{
  position:relative;
  margin:0 auto 36px;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* stripe background bar */
.omf-stripe{
  width:100%;
  max-width:950px;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.03) 0 12px,
    rgba(255,255,255,0.00) 12px 24px
  );
  background-color:transparent;
  border-radius:6px;
  padding:14px 24px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px solid var(--accent);
}

/* subtitle inside stripe */
.omf-sub{
  margin:0;
  font-size:15px;
  max-width:820px;
  color:var(--muted);
  text-align:center;
  padding:0 6px;
}

/* badge number overlapping the stripe */
.omf-badge{
  position:absolute;
  background:rgba(35,110,180,0.95);
  border-radius:6px;
  padding:4px 8px;
  font-weight:700;
  font-size:14px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  left:50%;
  transform:translate(-50%, -50%);
  width:44px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Cards container */
.omf-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  justify-items:center;
  margin-top:8px;
}

/* Individual card */
.omf-card{
  width:100%;
  max-width:520px;
  background:var(--panel);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(3,18,45,0.45);
  padding:22px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.03);
}

/* inner card content layout */
.omf-card-inner{
  display:flex;
  align-items:center;
  gap:18px;
}

/* icon container */
.omf-icon img{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
}

/* card title */
.omf-card-title{
  margin:0;
  font-size:18px;
  font-weight:600;
  color:var(--text);
  text-align:left;
}

/* Responsive stack on narrow screens */
@media (max-width:880px){
  .omf-title{
    font-size:26px;
  }
  .omf-stripe{
    padding:12px 14px;
  }
  .omf-badge{
    left:50%;
    top:calc(100% + -12px); /* slightly overlaps */
    transform:translateX(-50%);
  }
  .omf-cards{
    grid-template-columns:1fr;
  }
  .omf-card{
    padding:18px;
  }
  .omf-card-inner{
    gap:14px;
  }
}

/* small tweak for very small devices */
@media (max-width:420px){
  .omf-title{ font-size:20px; }
  .omf-sub{ font-size:13px; }
  .omf-icon img{ width:44px;height:44px; }
  .omf-card-title{ font-size:16px; }
}