/* --------------------------------
   Base
-------------------------------- */

* { box-sizing: border-box; }

html, body {
  height:100%;
  margin:0;
  font-family: Arial, sans-serif;
  background:#ffffff;
  color:#111;
}

/* --------------------------------
   Variables
-------------------------------- */

:root{
  --gap:10px;
  --margin:10px;
  --padding: 10px;
  --border:1px solid #e0e0e0;
  --radius:8px;
  --title-bg:#f3f3f3;
}

/* --------------------------------
   Plugin wrapper
-------------------------------- */

.tdwp .row,
.tdwp .center,
.tdwp .bottom{
  margin:0 var(--margin) var(--margin);
  gap:var(--gap);
}

/* --------------------------------
   Blocks
-------------------------------- */

.tdwp .cell > a.tdwp-link{
  display:inline;
}

.tdwp .col,
.tdwp .cell,
.tdwp .box,
.tdwp .top{
  border:var(--border);
  border-radius:var(--radius);
  padding:var(--padding);
  display:flex;
  flex-direction:column;
  font-weight:400;
  min-width:0;
  min-height:150px;
  color:#111;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

/* --------------------------------
   Block title
-------------------------------- */

.tdwp .block-title{
  background:var(--title-bg);
  border-radius:var(--radius);
  padding:6px 10px;
  margin-bottom:10px;
  text-align:center;
  font-weight:700;
  z-index:1;
}

/* --------------------------------
   Top block
-------------------------------- */

.tdwp .top{
  text-align:center;
  margin-bottom:var(--margin);
  background-repeat:repeat;
  background-position:top left;
  background-size:auto;
}

/* --------------------------------
   Center row
-------------------------------- */

.tdwp .center{
  display:grid;
  grid-template-columns:20% 1fr 20%;
  align-items:stretch;
  gap:var(--gap);
}

/* --------------------------------
   Bottom row
-------------------------------- */

.tdwp .bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
}

.tdwp .bottom > .box{
  flex:1 1 48%;
  min-height:120px;
}

/* --------------------------------
   Extra rows
-------------------------------- */

.tdwp .row.three{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.tdwp .row.four{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.tdwp .row.five{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

/* --------------------------------
   Responsive
-------------------------------- */

@media (max-width:1000px){

  .tdwp .center{
    grid-template-columns:1fr;
  }

  .tdwp .bottom{
    flex-direction:column;
  }

  .tdwp .bottom > .box{
    flex:1 1 100%;
  }

  .tdwp .row.three,
  .tdwp .row.four,
  .tdwp .row.five{
    grid-template-columns:1fr;
  }
}

/* --------------------------------
   Image helper
-------------------------------- */

.tdwp .tdwp-img-rounded{
  border-radius:8px;
  overflow:hidden;
  display:block;
}

/* --------------------------------
   Link helper
-------------------------------- */

.tdwp .tdwp-link{
  text-decoration:none;
  color:#1a73e8;
}

.tdwp .tdwp-link:hover{
  color:#cc0000;
}

.tdwp .tdwp-link:visited{
  color:#1a73e8; /* #6a1b9a; */
}

/* ---
Flex helper class for Directonist vertical ticker menu
--- */

.tdwp-inline-middle{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

/* ---
Vertical ticker
--- */

.thw-vertical-ticker-container{
  width:300px;
  height:150px;
  overflow:hidden;
  position:relative;
  padding:5px;
  font-family:Verdana,sans-serif;
  font-size:15px;
}

.thw-vertical-ticker{
  display:flex;
  flex-direction:column;
  animation:thw-scroll-up 89s linear infinite;
}

.thw-ticker-item{ padding:5px 0; color:#444; }

.thw-inline-box{
  display:flex;
  align-items:center;
  gap:5px;
}

.thw-bottom:empty { display: none; }

.thw-widget {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.thw-inline-box img{ width:32px; height:32px; }

.thw-widget .thumb-rounded {
    border-radius: 8px;
    width: 100%;
    height: auto;
    object-fit: cover;
    border: none;
}

.thw-widget .container {
    text-align: center;
    max-width: 360px;
    margin: auto;
}

.thw-widget .title-link {
    font-family: Consolas;
    font-size: 14px;
    text-decoration: none;
    color: #333;
}

.thw-widget .title-link:hover {
    color: #cc0000;
}


@keyframes thw-scroll-up{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-50%); }
}


/* --------------------------------
   Background images
-------------------------------- */

/* Center */

.tdwp .center .col:nth-child(1){
  background-image:url('https://via.placeholder.com/200x150/f7c5cc/000?text=Left');
}

.tdwp .center .col:nth-child(2){
  background-image:url('https://via.placeholder.com/400x150/c5f7cc/000?text=Center');
}

.tdwp .center .col:nth-child(3){
  background-image:url('https://via.placeholder.com/200x150/f7e8c5/000?text=Right');
}

/* Bottom */

.tdwp .bottom .box:nth-child(1){
  background-image:url('https://via.placeholder.com/400x120/d1c5f7/000?text=Bottom+Left');
}

.tdwp .bottom .box:nth-child(2){
  background-image:url('https://via.placeholder.com/400x120/f7c5f0/000?text=Bottom+Right');
}

/* Row three */

.tdwp .row.three .cell:nth-child(1){
  background-image:url('https://via.placeholder.com/200x150/ffe0b2/000?text=R1+Block1');
}

.tdwp .row.three .cell:nth-child(2){
  background-image:url('https://via.placeholder.com/200x150/b2dfdb/000?text=R1+Block2');
}

.tdwp .row.three .cell:nth-child(3){
  background-image:url('https://via.placeholder.com/200x150/c5cae9/000?text=R1+Block3');
}

/* Row four */

.tdwp .row.four .cell:nth-child(1){
  background-image:url('https://via.placeholder.com/150x150/ffccbc/000?text=R2+Block1');
}

.tdwp .row.four .cell:nth-child(2){
  background-image:url('https://via.placeholder.com/150x150/dcedc8/000?text=R2+Block2');
}

.tdwp .row.four .cell:nth-child(3){
  background-image:url('https://via.placeholder.com/150x150/b3e5fc/000?text=R2+Block3');
}

.tdwp .row.four .cell:nth-child(4){
  background-image:url('https://via.placeholder.com/150x150/f0f4c3/000?text=R2+Block4');
}

/* Row five */

.tdwp .row.five .cell:nth-child(1){
  background-image:url('https://via.placeholder.com/120x150/f8bbd0/000?text=R3+Block1');
}

.tdwp .row.five .cell:nth-child(2){
  background-image:url('https://via.placeholder.com/120x150/c8e6c9/000?text=R3+Block2');
}

.tdwp .row.five .cell:nth-child(3){
  background-image:url('https://via.placeholder.com/120x150/bbdefb/000?text=R3+Block3');
}

.tdwp .row.five .cell:nth-child(4){
  background-image:url('https://via.placeholder.com/120x150/fff9c4/000?text=R3+Block4');
}

.tdwp .row.five .cell:nth-child(5){
  background-image:url('https://via.placeholder.com/120x150/d1c4e9/000?text=R3+Block5');
}

/*----------- Slides -------------*/

/* -----------------------------
   Slider Container
----------------------------- */
.slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;       /* full width */
    height: 390px;         /* fixed slider height */
    overflow: hidden;      /* hide non-active slides */
    border-radius: 8px;    /* smooth corners */
    background-color: #f0f0f0;
    line-height: 0;        /* remove inline gaps */
}

/* -----------------------------
   Slider Track (row of slides)
----------------------------- */
.slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

/* -----------------------------
   Individual Slide
----------------------------- */
.slide {
    min-width: 100%;       /* fills container */
    width: 100%;          /* ensure explicit width match */
    height: 100%;          /* match container height */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;        /* prevent shrinking */
}

/* -----------------------------
   Slide Images
----------------------------- */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* fill slide fully without distortion */
    object-position: center;
    border-radius: 8px;    /* corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* subtle shadow */
    display: block;        /* remove inline gaps */
}

/* -----------------------------
   Navigation Buttons
----------------------------- */
.prev-button,
.next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.5);
    border: none;
    padding: 10px 14px;
    font-size: 18px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.3s;
}

.prev-button { left: 10px; }
.next-button { right: 10px; }

.prev-button:hover,
.next-button:hover {
    background: rgba(255,255,255,0.8);
}

/* -----------------------------
   Responsive
----------------------------- */
@media (max-width: 768px) {
    .slider-container { height: 300px; }
    .prev-button, .next-button { padding: 8px 12px; font-size: 16px; }
}

@media (max-width: 480px) {
    .slider-container { height: 220px; }
    .prev-button, .next-button { padding: 6px 10px; font-size: 14px; }
}