/*
-- featured.html relevant styles excluding link in style.css
-- Created: 09/10/2026
-- Author: JFO
-- Note: Default styles applied before listing styles.

*/

/* Default for featured */

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  /* display: none;  Hidden by default; NOT hidden by default Anymore... */

  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(15, 12, 12, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



/*  Styles relevant to featured content from listing...   */

h1 {
  font-size: 20px;
  color: var(--black-color);
  margin-top: 2em;
  margin-bottom: 0.5em;
  word-break: break-all;          /* Breaks words (forcefully) at the edge of a container  */
}


.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
 /* display: none;  Hide all elements by default */
}


/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}



.column .content img {                  /* affects all .column and .content, controls the appearance of the photos - style the images */
    height: 250px;                      /* make all images the same height */
    width: 100%;                        /* stretch the full width of this container  */
    object-fit: cover;                  /* keeps aspect ratio and crops the image to the box proportionally instead of stretching */
    display: block;
    transition: 100ms ease;             /* transition for a visual appeal and effect */
    filter: contrast(100%);             /* make contrast 100 per cent */
    margin-bottom: 1.5em;
}

.column .content img:hover {                        /* when a visitor hover over an image, it will be slightly bigger */
    scale: 1.10;                                    /* we want to increase the scale by making it 1.05 */
    border: 0.1em solid var(--base-white);          /* Updated: 15-06-2026 - turn each border to white */
    cursor: pointer;
}

p { margin-top: 1em; font-size: small;}             /* images description font style */

.column .content a {color:var(--gallery-bg); font-weight: bold; font-style: none; text-decoration:none; width: 640px; }

.column .content a:hover {
        border-bottom: 1px;
        color: var(--orange-color);
        text-decoration: none;
}



/* 09102026: Updated from w3 snip */
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 100%;
  }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 640px) {
  .column {
    width: 100%;
  }
 }
}